フロントエンドエンジニアの田中です。 今回、プロジェクトにコードフォーマットのプラグインである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は構文チェックとして利用していくのが良さそうです。