Amazon 数量限定タイムセール開催中

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

SHARE

このページでは、無料で使える人気のコードエディタ「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) の基本情報
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) の主な機能
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）には「デバックコンソール」という便利な機能が備わっています。

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

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

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

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

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

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

ぶたさん

2. インストール方法

Visual Studio Code (VS Code) をダウンロード・インストール

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

ダウンロード

1

公式サイトを開く

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

code.visualstudio.com
2

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

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

保存する

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

インストール

4

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

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

同意する

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

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

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

インストールする

インストールをクリックするとインストールが開始されます。
インストールをクリック
補足
インストールは1分程度で完了します。

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

8

インストール完了

これでインストール完了です。
完了をクリック

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

Visual Studio Code (VS Code) をインストールできない原因

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

管理者権限で実行

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

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

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

Visual Studio Codeを管理者として実行

ノーノちゃん

右クリックしても「管理者として実行」なんて項目は出てこないよ。
その場合は、管理者権限のユーザーアカウントでないかもしれません。くわしくは下記をご覧ください。

ぶたさん

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

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

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

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

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

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

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

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

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

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

ポータブル版を利用する

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

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

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

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

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

1

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

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

code.visualstudio.com/Download
2

zip版をダウンロード

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

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

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

3

保存する

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

すべて展開を開く

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

展開する

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

フォルダを開く

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

ポータブル版を起動する

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

4. 日本語化方法

Visual Studio Code (VS Code) を日本語化

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

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

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

1

Visual Studio Codeを起動する

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

2

拡張機能を開く

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

検索する

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

インストールする

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

再起動する

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

日本語化完了

再起動後にVisual Studio Code (VS Code) が日本語になっていれば完了です。
Visual Studio Code (VS Code) 日本語化完了
日本語化できない場合は、Visual Studio Code（VS Code）を再インストールしてから、拡張機能を再度入れてみてください。

ぶたさん

5. 使い方

Visual Studio Code（VS Code）の使い方

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

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

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

①HTMLファイルを作成

Visual Studio Code（VS Code）でHTMLファイルを作成
まずはじめにHTMLファイルを作成する方法を解説します。
1

新しいフォルダを作成

デスクトップ上でキーボードの「Ctrl+Shift+N」を押して、新しいフォルダを作成します。
デスクトップ上で「Ctrl」+「Shift」+「N」を押す
補足
「右クリック」→「新規作成」→「フォルダ」でも新しいフォルダを作成できます。
2

フォルダ名変更

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

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

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

フォルダを選択

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

新しいファイルを作成

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

ファイル名を入力

ファイル名を「index.html」と入力します。
「index.html」と入力
ファイル名について
HTMLファイルを作成する際は、必ず拡張子「.html」をつけてください。
7

コードを貼り付ける

先ほど作成した「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
コピー 拡大 
<!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>
8

完了

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

ノーノちゃん

ファイルを保存しなくていいの？
自動保存されますので保存しなくてOKです。

ぶたさん

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

②CSSファイルを作成

Visual Studio Code（VS Code）でCSSファイルを作成
続いてCSSファイルを作成する方法を解説します。
1

新しいファイルを作成

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

ファイル名を入力

ファイル名を「main.css」と入力します。
「main.css」と入力
ファイル名について
CSSファイルを作成する際は、必ず拡張子「.css」をつけてください。
3

コードを貼り付ける

先ほど作成した「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;
}
4

完了

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

③JavaScriptファイルを作成

Visual Studio Code（VS Code）でJavaScriptファイルを作成
続いてJavaScriptファイルを作成する方法を解説します。
1

新しいファイルを作成

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

ファイル名を入力

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

コードを貼り付ける

先ほど作成した「main.js」ファイルにコードを貼り付ける
ここにコードを貼り付ける
【貼り付けるコード】
js
コピー 拡大 
document.getElementById("myButton").addEventListener("click", function () {
  document.getElementById("message").textContent = "ボタンがクリックされました！";
});
これでサイトの作成完了です。それでは作成したサイトを確認してみましょう。

ぶたさん

④作成したサイトを確認

Visual Studio Code（VS Code）で作成したサイトを確認
最後に作成したサイトを確認する方法を解説します。
1

index.htmlを開く

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

F5を押す

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

Webアプリを選択

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

確認する

先ほど作成したHTML、CSS、JavaScriptが問題ないか確認すれば完了です。
完成
補足
「クリックしてね」ボタンを押すとJavaScriptが動いて「ボタンがクリックされました！」とメッセージが表示されます。

6. おすすめの拡張機能

Visual Studio Code（VS Code）の拡張機能

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

コード整形

Visual Studio Code（VS Code）コード整形拡張機能
コードをきれいに整える拡張機能を紹介しています。

Prettier – Code formatter

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>

入力補完

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

Path Intellisense

Path Intellisense

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

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

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

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

Auto Rename Tag

Auto Rename Tag

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

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

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

入力ミスをチェック

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

Markuplint

Markuplint

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

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

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

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

Code Spell Checker

Code Spell Checker

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

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

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

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

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

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

Live Preview

Live Preview

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

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

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

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

7. よくある質問

Visual Studio Code (VS Code) に関するよくある質問

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

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

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

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

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

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

1

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

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

Ctrl+Shift+Pを押す

「Ctrl」+「Shift」+「P」を押す

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

テキストを貼り付ける

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

キャッシュを削除

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

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

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

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

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

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

ヘルプをクリックし、更新の確認をクリック

ファイルが文字化けする

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

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

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

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

1

UTF-8をクリック

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

エンコード付きで開く

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

Shift_JISを選択

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

Shift_JISをクリック

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

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

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

完了

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

ターミナルを表示したい

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

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

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

Visual Studio Code (VS Code) ターミナルの表示方法

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

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

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

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

自動保存されない

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

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

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

1

設定を開く

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

2

Files:Auto Saveを開く

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

自動保存を選択

「afterDelay（自動保存）」を選択すれば完了です。
「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

　
こちらが「Visual Studio」と「Visual Studio Code」の違いになります。

かんたんにまとめると、Visual Studioは開発用ソフト、Visual Studio Codeはコード書くためのエディタという感じです。

UNC、パスが見つからないとは？

指定したドライブまたはUNC、パスが見つからないかアクセスできません。別のパスを指定してください。

このようなメッセージが表示される場合、インストール先にネットワーク上のフォルダを指定している可能性があります。

解決方法は、Visual Studio Code (VS Code) のインストール先を別のドライブに変更することです。

たとえば、Dドライブを指定してエラーが出た場合は、インストール先をCドライブに指定してみましょう。

UNCパスとは、ネットワーク上の共有フォルダやファイルがある場所を示す住所のようなものです。

通常のファイルの場所を示す場合、下記のように表しますよね。

■通常のパス
C:\Users\Documents\sample.png

これは、Cドライブの「Documents」フォルダにある「sample.png」という画像ファイルの場所を表しています。

一方、UNCパスの場合は次のように表します。

■UNCパス
\\fileserver\Documents\sample.png

これは「fileserver」という名前のPCにある「documents」という共有フォルダにある「sample.png」という画像ファイルの場所を表しています。

かんたんに言うと、UNCパスとは自分のパソコン以外にあるフォルダの場所を示しているということです。

EPERMエラーとは？

EPERM: operation not permitted

このエラーメッセージは、ファイルやフォルダに対する操作が許可されていないときに表示されます。

たとえば、管理者権限がないユーザーがソフトのインストールや、ファイルやフォルダを書き換えようとした際に表示されることがあります。

この場合は、管理者権限でVisual Studio Code（VS Code）のインストールを実行すると解決します。

詳しい方法については「管理者権限で実行」をご覧ください。

8. まとめ

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

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

インストール方法はとてもかんたんで、公式サイトからインストーラーをダウンロードして実行するだけです。

初期設定では英語表記になっていますが、拡張機能をインストールすることで日本語に切り替えることができます。

プログラミング学習や開発環境を整えたい方は、導入してみてはいかがでしょうか。

まとめ
  • Visual Studio Code（VS Code）はコード編集エディタ
  • 拡張機能で日本語化することができる
  • インストールできない場合はポータブル版を使う
  • 便利な拡張機能がたくさんある
  • 拡張機能は入れすぎると重くなる

前の記事

【JavaScript】console.logとは？使い方や表示方法を解説！
【JavaScript】console.logとは？使い方や表…