ReactでPrettierを導入してVSCodeでファイル保存したら勝手に整形されるようにする、そしてESLintのコード整形は停止する

VSCodeでReactを書いてたのですが、コードの自動整形を導入してみたいと思います。

コードの整形にはPrettierとESLintがあるのですが、ESLintはコードの整形にはあまり高性能ではないらしいので、

ESLintは構文チェックだけにして、ESLintのコード整形は無効化しつつ（Prettierのコード整形と競合しないため）

Prettierでコード整形をしていきます、Prettierのメリットは、複雑な設定ファイルを書かなくても、高性能なコード整形がデフォルトで実現可能なところらしいです。

ちなみにESLintは複雑なコード整形の規約を作ると設定ファイルが長くなって、それもデメリットの一つだということでした。

では、早速やっていきましょう。

PrettierをReactプロジェクトに導入する

まずはyarnを使ってReactプロジェクトにPrettierを導入していきます。


yarn add --dev --exact prettier


yarn add eslint-config-prettier

これでokです。

ちなみに今回の記事では、私はReactはcreate-react-appを使っているので、デフォルトでESLintは入ってるので、ESLintの導入は省きます。

次に、設定ファイルを作ってコードの設定を書いていきます。

プロジェクトのルートに下記の二つのファイルを作ってください。

 .eslintrc

.prettierrc

その後、.eslintrcの内容は以下の通り書いてください、この記述で、ESLint のフォーマット関連のルールが全て無効になります。



{
"root": true,
"env": {
"browser": true,
"es6": true
},
"extends": ["eslint:recommended", "prettier"]
}

Prettier は、下記のゆに設定を記述することで、Prettier のデフォルトの設定を上書きできます。


{
"singleQuote": true
}

では、試しにコード整形をコマンドから実行してやってみましょう。

prettier app.js --write

これでコードが整形されるはずです。

では最後に、このコード整形を、VSCodeのファイル保存で自動で発火するようにしましょう。

まずPrettierがインストールされてるのを確認して、

設定画面に移動してください。

saveと入力して、ファイルがsaveされた時に自動保存する設定にします。

それで最後に、defaultformatterと入力して、フォーマットをPrettierにすれば完了です。