プログラミングを始めるなら、まずはエディタの準備から。この記事では、Microsoftが提供する無料のコードエディタ「Visual Studio Code(VS Code)」のインストール方法を、OS別にわかりやすく解説します。
VS Codeは無料なのに高機能で、プログラミング初心者にもおすすめのエディタです!この記事を見ながら一緒にセットアップしていきましょう!
VS Codeとは?
Visual Studio Code(通称 VS Code)は、Microsoftが開発した無料・オープンソースのコードエディタです。
主な特徴は以下の通りです。
- 軽量で高速に動作する
- 拡張機能が豊富で、さまざまな言語やフレームワークに対応
- Git連携が標準搭載
- ターミナルを内蔵しており、エディタ上でコマンド実行が可能
- Windows / Mac / Linuxのクロスプラットフォーム対応
インストール前の準備
動作環境
| OS | バージョン |
|---|---|
| Windows | Windows 10 / 11(64bit推奨) |
| macOS | macOS 10.15 Catalina 以降 |
| Linux | Ubuntu 20.04以降、Fedora、Debianなど |
ストレージは約500MB程度の空き容量があれば十分です。
Windowsでのインストール手順
1. 公式サイトからインストーラーをダウンロード
- ブラウザで VS Code公式サイト(https://code.visualstudio.com) にアクセスします
- トップページの「Download for Windows」ボタンをクリックします
.exeファイルのダウンロードが自動的に開始されます
2. インストーラーを実行
- ダウンロードした
VSCodeUserSetup-x64-x.xx.x.exeをダブルクリックして起動します - 「使用許諾契約書」が表示されるので、内容を確認し「同意する」を選択して「次へ」をクリック
3. インストールオプションの設定
以下のオプションにチェックを入れることをおすすめします。
- [x] デスクトップ上にアイコンを作成する
- [x] PATHへの追加(再起動後に使用可能)
- [x] サポートされているファイルの種類のエディターとして、Codeを登録する
- [x] ディレクトリコンテキストメニューに「Codeで開く」アクションを追加する
特に「PATHへの追加」は、ターミナルからcodeコマンドでVS Codeを起動できるようになるため、必ずチェックを入れておきましょう。
4. インストール実行
「インストール」ボタンをクリックすると、インストールが開始されます。完了したら「完了」をクリックしてインストーラーを閉じます。
macOSでのインストール手順
方法1: 公式サイトからインストール
- VS Code公式サイト にアクセス
- 「Download for Mac」をクリック
- ダウンロードされた
.zipファイルを展開 - 展開された
Visual Studio Code.appをApplicationsフォルダにドラッグ&ドロップ
方法2: Homebrewを使ったインストール
ターミナルで以下のコマンドを実行します。
brew install --cask visual-studio-code
codeコマンドの有効化(macOSのみ)
macOSでは、ターミナルからcodeコマンドを使うために追加設定が必要です。
- VS Codeを起動
Cmd + Shift + Pでコマンドパレットを開く- 「Shell Command: Install ‘code’ command in PATH」を検索して実行
Linuxでのインストール手順
コマンド実行時は、常に公式のサイトのインストール方法をご確認の上、実行してください!
Ubuntu / Debian系
# パッケージの更新
sudo apt update
# 依存パッケージのインストール
sudo apt install -y software-properties-common apt-transport-https wget
# MicrosoftのGPGキーを追加
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -D -o root -g root -m 644 packages.microsoft.gpg /etc/apt/keyrings/packages.microsoft.gpg
# リポジトリを追加
echo "deb [arch=amd64 signed-by=/etc/apt/keyrings/packages.microsoft.gpg] https://packages.microsoft.com/repos/code stable main" | sudo tee /etc/apt/sources.list.d/vscode.list
# VS Codeのインストール
sudo apt update
sudo apt install -y code
Fedora / RHEL系
sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" | sudo tee /etc/yum.repos.d/vscode.repo
sudo dnf check-update
sudo dnf install code
Snapを使ったインストール
sudo snap install code --classic
インストール後にやっておきたい初期設定
1. 日本語化
VS Codeはデフォルトで英語表示です。日本語にするには以下の手順を行います。
Ctrl + Shift + X(Mac:Cmd + Shift + X)で拡張機能パネルを開く- 検索欄に「Japanese Language Pack」と入力
- 「Japanese Language Pack for Visual Studio Code」をインストール
- 右下に表示される「Restart」をクリックしてVS Codeを再起動
2. おすすめの基本設定
Ctrl + ,(Mac: Cmd + ,)で設定画面を開き、以下を調整しましょう。
| 設定項目 | おすすめ値 | 説明 |
|---|---|---|
| Auto Save | afterDelay | ファイルの自動保存を有効にする |
| Font Size | 14 | 見やすいフォントサイズ |
| Tab Size | 2 または 4 | インデント幅の設定 |
| Word Wrap | on | 長い行を折り返して表示 |
3. おすすめ拡張機能
| 拡張機能名 | 用途 |
|---|---|
| Japanese Language Pack | 日本語化 |
| Prettier | コードの自動整形 |
| ESLint | JavaScriptの構文チェック |
| GitLens | Git操作の強化 |
| Live Server | HTMLのライブプレビュー |
| Material Icon Theme | ファイルアイコンの見た目を改善 |
よくあるトラブルと対処法
Q. インストール後に起動しない
- PCを再起動してみてください
- セキュリティソフトがブロックしていないか確認してください
- 管理者権限でインストーラーを再実行してみてください
Q. codeコマンドが使えない
- Windows: インストール時に「PATHへの追加」にチェックを入れたか確認し、PCを再起動してください
- macOS: コマンドパレットから「Shell Command: Install ‘code’ command in PATH」を実行してください
Q. 拡張機能がインストールできない
- インターネット接続を確認してください
- プロキシ環境の場合は、設定で
http.proxyを指定してください
まとめ
VS Codeは、初心者からプロまで幅広く使われている定番のコードエディタです。インストール自体は数分で完了するので、ぜひこの記事を参考にセットアップしてみてください。
日本語化や拡張機能の追加まで済ませれば、すぐに快適なコーディング環境が手に入ります。
VS Codeは僕も毎日使っているエディタです!最初は機能が多くて戸惑うかもしれませんが、使っていくうちにどんどん手に馴染んできますよ。
最後までお読みいただき、ありがとうございました!
