発行:

環境構築（VSCode）

プログラミングを快適に行うための最強のエディタ Visual Studio Code (VSCode) の準備をしましょう。
React や Next.js といったモダンなWeb開発での事実上の標準エディタとなっています。

VSCode のインストール

まだ持っていない方は、公式サイトからダウンロードしてインストールしてください。

Windows, macOS, Linux すべてに対応しています。インストール手順は標準的なインストーラーに従うだけですので、ここでは割愛します。

おすすめ拡張機能

React/Next.js 開発を劇的に快適にするための拡張機能を3つ紹介します。
VSCode 左側のブロックパズルアイコン（Extensions）から検索してインストールしてください。

1. Japanese Language Pack (日本語化)

VSCode のメニューなどを日本語にします。英語のままで良い方は不要です。
インストール後、再起動を求められます。

2. Prettier - Code formatter (コード整形)

コードを保存するたびに、きれいに整形してくれるツールです。
インデントのズレや、セミコロンの有無などを自動で統一してくれます。 設定手順: 1. 拡張機能をインストール。2. VSCode の設定 (Cmd + , or Ctrl + ,) を開く。3. "Default Formatter" で "Prettier - Code formatter" を選択。4. "Format On Save" にチェックを入れる。

これで、Ctrl + S (保存) を押すたびにコードがピカピカになります。

3. Tailwind CSS IntelliSense (Tailwind 補完)

多くのReact/Next.jsプロジェクトで採用されている Tailwind CSS のクラス名を補完してくれます。
text-red と打てば、text-red-500 などの候補が出てくるようになります。
また、クラス名にカーソルを合わせると、実際の色や CSS が確認できて便利です。

Tailwind CSS の自動並び替え設定

Tailwind のクラス名は長くなりがちで、書く人によって順番がバラバラになりがちです。
Prettier と連携して、保存時に クラス名を推奨順に自動ソート するようにしましょう。

1. プラグインのインストール

プロジェクトのターミナルで以下のコマンドを実行します。

Terminal
npm install -D prettier prettier-plugin-tailwindcss

2. 設定ファイルの作成

プロジェクトのルート（package.json がある場所）に .prettierrc というファイルを作成し、以下を記述します。

.prettierrc
{
  "plugins": ["prettier-plugin-tailwindcss"]
}

これで準備完了です！
適当に className="p-4 flex bg-red-500" と書いて保存してみてください。
自動的に className="flex bg-red-500 p-4" のように標準的な順番に並び替えられるはずです。

まとめ

  • VSCode をインストールする。
  • 拡張機能（日本語化、Prettier、Tailwind IntelliSense）を入れる。
  • Tailwind の自動ソート設定を入れる。

これだけで、開発効率が何倍も変わります。ぜひ設定しておきましょう！