VSCodeでReactを使った開発をする際のおすすめフォーマッター設定

最近はReactを使った開発も増えてきました。
Reactでの開発はVSCodeを使っているので、Prettierを活用した、VSCodeでのおすすめフォーマッター設定を紹介します。
前提として、TypeScriptを使用していますのでご注意ください。

基準とするコード

『TypeScript コーディング規約』でGoogle検索すると、ある程度共通のルールはあるものの、正式なコーディング規約はなく、一部はお好みで設定するもののようです。

可茂IT塾では、Reactを使ったWeb開発をする際、ChakraUIを使用しています。また、ChakraUIはChakraUIを活用して作られたテンプレートChakraProを販売しており、こちらのChakraProもよく活用しています。
なので、『ChakraProのコードを引っ張ってきた時に差分が全く生じない』というところを基準としたフォーマッター設定にしようと思います。

フォーマッター設定の手順

Prettier

PrettierはVSCodeで最もよく使われているコードフォーマッターの一つです。まずはこちらをVSCodeにインストールします。

Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

.vscode/settings.json

.vscode/settings.jsonにフォーマッターとしてPrettierを使うための設定を記載します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

.prettierrc.json

.prettierrc.jsonにPrettierの設定を記載します。

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 100
}

• singleQuoteはTypeScript内の文字列をシングルクオートにするかどうかでtrueに設定します。
• semiはTypeScriptで末尾にセミコロンをつけるかどうかでfalseに設定します。
• printWidthはエディターの折り返しまでの文字数で100に設定します。

さいごに

これで、保存した際の自動整形がChakraProと全く同じ形になりました。
外部から引っ張ってきたソースで、保存時の自動整形で差分が発生してしまうと、実際に行った変更がわかりにくくなってしまいますが、これでそのような問題は発生しなくなりました。
また、フォーマッターの設定やコーディング規約を決めるにあたって、ChakraProのような比較的新しく、一般公開・販売されている著名な整ったコードを参考にする事は、今回のみならず別の機会でもおすすめです。
Reactを触る際はぜひ参考にしてください！