← Back to Home

プロが使うVS Code初期設定＆おすすめ拡張機能10選：開発効率を爆上げする最強エディタ

#VS Code#Tools#Engineering#Frontend

プログラミングを始めるにあたって、最初に選ぶべきツールが「コードエディタ」です。 現在、世界中の開発者の間で圧倒的なシェアを獲得し、事実上の業界標準（デファクトスタンダード）となっているのが、Microsoft社が無償で提供している**「Visual Studio Code（通称：VS Code）」**です。

動作が爆速である上に、数え切れないほどの有志が作成した「拡張機能（Extensions）」をインストールすることで、自分好みの最強の開発環境へと進化させることができます。

この記事では、VS Codeをインストールした直後に**「絶対にやっておくべき初期設定」と、私が長年の開発経験から厳選した「フロントエンド開発向けの神・拡張機能10選」**をご紹介します。

1. インストール直後にやるべき神・初期設定 3選

VS Codeはそのままでも十分に使いやすいですが、以下の3つの設定を行うだけで、タイピングのストレスや保存忘れによるミスが魔法のように消え去ります。

設定画面は、VS Codeを開いた状態で Ctrl + , (Windows) または Cmd + , (Mac) を押すことで開けます。

① 自動保存（Auto Save）をオンにする

「せっかく書いたコードを保存し忘れて、ブラウザを確認しても変化がない…」というあるあるミスを撲滅します。

  • 検索窓に auto save と入力
  • Files: Auto Save の項目を onFocusChange（ウィンドウからフォーカスが外れた瞬間に保存）または afterDelay（数ミリ秒後に自動保存）に変更します。

② フォントと文字サイズを見やすくする

1日何時間も眺める文字であるため、視認性の高いフォントに変更することは重要です。

  • 検索窓に font family と入力
  • デフォルトのフォントも良いですが、プログラミング用フォントである Fira Code や JetBrains Mono（どちらも無料）をPCにインストールし、ここに設定するのがおすすめです。さらに editor.fontLigatures を true にすると、=> や === などの記号が美しく合体して表示されるようになります（リガチャ機能）。

③ 空白文字（スペースやタブ）を可視化する

コードの中に全角スペースが混ざっていたり、タブとスペースが混在していると、予期せぬエラーの原因になります。

  • 検索窓に render whitespace と入力
  • Editor: Render Whitespace を all に変更します。これで、半角スペースが薄い「・」として表示されるようになり、全角スペースとの見分けが一瞬でつくようになります。

2. 開発効率を爆上げする！おすすめ拡張機能 10選

VS Codeの真骨頂は拡張機能にあります。左のサイドバーにある四角いアイコン（Extensions）をクリックし、検索窓からインストールしてください。

【必須級】全員に入れるべき拡張機能

  1. Japanese Language Pack for Visual Studio Code VS Codeのメニューや設定画面を全て日本語化してくれます。英語に抵抗がない方以外は、真っ先に入れておきましょう。

  2. Prettier - Code formatter 「コードの整形ツール」のド定番です。ファイル保存時（Auto Save）に、グチャグチャになったスペースや改行を、一瞬で「美しく整ったコード」に自動修正してくれます。チーム開発ではこれがないと戦争が起きます。

  3. Error Lens 通常、コードにエラーがある場合は文字の下に小さな赤い波線が引かれるだけですが、この拡張機能を入れると、エラーメッセージが行の右側にデカデカとハイライトされて表示されます。エラーにいち早く気づける、超おすすめの拡張機能です。

  4. GitLens — Git supercharged VS Code内蔵のGit機能を極限まで強化します。コードの各行の右側に薄い文字で「その行を・いつ・誰が・どのコミットで書いたか（変更したか）」を表示してくれます（通称：犯人探しのツール）。チーム開発において必須です。

【フロントエンド特化】HTML/CSS/JS/React用

  1. ESLint JavaScriptやTypeScriptの構文チェックツール（リンター）です。潜在的なバグや、チームのコーディング規約に違反しているコードを赤線で教えてくれます。Prettierとセットで使うのが現代フロントエンドの常識です。

  2. Auto Rename Tag HTMLやJSX（React）のタグ名を変更する際、開始タグ（例：<div>）を（例：<span>）に書き換えると、自動的に閉じタグ（</span>）も同時に書き換わってくれる神ツールです。手間が半分になります。

  3. Tailwind CSS IntelliSense モダンなCSSフレームワーク「Tailwind CSS」を使用するなら必須です。class="..." の中でクラス名を入力し始めると、強力な自動補完とともに、そのクラスが実際にどんなCSSプロパティを持っているかのプレビューを表示してくれます。

【快適さUP】視覚的な補助ツール

  1. Material Icon Theme エディタの左側（エクスプローラー）に表示されるファイルやフォルダの横に、言語や役割に応じた色鮮やかで分かりやすいアイコンをつけてくれます。（例：Reactなら青い原子ロゴ、package.jsonならNPMロゴなど）。ファイル探しが格段に早くなります。

  2. Color Highlight CSSやTailwindなどで #FF5733 や rgb(255, 0, 0) のようなカラーコードを見つけると、その文字の背景色を実際の「その色」でハイライト表示してくれます。

  3. Code Spell Checker プログラミングにおける敵は「タイポ（スペルミス）」です。変数名や関数名の英語の綴りが間違っていると、青い波線で警告してくれます。恥ずかしいスペルミスを未然に防ぎましょう。

まとめ：エディタは「エンジニアの包丁」

板前さんが自分の包丁を毎日研いで大切に手入れするように、エンジニアにとってのVS Codeは、まさに「仕事道具の要」です。 初期設定と拡張機能の選定を適当に済ませるか、それとも自分に合った完璧な環境を作り上げるかで、その後の作業スピードやストレスの無さは雲泥の差となります。

今回ご紹介した設定と拡張機能を取り入れて、快適で爆速なコーディング体験を手に入れてください！