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 からインストールが可能です。
-
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 について
-
SonarWeb
SonarSource の Rules Explorer にルールの一覧があります。
Web Static Code Analysis Rules | SonarWeb Code Analyzer -
SonarJS
SonarWeb と同様で、SonarSource の Rules Explorer にルールの一覧があります。
Javascript Static Code Analysis Rules | SonarJS Code Analyzer -
sonar-css-plugin
racodond/sonar-css-plugin: SonarQube CSS / SCSS / Less Analyzer と、stylelint ルールとの対応表が、sonar-css-plugin/stylelint-sonarqube-rule-mapping.md at master · racodond/sonar-css-plugin に記載されています。
SonarQube デフォルトルールは、一部のルールのみ適用されるようになっています。
デフォルトルールをコピーして、全てのルールチェックが行われるようにしてから、個別にルールをOFFにする形で、My ルールは作ろうかと思います。
参考
以下、閲覧した記事のリンクになります。
まとめ
SonarQube を使って、Java インストールのみで、完結する FrontEnd Lint 環境 を構築しました。
Java only で実施可能、SonarQube で可視化もできるのはメリットですが、開発者各自の行なっている Lint ツールと、CI での Lint ツールを揃えるのがやはり理想に思います。
以上です。
コメント