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

image

最近は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を触る際はぜひ参考にしてください!

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

お知らせ

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日開催のアプリ開発講座の参加者募集中!!

8月6日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More