Visual Studio Code (VS Code) インストール・日本語化の方法！

このページでは、無料で使える人気のコードエディタ「Visual Studio Code (VS Code)」のインストール方法を解説しています。

あわせて、日本語化の手順や基本的な設定方法についてもご紹介していますのでよければ参考にしてみてください。

ノーノちゃん

Visual Studio Code (VS Code)はプログラミング初心者でも使えるの？

初心者の方にもおすすめです。入力補完などのサポート機能があるのでかんたんにコードを書くことができて便利ですよ！

ぶたさん

このページの目次

1. Visual Studio Codeとは？

まずはじめにVisual Studio Code (VS Code) についてかんたんにご紹介します。

基本情報

Visual Studio Code (VS Code) の基本情報です。

ソフト名	Visual Studio Code（VS Code） (ビジュアル・スタジオ・コード)
開発元	マイクロソフト
リリース日	2015年11月18日
料金	無料 (一部拡張機能有料)
主な機能	・入力補完機能・エラーヒント機能・デバッグ機能・拡張機能（プラグイン）・Git連携・シンタックスハイライト（構文色分け）・その他
プログラミング言語	HTML / CSS / JavaScript / JSON / Python / Ruby / Rust / SQL /C# / C++ / Java / PHP / Markdown / Powershell / YAM など
対応言語	・英語・日本語・その他
対応OS	・Windows10以降・macOS 10.15以降・Linux
公式サイト	code.visualstudio.com

　
Visual Studio Code (VS Code) は、マイクロソフトが提供している無料で使える高機能コードエディタです。

「コードエディタ」とは、かんたんに言うとプログラミングのコードを書いたり、編集したりするための専用ソフトウェアのことです。

このソフトはコードを見やすくする機能や、タグや命令文の入力を自動で補完してくれる機能など、作業を効率化する機能がたくさん備わっています。

ノーノちゃん

Visual Studio Code（VS Code）は低スペックPCでも動かせるの？

低スペックPCでも問題ありません。ただし拡張機能を入れすぎると重くなりますので注意しましょう。

ぶたさん

主な機能

Visual Studio Code (VS Code) の主な機能について

シンタックスハイライト（構文色分け）

通常のメモ帳で表示

console.log("Hello World");

シンタックスハイライトで表示

コピー拡大

console.log("Hello World");

「シンタックスハイライト」とは、上記のようにプログラムのコードを自動で色分けして表示する機能のことです。

通常のメモ帳では、すべての文字が黒一色で表示されるため、コードの構造が分かりづらく、入力ミスにも気づきにくくなります。

一方、シンタックスハイライトで表示した場合、役割ごとに自動的に色分けされるため、ひと目で把握することができるメリットがあります。

入力補完機能

「入力補完機能」とは、コードを途中まで入力すると自動的に候補を表示して補完してくれる機能のことです。

たとえば、HTMLの場合「h」と入力するだけで、「h1」「h2」などタグ候補が表示され、その中から選択するだけでタグが挿入されます。

このように、すべてのコードを手入力する必要がなくなり、スペルミスや構文ミスを防ぎやすくなるメリットがあります。

ノーノちゃん

予測変換みたいな機能ってこと？

そうですね。この機能を上手く活用すると、驚くほど作業効率がアップしますのでどんどん使いましょう。

ぶたさん

デバッグ機能

「デバッグ」とは、プログラムの動作を確認し、エラーや問題を見つけて修正するための作業のことです。

Visual Studio Code（VS Code）には「デバックコンソール」という便利な機能が備わっています。

この機能を使えば、プログラムの実行状況をリアルタイムで監視したり、エラーが発生した箇所をかんたんに特定することができます。

拡張機能が豊富

拡張機能とは、Visual Studio Code（VS Code）に新しい機能を追加できる小さなプログラムのことです。

たとえば、次のような便利な機能を追加することができます。

追加できる拡張機能

コードを自動で整えてくれる
コードの入力を補助してくれる
HTMLのプレビューをリアルタイム表示
エラー箇所を教えてくれる
特定のプログラミング言語を使えるようにする

このように自分のやりたいことに合わせて拡張機能を追加していくことができます。

拡張機能は便利ですが、入れすぎると動作が重くなるデメリットがありますので注意しましょう。

ぶたさん

2. インストール方法

ここでは、Visual Studio Code (VS Code) をダウンロード・インストールする方法を解説しています。

ダウンロード

公式サイトを開く

下記のリンクをクリックしてVisual Studio Code (VS Code) 公式サイトを開きます。

code.visualstudio.com

ダウンロードボタンを押す

「Download for Windows」ボタンをクリックします。

保存する

保存先フォルダを選択し、保存をクリックします。

インストール

インストーラーを起動する

先ほど保存したファイル「VSCodeUserSetup～.exe」をクリック、またはダブルクリックして開きます。

同意する

使用許諾契約書に「同意する」を選択し、次へをクリック

デスクトップにアイコンを作成する

「デスクトップ上にアイコンを作成する」をチェックを入れ、次へをクリックします。

インストールする

インストールをクリックするとインストールが開始されます。

補足

インストールは1分程度で完了します。

インストールがなかなか完了しない場合は、一度キャンセルして再びインストールしてみましょう。

インストール完了

これでインストール完了です。

3. インストールできない時の対処法

ここではVisual Studio Code (VS Code) をインストールできないときの対処法を解説しています。

管理者権限で実行

インストールできない時の対処法：管理者権限で実行

インストールできない場合、管理者権限以外でインストーラーを実行している可能性があります。

解決方法としては、下記のようにインストーラーを右クリックし、「管理者として実行」を押すことで正常にインストールできます。

ノーノちゃん

右クリックしても「管理者として実行」なんて項目は出てこないよ。

その場合は、管理者権限のユーザーアカウントでないかもしれません。くわしくは下記をご覧ください。

ぶたさん

※管理者権限のユーザーアカウントとは？

Windowsのユーザーアカウントには、次のように2つ種類があります。

管理者権限アカウント	ソフトのインストールや、システムの設定変更など、すべての操作を行うことができるアカウント。
標準アカウント	管理者の許可がないとソフトのインストールなどができない制限付きアカウント。

　
管理者権限のあるアカウントは、Windowsの設定を変更したり、ソフトのインストールなど自由に行うことができます。

一方、標準アカウントは管理者権限がないため、ソフトをインストールするためには管理者の許可が必要になります。

そのため、VS Codeをインストールできない場合は、管理者権限を持つアカウントに作成するか、管理者から許可をもらう必要があります。

インストール先フォルダを変更

インストールできない時の対処法：インストール先フォルダを変更

インストール先に「共有フォルダ」や「クラウド上のフォルダ」を指定している場合、正常にインストールできないことがあります。

通常、ソフトをインストールする場合は、Cドライブなどのローカルドライブを指定する必要があります。

それ以外を指定するとインストールエラーになる可能性があるので気をつけましょう。

ポータブル版を利用する

インストールできない時の対処法：ポータブル版を利用する

上記の対処法を試しても解決しない場合は、ポータブル版（.zip版）を利用してみましょう。

ポータブル版とは、パソコンにインストールする必要がなく、ダウンロードするだけでそのまま使えるバージョンのことです。

また、USBメモリなどに保存して持ち運ぶこともできるので、別のパソコンで使用できるというメリットもあります。

ポータブル版のダウンロード方法は以下のとおりです。

ダウンロードページを開く

まず公式サイトのダウンロードページを開きます。

code.visualstudio.com/Download

zip版をダウンロード

「.zip」の右にある「x64」をクリックしてダウンロードします。

「x64」「Arm64」の違いとは？

x64版	デスクトップ、ノートパソコンに使われているCPU
Arm64版	スマホ、モバイルパソコンに使われているCPU

　
ポータブル版（.zip版）は上記のように「x64版」と「Arm64版」の2種類あります。
　
普通のデスクトップパソコンやノートパソコンを利用している場合はx64版を選びましょう。
　
一方、モバイルパソコンを利用している場合はArm64版を選んでください。

保存する

保存先フォルダを選択し、保存をクリックします。

すべて展開を開く

ダウンロードしたファイルを右クリックし、「すべて展開」を左クリックします。

展開する

展開先フォルダを指定して展開をクリックします。（デフォルトの場合はファイルのあるフォルダに展開されます）

フォルダを開く

先ほど展開したフォルダを開きます。

ポータブル版を起動する

「Code.exe」をクリックするとポータブル版のVisual Studio Code（VS Code）が起動します。

4. 日本語化方法

ここではVisual Studio Code (VS Code) を日本語化する方法の解説しています。

Visual Studio Code (VS Code) は初期設定が英語表記になっているため、拡張機能を使って日本語化する必要があります。

日本語化の手順は以下のとおりです。

Visual Studio Codeを起動する

デスクトップにある「Visual Studio Code」のアイコンをクリックして起動します。

拡張機能を開く

左サイドバーにあるアイコンをクリックして拡張機能を開きます。

検索する

検索ボックスに「Japanese」と入力します。

インストールする

「Japanese Language Pack for Visual Studio」をインストールします。

再起動する

「Change Language and Restart」をクリックすると、ソフトが再起動されます。

日本語化完了

再起動後にVisual Studio Code (VS Code) が日本語になっていれば完了です。

日本語化できない場合は、Visual Studio Code（VS Code）を再インストールしてから、拡張機能を再度入れてみてください。

ぶたさん

5. 使い方

Visual Studio Code（VS Code）をインストールしてみたものの、「使い方がまったく分からない…」という方も多いのではないでしょうか。

そこでここでは、Visual Studio Code（VS Code）の基本的な使い方をわかりやすくご紹介します。

例では「HTML」「CSS」「JavaScript」のファイルを作成していますので、ぜひ参考にしてみてくださいね。

①HTMLファイルを作成

まずはじめにHTMLファイルを作成する方法を解説します。

新しいフォルダを作成

デスクトップ上でキーボードの「Ctrl+Shift+N」を押して、新しいフォルダを作成します。

補足

「右クリック」→「新規作成」→「フォルダ」でも新しいフォルダを作成できます。

フォルダ名変更

先ほど作成した新しいフォルダの名前を「test」に変更します。

フォルダを開くをクリック

Visual Studio Code（VS Code）を起動し、「フォルダを開く」をクリックします。

かんたんなフォルダの開き方はこちら

開きたいフォルダをVisual Studio Code（VS Code）に、ドラッグ＆ドロップするとフォルダを開くことができます。

ドラッグ＆ド

フォルダを選択

先ほど作成した「test」フォルダを選択し、フォルダーの選択をクリックします。

新しいファイルを作成

新しいファイル作成ボタンをクリックします。

ファイル名を入力

ファイル名を「index.html」と入力します。

ファイル名について

HTMLファイルを作成する際は、必ず拡張子「.html」をつけてください。

コードを貼り付ける

先ほど作成した「index.html」ファイルにコードを貼り付けます。

【貼り付けるコード】

HTML

コピー拡大

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Visual Studio Code（VS Code）の使い方例</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>

  <h1>こんにちは、世界！</h1>
  <button id="myButton">クリックしてね</button>
  <p id="message"></p>

  <script src="main.js"></script>
</body>
</html>

Visual Studio Code（VS Code）では、HTMLファイル上で「!」半角ビックリマークを入力するとHTMLのひな型を挿入することができます。

ぶたさん

HTMLのひな型とは？

HTMLのひな型とは、下記のようなHTMLファイルを作成するときに最初に必ず書く基本の土台（テンプレート）のことです。

HTML

コピー拡大

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

完了

これでHTMLファイルの作成完了です。

ノーノちゃん

ファイルを保存しなくていいの？

自動保存されますので保存しなくてOKです。

ぶたさん

補足

自動保存されない場合は「自動保存されない」をご覧ください。

②CSSファイルを作成

続いてCSSファイルを作成する方法を解説します。

新しいファイルを作成

新しいファイル作成ボタンをクリックします。

ファイル名を入力

ファイル名を「main.css」と入力します。

ファイル名について

CSSファイルを作成する際は、必ず拡張子「.css」をつけてください。

コードを貼り付ける

先ほど作成した「main.css」ファイルにコードを貼り付ける

【貼り付けるコード】

CSS

コピー拡大

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
  background-color: #f0f8ff;
}

h1 {
  color: #333;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#message {
  margin-top: 20px;
  font-size: 18px;
  color: #555;
}

完了

これでCSSファイルの作成完了です。

③JavaScriptファイルを作成

Visual Studio Code（VS Code）でJavaScriptファイルを作成

続いてJavaScriptファイルを作成する方法を解説します。

新しいファイルを作成

新しいファイル作成ボタンをクリックします。

ファイル名を入力

ファイル名を「main.js」と入力

ファイル名について

JavaScriptファイルを作成する際は、必ず拡張子「.js」をつけてください。

コードを貼り付ける

先ほど作成した「main.js」ファイルにコードを貼り付ける

【貼り付けるコード】

コピー拡大

document.getElementById("myButton").addEventListener("click", function () {
  document.getElementById("message").textContent = "ボタンがクリックされました！";
});

これでサイトの作成完了です。それでは作成したサイトを確認してみましょう。

ぶたさん

④作成したサイトを確認

最後に作成したサイトを確認する方法を解説します。

index.htmlを開く

エクスプローラーにある「index.html」をクリックします。

F5を押す

キーボードの「F5」を押します。

Webアプリを選択

Webアプリを選択するとブラウザが起動します。※「Chrome」「Edge」どちらでもOKです。

確認する

先ほど作成したHTML、CSS、JavaScriptが問題ないか確認すれば完了です。

補足

「クリックしてね」ボタンを押すとJavaScriptが動いて「ボタンがクリックされました！」とメッセージが表示されます。

6. おすすめの拡張機能

ここではVisual Studio Code（VS Code）で使える、おすすめの拡張機能をご紹介しています。

コード整形

コードをきれいに整える拡張機能を紹介しています。

Prettier – Code formatter

拡張機能名	Prettier – Code formatter
主な機能	コードの自動整形
対応言語	HTML / CSS / JavaScript / TypeScript / JSON / Markdownなど

　
「Prettier（プリティアー）」は、全世界で最も利用されているコードを自動で整えてくれる拡張機能です。

この拡張機能は自動折り返し、文末にセミコロンをつける、インデント（行頭の空白）を挿入など、さまざまな処理を行うことができます。

個人利用はもちろん、チーム開発でもコードスタイルを統一することができるため、作業効率のアップにもつながります。

HTML

コピー拡大

<!DOCTYPE html>
<html lang="ja"><head><meta charset="UTF-8"><title>サンプルページ</title></head>
<body><h1>ようこそ！</h1><p>これはHTMLのサンプルページです。</p>
</body></html>

HTML

コピー拡大

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>
    <h1>ようこそ！</h1>
    <p>これはHTMLのサンプルページです。</p>
</body>
</html>

入力補完

コードの入力補完してくれる拡張機能を紹介しています。

Path Intellisense

拡張機能名	Path Intellisense
主な機能	ファイルパスの自動補完

　
「Path Intellisense（パス・インテリセンス）」は、ファイルパスを自動で補完してくれる拡張機能です

具体的にはコードを書いている途中でパスを入力し始めると、候補を自動で表示してくれるため手打ちする手間が省けます。

作業スピードをアップさせるだけでなく、パスの入力ミスを防ぐことができるのでおすすめです。

Auto Rename Tag

拡張機能名	Auto Rename Tag
主な機能	開始・終了タグを自動で同時編集

　
「Auto Rename Tag（オート・リネーム・タグ）」は、HTMLやXMLなどの開始タグと終了タグを同時に編集できる拡張機能です。

たとえば、開始タグの名前を変更すると、終了タグも連動して変更されるため、タグの入力ミスを防ぐことができます。

入力ミスをチェック

コードやタグの入力ミスをチェックしてくれる拡張機能を紹介しています。

Markuplint

拡張機能名	Markuplint
主な機能	HTMLなどの構文をチェック

　
「Markuplint（マークアップリント）」は、HTMLなどの構文をチェックして、間違いや問題点を教えてくれる拡張機能です。

タグの使い方が正しいか、アクセシビリティ（誰でも使いやすい作りになっているか）まで見てくれるので、きれいで正しいコードを書くのに役立ちます。

また、自分のルールに合わせてチェック内容を変えることもできるメリットもあります。

Code Spell Checker

拡張機能名	Code Spell Checker
主な機能	スペルミスを検出

　
「Code Spell Checker（コード・スペル・チェッカー）」は、その名のとおりコードのスペルミスをチェックする拡張機能です。

具体的には、入力ミスしている部分に下線がつき、すぐに正しい単語を提案してくれます。

コメントや変数名、関数名など、細かいところまでチェックしてくれるので非常に便利です。

リアルタイムでプレビュー

Visual Studio Code（VS Code）HTMLをリアルタイムプレビューできる拡張機能

HTMLをリアルタイムプレビューできる拡張機能を紹介しています。

Live Preview

拡張機能名	Code Spell Checker
主な機能	HTMLのリアルタイムプレビューを表示

　
「Live Preview（ライブ・プレビュー）」は、HTMLファイルをリアルタイムでブラウザに表示できる拡張機能です。

通常はHTMLの変更をプレビューで確認する場合、「F5」キーでブラウザを更新する必要があります。

しかし、この拡張機能を使えば、HTMLの変更をリアルタイムにプレビューに反映させることができます。

7. よくある質問

ここではVisual Studio Code (VS Code) に関するよくある質問をご紹介しています。

拡張機能がインストールできない

拡張機能がインストールできない場合、次のいずれかに原因である可能性が高いです。

キャッシュが溜まっている

不要なキャッシュが溜まっていると、拡張機能がインストールできないことがあります。

キャッシュとは、ソフトが動きを速くするために一時的に保存しているデータのことですが、溜まりすぎると不具合の原因になります。

この場合の解決方法は、キャッシュを削除することです。手順は以下のとおりです。

コマンドパレットを起動する

まずVisual Studio Code（VS Code）を起動し、下記のショートカットキーを押すとコマンドパレットが起動します。

Ctrl+Shift+Pを押す

コマンドパレットとは？

コマンドパレットとは、いろいろなコマンド（操作）を検索して実行することができる便利な機能のことです。

テキストを貼り付ける

コマンドパレットの入力欄に下記のテキストを貼り付けて「エディタ履歴のクリア」をクリックします。

テキスト

コピー拡大

Clear Editor History

「Clear Editor History」を貼り付けて「エディタ履歴のクリア」をクリック

キャッシュを削除

「クリア」をクリックすればキャッシュが削除されます。

アップデートによる不具合

拡張機能がインストールできないときは、VS Code本体や拡張機能のアップデートが原因になっていることもあります。

この場合は拡張機能を再インストールすることで解決する可能性があります。

もし解決しない場合はVisual Studio Code (VS Code) 自体を再インストールしてみましょう。

VS Codeのバージョンが古い

古いバージョンのVisual Studio Code (VS Code) を使っている場合、最新の拡張機能に対応していないことがあります。

この場合は下記の手順でアップデートを行えば解決します。

ファイルが文字化けする

ファイルを開いた際に文字化けする場合、文字コードが合っていない可能性があります。

Visual Studio Code (VS Code) では、デフォルトの文字コードの設定が「UTF-8」となっています。

そのため、UTF-8以外の文字コード（たとえばShift_JIS）で書かれたファイルを開くと文字化けしてしまいます。

この場合の解決方法は、ファイルの文字コードをUTF-8へ変換することです。手順は以下のとおりです。

文字コードをUTF-8へ変換する方法

UTF-8をクリック

文字化けするファイルを開き、画面下部にある「UTF-8」をクリックします。

エンコード付きで開く

「エンコード付きで再度開く」をクリックします。

Shift_JISを選択

検索ボックスに「shift」と入力し、「Japanese (Shift JIS)」をクリックします。

Shift_JISをクリック

画面下部にある「Shift_JIS」をクリックします。

エンコード付き保存を選択

「エンコード付きで保存」をクリックします。

完了

「UTF-8 utf8」をクリックすれば文字コードの変換完了です。

ターミナルを表示したい

ターミナルは次のいずれかの方法で表示することができます。

ショートカットキーで表示

キーボードのCtrl+@を押せばターミナルが表示されます。

マウス操作で表示

上部メニューバーにある「表示」をクリックし、「ターミナル」を選択すればターミナルが表示されます。

HTMLのプレビューを表示したい

HTMLファイルを開いている状態でF5を押すとブラウザが起動し、プレビューを表示することができます。

リアルタイムでプレビューを表示させながら作業したい場合は「Live Server」という拡張機能をインストールしましょう。

この拡張機能は、HTMLやCSSのプレビューをリアルタイムで表示することができるので効率的に作業することができます。

自動保存されない

通常デフォルトの設定では自動保存が有効になっています。

したがって自動保存されない場合、誤って設定を変更したか、拡張機能によって勝手に変更された可能性があります。

この場合は次の手順で設定から自動保存を有効にすると解決します。

自動保存を有効にする手順

設定を開く

ショートカットキーCtrl+,を押して設定を開きます。

Files:Auto Saveを開く

検索ボックスに「auto save」と入力し「Files:Auto Save」にあるマークをクリックします。

「auto save」と入力し「Files:Auto Save」の設定をクリック

自動保存を選択

「afterDelay（自動保存）」を選択すれば完了です。

【項目の解説】

off	自動保存しない
afterDelay	数秒後に自動保存
onFocusChange	他のタブやファイルに移動したとき自動保存
onWindowChange	他のアプリに切り替えたとき自動保存

Visual Studioとの違いは？

	Visual Studio	Visual Studio Code
製品の種類	統合開発環境（IDE）	コードエディタ
開発元	マイクロソフト	マイクロソフト
主な用途	アプリ開発	コード編集
対応言語	C# C++ Visual Basic F#など	HTML CSS JavaScript Python Java PHPなど
対応OS	Windows	Windows macOS Linux