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

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More

タグ

Flutter (103)初心者向け (26)イベント (17)Google Apps Script (14)Nextjs (11)可茂IT塾 (8)Firebase (7)riverpod (6)React (6)ChatGPT (5)新卒 (4)就活 (4)デザイン (4)Dart (4)JavaScript (4)FlutterWeb (3)vscode (3)Prisma (3)NestJS (3)Figma (3)Slack (3)TypeScript (3)ワーケーション (3)インターン (3)お知らせ (3)設計 (2)線型計画法 (2)事例 (2)Image (2)File (2)画像 (2)iOS (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)社会人 (2)大学生 (2)RSS (1)CodeRunner (1)個人開発 (1)Android (1)Unity (1)WebView (1)Twitter (1)フルリモート (1)TextScaler (1)textScaleFactor (1)学生向け (1)supabase (1)Java (1)Spring Boot (1)shell script (1)正規表現 (1)パワーポイント (1)趣味 (1)モンスターボール (1)CSS (1)SCSS (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)iPad (1)シェアハウス (1)スクレイピング (1)PageView (1)画面遷移 (1)flutter_hooks (1)Gmail (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)GCPコンソール (1)Google_ML_Kit (1)Vercel (1)Google Domains (1)Git (1)オンラインオフィス (1)LINE (1)Bitcoin (1)bitFlyer (1)コミュニティー (1)文系エンジニア (1)Freezed (1)markdown (1)GlobalKey (1)ValueKey (1)Key (1)アイコン (1)go_router (1)debug (1)datetime_picker (1)Apple Store Connect (1)FlutterGen (1)デバッグ (1)Widget Inspector (1)検索機能 (1)Shader (1)Navigator (1)メール送信 (1)Dio (1)CustomClipper (1)ClipPath (1)Material Design (1)カスタム認証 (1)アニメーション (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)mac (1)csv (1)Dialog (1)BI (1)LifeHack (1)ショートカット (1)Chrome (1)高校生 (1)キャリア教育 (1)非同期処理 (1)生体認証 (1)BackdropFilter (1)レビュー (1)getAuth (1)Algolia (1)コンサルティング (1)Symbol (1)

お知らせ

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報

カリキュラムなし!学びたいことだけをプロと学べる『TechCampus』の詳細情報!興味のある人はぜひコミュニティに参加ください!

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

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

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

Read More