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

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

[TOC]

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 が使用されている箇所がある場合などは、インストールという障壁がないかもしれませんが、アプリケーション本体に使用されていない場合、インストールする権限がなかったり、権限があっても、インストールによる思わぬトラブル回避のため、インストールが難しい場合があります。 ¹

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

前提

以下の環境で、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 環境ではインストール済でした。
  デフォルトでインストール済なのかもしれません。¹

• 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 ルールは作ろうかと思います。

参考

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

• JavaScript、HTML、CSSを簡単にLintできる開発環境を作った - Qiita

• SonarSource Blog » SonarQube supports ECMAScript 6

• SonarJS - Plugins - Doc SonarQube

まとめ

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

以上です。