ホーム / 環境構築ガイド / VSCode
💻 SETUP GUIDE

VSCodeを
インストールしよう

世界中のエンジニアに愛用される高機能エディタ。
Windows・Mac 両対応のインストール手順からおすすめ設定まで解説します。

📋 このページの内容

  1. VSCode とは？
  2. ダウンロード・インストール
  3. 基本的な使い方
  4. おすすめ拡張機能
1

VSCode とは？

Visual Studio Code（VSCode）は、Microsoft が開発した無料のコードエディタです。2015 年のリリース以来、世界中の開発者に最も使われるエディタとなっています。

メモ帳でもコードは書けますが、VSCode を使うと次のような恩恵が得られます：

💡 無料で使えます

VSCode は完全無料です。商用利用も可能で、企業での業務にも広く使われています。

2

ダウンロード・インストール

Windows 版のインストール手順

  1. 公式サイト https://code.visualstudio.com/ にアクセスします。
  2. 大きな青い「Download for Windows」ボタンをクリックしてインストーラーをダウンロードします。
  3. ダウンロードされた VSCodeSetup-x64-x.x.x.exe をダブルクリックして実行します。
  4. インストールウィザードが起動します。「同意する」 を選択して「次へ」を押し続けます。
  5. 「追加タスクの選択」の画面では以下の2つにチェックを入れると便利です：
    • 「エクスプローラーのファイル コンテキスト メニューに [Code で開く] アクションを追加する」
    • 「エクスプローラーのディレクトリ コンテキスト メニューに [Code で開く] アクションを追加する」
  6. 「インストール」をクリックして完了を待ちます。
  7. 「完了」をクリックすると VSCode が起動します。
💡 PATH の自動追加

インストーラーは自動的に code コマンドを PATH に追加します。インストール後にターミナルで code . と打つと、現在のフォルダを VSCode で開けます。

Mac 版のインストール手順

  1. 公式サイト https://code.visualstudio.com/ にアクセスします。
  2. 「Download for Mac」ボタンをクリックして .zip ファイルをダウンロードします。
    （Apple Silicon（M1/M2/M3）の場合は「Apple Silicon」版を選ぶと高速です）
  3. ダウンロードした .zip ファイルをダブルクリックして解凍します。
  4. 解凍された Visual Studio Code.app を アプリケーションフォルダにドラッグ＆ドロップします。
  5. Launchpad または Finder のアプリケーションから VSCode を起動します。

ターミナルから code コマンドを使えるようにする

VSCode を起動した状態で、コマンドパレット（Cmd + Shift + P）を開き、次のコマンドを実行します：

Shell Command: Install 'code' command in PATH

これで、ターミナルで code . と打つと現在のフォルダを VSCode で開けるようになります。

3

基本的な使い方

ファイル・フォルダを開く

統合ターミナルを開く

VSCode 内にターミナルを内蔵しています。コードを書きながらすぐにコマンドを実行できます。

# ターミナルでPythonを実行する例
python hello.py

# Node.jsを実行する例
node index.js

よく使うショートカット

操作 Windows Mac
ファイルを保存Ctrl+SCmd+S
コマンドパレットCtrl+Shift+PCmd+Shift+P
ファイル検索Ctrl+PCmd+P
ファイル内検索Ctrl+FCmd+F
コメントのトグルCtrl+/Cmd+/
統合ターミナルCtrl+`Ctrl+`
行の複製Alt+Shift+↓Opt+Shift+↓

日本語化する

  1. コマンドパレット（Ctrl/Cmd+Shift+P）を開き、「Configure Display Language」を検索
  2. 「日本語」を選択して VSCode を再起動

または拡張機能から「Japanese Language Pack for Visual Studio Code」をインストールします。

4

おすすめ拡張機能

拡張機能（Extensions）は VSCode の機能を追加するプラグインです。左サイドバーの拡張機能アイコン（四角が4つ並んだアイコン）から検索してインストールできます。

Japanese Language Pack

VSCode のメニューや設定を日本語表示にします。インターフェースに慣れるまで入れておくと便利です。

全言語

Python

Python の実行・デバッグ・補完・Linting（コードチェック）を強化。Python を書くなら必須の公式拡張機能です。

Python

ESLint

JavaScript/TypeScript のコードエラーをリアルタイムで検知します。バグを書く前に気づけます。

JS/TS

Prettier

コードを自動で整形・インデント統一します。保存時に自動フォーマットする設定と組み合わせると快適です。

全言語

GitLens

Git の変更履歴・コミット情報をエディタ内で確認できます。誰がいつ書いたコードか一目でわかります。

Git

Live Server

HTML ファイルを編集すると、ブラウザが自動リロードします。Web 制作の効率が大幅に上がります。

HTML/CSS

indent-rainbow

インデントを虹色で視覚化。Python のように indentation が重要な言語でミスを減らせます。

Python

Auto Rename Tag

HTML/JSX の開きタグを変更すると、対応する閉じタグも自動変更。HTML 編集が格段に楽になります。

HTML
📌 拡張機能のインストール方法

左サイドバーの拡張機能アイコンをクリック → 検索ボックスに名前を入力 → 「インストール」ボタンをクリック。インストール後すぐに有効になります。

🎉 VSCode のセットアップ完了！

次は、Python や Git もインストールしてみましょう。
もしくは、コードクエストのコースでプログラミングを学び始めることもできます。

🐍 Python をインストール 🔀 Git をインストール 🖥 ターミナルの基本を学ぶ