【VSCode入門】Visual Studio Codeとは？インストールから基本設定まで徹底解説

「これからWeb制作やプログラミングを始めたいけど、どのエディタを使えばいいの？」

こんにちは！ほんの数ヶ月前まで、皆さんと同じようにプログラミング知識ゼロだった筆者です。そんな私が、今ではAIの力を借りながらbuyonjapan.comやcopicode.comといったWebサイトを独力で立ち上げることができました。

その最大の功労者と言っても過言ではないのが、今回ご紹介するエディタ「Visual Studio Code」（以下、VSCode）です。

この記事では、私が実際に経験した「つまづきポイント」や「もっと早く知っておけば…」という後悔を元に、専門用語を極力使わず、初心者だった頃の自分に教えるつもりで、VSCodeの導入から「これだけは絶対にやっておくべき！」という初期設定までを徹底的に解説します。

この記事を最後まで読めば、あなたはただVSCodeをインストールするだけでなく、快適な開発環境を手に入れ、「自分でコードを書いて動かす」楽しさの第一歩を踏み出すことができるはずです。

Visual Studio Code (VSCode) って、いったい何者？

VSCodeは、Microsoftが開発している無料の「テキストエディタ」です。テキストエディタとは、その名の通りテキスト（文字）を書いたり編集したりするためのソフト。Windowsの「メモ帳」やMacの「テキストエディット」の超高機能版だと思ってください。

世の中にはたくさんのエディタがありますが、なぜ世界中の開発者がVSCodeを選ぶのでしょうか？私が実感したメリットは、特にこの3つです。

無料なのに超高性能: これだけの機能をすべて無料で使えるのは、正直言って驚異的です。Microsoftの本気度がうかがえます。
動作が軽い: 高機能なのに、起動や動作がサクサク軽快です。古いパソコンでもストレスなく使えるのは嬉しいポイントでした。
「拡張機能」で自分好みに改造できる: これがVSCode最大の魅力です。後ほど詳しく解説しますが、世界中の開発者が作った便利な追加機能（拡張機能）をインストールすることで、自分だけの最強の開発ツールに育て上げることができます。

「Visual Studio」という名前の似たソフトがありますが、あっちは大規模開発向けの「統合開発環境（IDE）」という別物で、少し複雑で重量級です。Web制作の第一歩としては、軽くて使いやすいVSCodeを選んでおけば間違いありません。

【実践】VSCodeをインストールしよう

それでは、さっそくVSCodeをあなたのパソコンにインストールしましょう。作業はとても簡単です。

まずは、VSCode公式サイトにアクセスしてください。

アクセスすると、あなたのOS（Windows, Mac, Linux）を自動で判別して、最適なダウンロードボタンが大きく表示されているはずです。基本的にはそのボタンをクリックしてインストーラーをダウンロードし、画面の指示に従って進めればOKです。

VSCode公式サイトのスクリーンショット。ダウンロードボタンが目立つように表示されている。

※公式サイトのデザインは変更される可能性があります。

Windows ユーザーの方へ

ダウンロードした .exe ファイルを実行します。インストールの途中でいくつかチェックボックスが出てきますが、特にこだわりがなければ、以下の項目にチェックを入れておくのがおすすめです。

「PATHへの追加」: これは必ずチェックしてください。これにチェックを入れておくと、後々コマンドプロンプトやターミナルから code というコマンドでVSCodeを起動できて非常に便利です。
「エクスプローラーのファイルコンテキストメニューに [Code で開く] アクションを追加する」
「エクスプローラーのディレクトリコンテキストメニューに [Code で開く] アクションを追加する」

最後の2つにチェックを入れると、ファイルやフォルダを右クリックしたときに「Code で開く」という選択肢が表示されるようになります。これが地味に、しかし確実に作業効率を上げてくれます。

また、最近のWindows 10/11をお使いなら、「winget」というコマンドでインストールすることも可能です。コマンドプロンプトやPowerShellを開いて、以下のコマンドを打ち込むだけです。

winget install Microsoft.VisualStudioCode

Mac ユーザーの方へ

ダウンロードした .zip ファイルを解凍すると、Visual Studio Code.app というファイルが出てきます。これを「アプリケーション」フォルダにドラッグ＆ドロップすればインストールは完了です。

Macユーザーの方にも、コマンドラインツール「Homebrew」を使ったインストールがおすすめです。ターミナルを開いて、以下のコマンドを実行するだけです。

brew install --cask visual-studio-code

Linux ユーザーの方へ

公式サイトからお使いのディストリビューションに合った .deb (Debian/Ubuntu系) や .rpm (Red Hat/Fedora/SUSE系) パッケージをダウンロードしてインストールしてください。多くのディストリビューションのソフトウェアセンターからもインストール可能です。

例えば、Ubuntuならターミナルで以下のコマンドが使えます。

sudo apt install code

【最重要】これだけはやっておきたい初期設定

無事にインストールが完了したら、いよいよ設定です。ここが一番大事なところ。私が「もっと早くやっておけば…」と後悔した設定を厳選しました。これらをやっておくだけで、あなたの開発体験は天と地ほど変わります。

ステップ1: 何はともあれ日本語化！

VSCodeは初期状態では英語です。英語のままでも使えますが、エラーメッセージや設定項目が英語だと、特に初心者のうちは読むだけで疲弊してしまいます。真っ先に日本語化して、心のハードルを下げましょう。

左側のメニューバーにある、四角が4つ並んだようなアイコン（拡張機能ビュー）をクリックします。
上部の検索ボックスに「japanese」と入力します。
一番上に出てくる「Japanese Language Pack for Visual Studio Code」の「Install」ボタンをクリックします。
インストールが完了すると右下に再起動を促すメッセージが表示されるので、「Restart」をクリックします。

これだけで、VSCodeのメニューがすべて日本語に切り替わっているはずです。簡単ですよね！

ステップ2: 設定ファイル (`settings.json`) を開く

VSCodeの詳細な設定は、settings.json という特別なファイルに書き込んでいきます。UI（画面上の設定画面）からも設定できますが、このファイルに直接書き込む方法に慣れておくと、後々設定の管理や共有がとても楽になります。

settings.json を開くには、ショートカットキーを使うのが一番早いです。

Windows: Ctrl + Shift + P
Mac: Command + Shift + P

上記のキーを押すと、「コマンドパレット」と呼ばれる入力欄が画面上部に表示されます。ここに「settings json」と入力し、「基本設定: 設定 (JSON) を開く (Preferences: Open User Settings (JSON))」を選択してください。

すると、{} で囲まれた空（もしくは何か少し書かれた）ファイルが開きます。これがあなたの settings.json です。ここに、これから紹介する設定をコピペしていきましょう。

ステップ3: 最強の初期設定をコピペしよう！

お待たseしました。私が試行錯誤の末にたどり着いた、「これさえ入れておけば間違いない」初期設定です。以下のコードを、先ほど開いた settings.json の {} の中に丸ごとコピー＆ペーストしてください。

（もし既に何か設定が書かれている場合は、最後の } の前にカンマ , を入れてから貼り付けてください。JSON形式では、各設定項目の間をカンマで区切るルールになっています。）

{
    // ----- 見た目に関する設定 -----
    "editor.fontFamily": "'UDEV Gothic NF', 'Source Han Code JP', 'Menlo', 'Monaco', 'Courier New', monospace",
    "editor.fontSize": 16,
    "editor.lineHeight": 1.8,
    "editor.wordWrap": "on",
    "workbench.colorTheme": "Default Dark+",
    "workbench.iconTheme": "material-icon-theme",

    // ----- ファイル操作に関する設定 -----
    "files.autoSave": "onFocusChange",
    "files.insertFinalNewline": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,

    // ----- エディタの動作に関する設定 -----
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "editor.cursorStyle": "line",
    "editor.cursorBlinking": "smooth",
    "editor.minimap.enabled": false,
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs": "active",
    "breadcrumbs.enabled": true,

    // ----- 拡張機能「Prettier」に関する設定 -----
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,

    // ----- ターミナルに関する設定 -----
    "terminal.integrated.fontSize": 14,
    "terminal.integrated.fontFamily": "monospace"
}

設定項目の簡単な解説

全部を一度に覚える必要はありません。「なるほど、こんなことができるのか」程度に眺めてみてください。

editor.fontFamily: おすすめのプログラミング用フォントを指定しています。フォントが見やすいと、コードの可読性が上がり、バグも見つけやすくなります。（別途フォントのインストールが必要な場合があります）
editor.fontSize: 文字の大きさです。お好みで調整してください。
editor.lineHeight: 行の高さ。少し広めに取ると、コードが読みやすくなります。
editor.wordWrap: 長い行を画面の右端で折り返します。横スクロールがなくなるので必須です。
files.autoSave: ファイルを編集して別のウィンドウにフォーカスが移ったときに自動で保存します。Ctrl+S/Cmd+Sの押し忘れを防ぎます。これは本当に便利！
files.insertFinalNewline, files.trim...: 保存時に、ファイルの最後に空行を入れたり、行末の不要なスペースを自動で削除したりします。コードを綺麗に保つための設定です。
editor.tabSize: Tabキーを押したときのスペースの数。Web開発では2が主流です。
editor.renderWhitespace: 半角スペースやタブを記号で表示します。スペースのつけすぎや、全角スペースの混入といったミスにすぐ気づけます。
editor.minimap.enabled: 右側に表示されるコード全体の地図（ミニマップ）を非表示にします。画面がスッキリします。
editor.bracketPairColorization.enabled: (), {}, [] などの対応するカッコを色付けしてくれます。入れ子構造が深くなったときに、どこからどこまでがペアなのか一目で分かります。
editor.defaultFormatter, editor.formatOnSave: これが神設定です。後述する拡張機能「Prettier」と連携し、ファイルを保存するたびに、コード全体を決められたルールで自動整形してくれます。もう、コードのインデント（字下げ）で悩む必要はありません。

【厳選】これだけは入れておきたい拡張機能

初期設定が終わったら、次は拡張機能です。VSCodeの真価はここにあります。たくさんあって迷うと思いますが、初心者のうちは、まず以下の3つだけで十分です。

先ほどの日本語化と同様に、左側の拡張機能ビューから名前を検索してインストールしてください。

Prettier - Code formatter
先ほどの設定でも出てきた「コード整形ツール」です。これを入れないと formatOnSave の設定が機能しません。HTML, CSS, JavaScriptなど、様々な言語のコードを、業界標準の美しいスタイルに一瞬で整えてくれます。「このインデントはタブ？スペース？」「;は付けるべき？」といった細かな悩みから解放され、あなたはロジックに集中できます。
Live Server
HTML/CSSのコーディングで革命が起きる拡張機能です。これを有効にすると、ファイルを保存した瞬間に、ブラウザの表示が自動でリロードされます。「コードを修正 → 保存 → ブラウザに切り替え → 更新ボタンをクリック」という面倒な作業が不要になります。開発効率が劇的に向上するので、絶対に入れてください。
Material Icon Theme
これは機能的なものではなく、見た目を良くする拡張機能です。ファイルの種類（HTML, CSS, JS, etc.）に応じて、エクスプローラーのファイル名の横に綺麗なアイコンを表示してくれます。ファイルの種類が視覚的に分かりやすくなり、目的のファイルを探すのが少し楽になります。モチベーション維持にも繋がりますよ。

※settings.jsonで"workbench.iconTheme": "material-icon-theme"と設定したので、これをインストールするだけでアイコンが自動的に適用されるはずです。

【体験】「動く」を実感してみよう！

お疲れ様でした！これであなたのVSCodeは、プロも顔負けの開発環境になりました。最後に、この新しい環境を使って「動く」を体験してみましょう。

作業フォルダを開く
まず、デスクトップなど分かりやすい場所に「vscode-test」のような名前で新しいフォルダを作成します。そして、VSCodeのメニューから「ファイル」→「フォルダーを開く...」を選択し、今作ったフォルダを開いてください。
ファイルを作成する
左側のエクスプローラービューで、フォルダ名にカーソルを合わせると表示される「新しいファイル」アイコンをクリックし、「index.html」という名前のファイルを作成します。
コードをコピペする
作成した index.html に、以下のコードをコピー＆ペーストしてください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>VSCodeテスト</title>
  <style>
    body {
      display: grid;
      place-content: center;
      min-height: 100vh;
      background-color: #282c34;
      color: #ffffff;
      font-family: sans-serif;
      text-align: center;
    }
    h1 {
      font-size: 3rem;
      color: #61dafb;
    }
  </style>
</head>
<body>

  <h1>こんにちは、VSCode！</h1>
  <p>私の開発環境へようこそ！</p>
  
</body>
</html>

Live Server を起動する
画面右下に「Go Live」というボタンがあるはずです。これをクリックしてください。

どうでしょうか？自動的にブラウザが立ち上がり、今作成したHTMLが表示されたはずです！

さらに、VSCodeに戻って h1 タグの中身を「Hello, World!」のように書き換えて、ファイルを保存（Ctrl+S / Cmd+S）してみてください。ブラウザに切り替えなくても、表示が瞬時に変わったのが分かりますか？

これが「Live Server」の力であり、あなたが手に入れた新しい開発環境の力です。

まとめ：最強の武器を手に入れたあなたへ

今回は、VSCodeのインストールから、私が心からおすすめする初期設定、そして「動く」体験までを一気に解説しました。

今日設定した内容は、これからのあなたのWeb制作・プログラミング学習の強力な土台となります。最初は覚えることが多くて大変に感じるかもしれませんが、今日紹介した設定や拡張機能は、どれも「面倒な作業」を自動化し、あなたが「考えること」「作ること」に集中できるように手助けしてくれるものばかりです。

VSCodeという最強の武器を手に入れたあなたは、もう初心者ではありません。一人の「開発者」です。この快適な環境で、たくさんのコードを書き、たくさんのものを作り出していってください！

次のステップへ

エディタの準備が整ったところで、次はVSCodeの基本的な画面操作に慣れていきましょう。ファイルやフォルダを効率的に管理する方法を知ることで、さらに開発スピードがアップします。

【VSCode使い方】基本操作ガイド：ファイル管理・エクスプローラー・タブの使い方