LCL Engineers' Blog

バス比較なび・格安移動・バスとりっぷを運営する LCLの開発者ブログ

ESLintを使用しているプロジェクトにPrettierを導入しました

フロントエンドエンジニアの田中です。 今回、プロジェクトにコードフォーマットのプラグインであるPrettierを導入しました。 元々、ESLintを使用してコードの品質担保をしていたのでPrettierとの競合が起きないよう設定も行いました。

Prettierとは

Prettier はソースコードを整形してくれるコードフォーマットのプラグインで、以下のような特徴があります。

  • 多くの言語に対応(ES6, JSX, TypeScript, CSS, SCSS …etc)
  • ルールの設定が可能
  • ESLintとの連携が可能

導入の目的

下記に示している導入前の状況と課題を解決するべく、Prettierを導入して共通のコード整形の自動化、共有することが目的です。

状況

  • コードフォーマットをAtomエディタのプラグイン(Atom beautify)で行っている

課題

  • バックエンドエンジニアがAtomを立ち上げるのが面倒(各自、普段使用しているエディタが違う)
  • 個々の環境を同じにするのが面倒

導入

必要なプラグインをインストールします。

プラグイン 説明
prettier コード整形ツール
onchange ファイルに変更があった時に処理を実行する
eslint-config-prettier ESLintとPrettierの重複するルールを無効化する
(Prettierが整形した箇所に関してエラーを出さなくする)
eslint-plugin-prettier PrettierのルールをESLintに読み込む
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier onchange

package.jsonのscriptsに実行コマンドを追記します。 (今回はPrettierを npm scripts で動かします)

package.json

  "scripts": {
    "start": "onchange './src/scripts/**/*.{js,jsx}' -- prettier --write --single-quote --trailing-comma es5 {{changed}}",
    "prettier": "prettier --write --single-quote --trailing-comma es5 './src/scripts/**/*.{js,jsx}’,
  },
  • npm run prettier:Prettier単体での処理を実行
  • npm start:ファイル保存時にPrettier処理を実行

ここまででPrettierの導入は完了です。 しかし、このままでは元々導入していたESLintとルールが違い競合を起こしてしまいましたので、 Prettierで整形したコードについてエラーを吐かないように設定しました。

.eslintrc

{
  "extends": [
    "prettier",
    "prettier/react",
  ],
  "env": {
    "es6": true,
  },
  "plugins": [
    "react",
    "prettier",
  ],
  "parserOptions": {
    "sourceType": "module"
  },
}

上記で設定完了です。

効果

導入したばかりですが、開発者のエディタによって差異があることや、各自のエディタ設定を合わせる必要がなくなり、「導入の目的」で挙げていた課題について解決することができました。

まとめ

最初にお伝えしたようにPrettierでは様々な言語に対応していますが、今回は導入の第一歩として、JS, JSXファイルの設定をしていきました。今後CSS(SCSS)も導入予定です。 ESLintのコードルールをそのままとはいきませんでしたが(PrettierよりもESLintの方が細かい設定できるため)、Prettierはコード整形、ESLintは構文チェックとして利用していくのが良さそうです。

参考