magazine off

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

投稿日 : 2021年6月14日(月曜日)

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の導入は省きます。

 

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

 

eslintとprettierの設定ファイルを書く

 

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

 

 .eslintrc 
.prettierrc

 

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

 



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

 

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

 


{
"singleQuote": true
}

 

prettierを使ってみる

 

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

 

prettier app.js --write

 

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

 

prettierをVScodeのファイル保存で発火させる

 

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

 

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

 

 

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

 

 

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

 

 

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

 

Categories

Recent Posts

macにyarnをインストールする方法

  $ brew install yarn $ brew link yar…

投稿日 : 2018年12月11日(火曜日)

Atomでフォントサイズの拡大縮小 | mac

 拡大   shift + cmd + {+}   縮…

投稿日 : 2020年12月17日(木曜日)

Flutterのnullエラー Null check operator used on a null value解決

  Flutter勉強中の初級レベルの備忘録です。   Flutt…

投稿日 : 2021年8月9日(月曜日)

【テレワークや自宅作業】エンジニアにおすすめデスク厳選14選

 こんにちわ!   昨今、リモートワークやテレワークなどで自宅作業を…

投稿日 : 2021年2月19日(金曜日)