このブログは Hugo という静的ジェネレータを使用していて、ブログテーマは拙作の harbor を使用している。

ありがたいことにそこそこスターを頂いていて、ポツポツと contribute してくれる人もいるので、継続してメンテや改善に取り組んでいきたいと思っているが、品質管理に SonarCloud というサービスを使うだけで、 linter や formatter の整備ができていなかった。ブログテーマで主に CSS や JavaScript を使用しているので、 ESLint や Prettier を導入してみた。

導入の手引きや細かいルールなどは公式ドキュメントを参照すればよい。ここでは harbor への導入履歴のようなかたちで記す。

ESLint

ESLint とは JavaScript の静的検証ツール。単純な構文チェックやコードスタイルの統一に使用できる。またユーザーが多くの検証ルールを追加することができるので、自分のプロジェクト独自のルールを設けることができる。

npm を利用してインストールする。

% npm install --save-dev eslint

eslintは別途作成する設定ファイルで定義された内容のルールで実行される。手入力で作成してもいいし、eslint --initというコマンドを用いると対話形式で定義内容を設定できる。

設定ファイルは.eslintrc.*という形式で作成する。eslintコマンドで作成する場合は、 JSON, YAML, JavaScript の形式から選択する。自分は JavaScript 形式で手入力で作成した。

module.exports = {
  env: {
    browser: true
  },
  extends:'eslint:recommended',
  parser: '',
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [],
  rules: {},
};

各設定項目の意味や何が設定できるのかはユーザーガイドに書かれているのでそれを参照する。軽く書くと、

Prettier

Prettier はソースコードを整形してくれるフォーマッター。 JavaScript だけでなく色々なファイル形式をサポートしている。業務では普段 Go を書いているので、言語がフォーマットをサポートしていることが当たり前だという感覚があったが、デフォルトでフォーマットをサポートしていない言語で OSS を作ってみるとそのありがたさが分かる。 harbor に時々もらう PR でコードスタイルが変だったり、そもそも結構バラバラであることに気づいた。

ESLint でもコードスタイルのチェックや整形は可能だが、「ちゃんとフォーマットしようと思うと設定項目が膨大になる」「eslint --fixを実行してルール違反を摘出する際、設定によってはコードが完全にフォーマットされない場合がある」など、微妙な点がある。 Prettier ではデフォルトの整形ルールが存在するため、よほどのこだわりがなければユーザーが多くの項目を設定する必要がないし、確実にソースコード全体を整形してくれる。

そこで、 format は prettier で、 lint は eslint で実行する、というように併用するのが便利(デファクトスタンダードっぽい)。

npm を利用してインストール。

% npm install --save-dev prettier

個別に設定したい項目がある場合は、.prettierrc.*の形式で設定ファイルを作成する。

module.exports = {
  "trailingComma": "es5",
  "semi": false,
  "singleQuote": true
};

「よほどのこだわりがなければデフォルトで問題ない」が、設定ファイルも使ってみたかったので、ここでは軽く作成してみた。設定できるオプションは公式ページを参照する。

go template も整形したい

Prettier 導入を検討し始めたのは、 HTML のタグ内を修正する PR をもらったとき、