ESLintと連携してフォーマットを適用する

前述の通り、Prettierはリントツールと組み合わせて使用できるため、既にESLintを使用しているプロジェクトでもコンフリクトを起こすことなく使用できます。

ESLintと組み合わせて使用するには、prettier-eslintprettier-eslint-cliが必要になります。今回はESLintの一例として、Google JavaScript Style Guideに準拠したリントチェックを行ってみましょう。eslint-config-googleを使います。

コマンドラインより次のコマンドを実行しインストールを行います。

npm i -D prettier-eslint prettier-eslint-cli eslint-config-google

次に、ESLintの設定ファイルを作成します。プロジェクトフォルダーのルートに、次の内容で.eslintrc.jsonというファイルを作成してください。Google JavaScript Style Guideに準拠したECMAScript 2017の仕様でリントチェックを行うように定義しています。

▼.eslintrc.jsonファイル

{
  "extends": ["google"],
  "parserOptions": {
    "ecmaVersion": 2017
  }
}

package.jsonファイルに定義したscriptsを、次の通りprettier-eslintを使用したコマンドに変更します。このコマンドにより、Prettierで整形したコードをESLint(eslint --fix)に受け渡すことが出来るため、PrettierとESLintの両方の処理を適用できます。

▼package.jsonファイル

{
  "scripts": {
    "format": "prettier-eslint --write 'src/**/*.js'"
  },
  "devDependencies": {
    "prettier-eslint": "^8.7.5",
    "prettier-eslint-cli": "^4.7.0"
  }
}

以上で準備は完了です。コマンドラインから次のコマンドを実行してみましょう。Prettierで整形したコードがESLintに渡され、ESLint側の整形も適用されることが確認できます。

npm run format

ここまでの手順をサンプルファイルとしてGitHubに公開していますので、参考ください。

▲サンプルの実行例。ぐちゃぐちゃのJSをコード規約「Google JavaScript Style Guide」にあわせ整形している。

おわりに

整形したコードが好みでない、コードフォーマッターのカスタマイズに時間をかけたくない、自分でコードを整形しているから必要ないといった意見も考えられます。しかし、コード整形ツールを使うとルールに基づいて自動的に整形されるため、人が見落としがちなところも漏れなく整形できる利点があります。

PrettierはNode.jsで動作するため、エディターに依存せず容易に導入できます。また、公式ドキュメントにも記載されている通り、Gitへのコミット前に自動的に処理を走らせることも出来るため、現行の開発フローへの影響もなく導入可能です。是非この機会にお試しください。

※本記事は2018年1月17日現在最新のPrettier 1.10.2で検証しています