JavaScript React

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

 

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

 

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にすれば完了です。

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

-JavaScript, React

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.