SonarQube Node.js に依存しない、FrontEnd Lint 環境を構築する


SonarQube 7.1 上に、Node.js に依存しない、frontend lint 環境を構築してみました。
結果を以下に記載します。


Node.js に依存しない FrontEnd Lint 環境を構築したい背景

Node.js に依存しない Lint 環境の構築したい背景には以下があります。

  • Node.js を使った Plugin もあるが、最新版では動かなさそう
    SonarQube には、FrontEnd Lint を実行するための plugin が存在します。
    groupe-sii/sonar-web-frontend-plugin: Sonar plugin to add metrics for web technologies (JS, CSS, HTML, SASS, AngularJS…)
    上記は、非常に良い感じなのですが、長い期間メンテナンスされている雰囲気がありません。

  • エンタープライズで使用している場合、ソフトウェアのインストールが難しい場合がある
    アプリケーション本体に、Node.js が使用されている箇所がある場合などは、インストールという障壁がないかもしれませんが、アプリケーション本体に使用されていない場合、インストールする権限がなかったり、権限があっても、インストールによる思わぬトラブル回避のため、インストールが難しい場合があります。 1

  • Good Old Web なアプリケーション での Lint 環境
    エンタープライズで使用している場合、ソフトウェアのインストールが難しい場合がある の言い換えかもしれないですが、何の Lint もない状況からの、はじめの Lint 。 「 Node.js 何それおいしいの? 」の状況での活用を想定しています。 2


前提

以下の環境で、SonarQube は構築しています。

  • OS

    % sw_vers
    ProductName:    Mac OS X
    ProductVersion: 10.13.4
    BuildVersion:   17E199
    

  • SonarQube の version

    7.1
    

  • Lint 対象のリソース
    Lint 対象のリソースは以下のリソースになります。

    • ECMAScript 2015 で書かれていない JavaScript、ECMAScript 2015 で書かれた Javascript
    • css、scss、less
    • HTML

Lint Plugin を SonarQube にインストールする

FrontEnd Lint 目的で以下の Plugin をインストールします。

  • SonarWeb
    HTML, JSP, JSF 向けの Lint plugin です。
    これは、MarketPlace からインストールが可能です。
    "MarketPlace"

  • SonarJS
    SonarWeb と同様で、MarketPlace からインストールが可能です。
    私の Local 環境ではインストール済でした。
    デフォルトでインストール済なのかもしれません。1

  • sonar-css-plugin
    元々は、SonarQubeCommunity/sonar-css という名称の plugin でしたが、別のリポジトリに移動されています。racodond/sonar-css-plugin: SonarQube CSS / SCSS / Less Analyzer
    MarketPlace では配られていないため、Github Repository の、最新版の jar ファイルを、plugin ディレクトリにインストールします。

  • 2018/05/26 現在の最新 Version
    sonar-css-plugin-4.18.jar

  • インストール先
    SonarQube の pugin ディレクトリにインストールします。

    cp ~/Downloads/sonar-css-plugin-4.18.jar /usr/local/Cellar/sonarqube/7.1/libexec/extensions/plugins
    


Client の設定

sonar-scaner 側の設定を行います。
解析対象のプロジェクトは、自分で作成した、Mezzanine のテーマ kemsakurai/mezzanine-theme-clean-blog にしました。
まず、JQuery 等の セキュリティ警告に対処すべきような気はしますが、一旦忘れます。

sonar-scaner 自体のインストールはここでは記載しません。
過去に Python 向けで、sonar-scanner の設定をしましたので、参考までにリンクを貼り付けます。
SonarQube SonarPython を 使って Python の静的解析をしてみる | Monotalk

設定ファイル

  • sonar-project.properties
    解析対象のプロジェクト直下に、sonar-project.properties を作成します。

    sonar.projectKey=mezzanine-theme-clean-blog
    sonar.projectName=mezzanine-theme-clean-blog
    sonar.projectVersion=0.0.1
    
    sonar.sources=clean_blog,clean_blog_frontend
    sonar.sourceEncoding=UTF-8
    sonar.exclusions=**/node_modules/**,**/webpack_bundles/**
    sonar.login=admin
    sonar.password=admin
    
    sonar.javascript.jQueryObjectAliases=$,jQuery
    sonar.javascript.exclusions=**/node_modules/**,**/webpack_bundles/**,**/bootstrap.js,**/jquery.js
    

  • 設定内容の説明
    デフォルトの設定可能なプロパティに、SonarJS の 拡張プロパティのみ追加したので、その説明をします。

    • sonar.javascript.jQueryObjectAliases
      jQuery の参照の alias を設定可能です。

    • sonar.javascript.exclusions
      解析対象外とする ディレクトリ、ファイル名を設定します。
      node_modules と、webpack のコンパイル後のjsの配布先、ライブラリ系のjs を解析対象外としました。

sonar-scanner の実行方法

プロジェクト直下に移動して、以下コマンドで、実行可能です。

sonar-scanner -D sonar-project.properties


Lint Rule について

SonarQube デフォルトルールは、一部のルールのみ適用されるようになっています。
デフォルトルールをコピーして、全てのルールチェックが行われるようにしてから、個別にルールをOFFにする形で、My ルールは作ろうかと思います。


参考

以下、閲覧した記事のリンクになります。


まとめ

SonarQube を使って、Java インストールのみで、完結する FrontEnd Lint 環境 を構築しました。
Java only で実施可能、SonarQube で可視化もできるのはメリットですが、開発者各自の行なっている Lint ツールと、CI での Lint ツールを揃えるのがやはり理想に思います。

以上です。


  1. 元々 Budle されていました。 

  2. 世の中にはまだそういうものが必要な環境がまだどこかにある? のかもしれません。 

コメント