# Visual Studio Codeの基本｜概要やインストールから日本語化など最低限の設定方法

URL: https://webrandum.net/vscode-install/
公開日: 2022-06-03
更新日: 2022-06-03
カテゴリー: コーディング
タグ: Visual Studio Code
出典: Webrandum（著者: サイトウ マサカズ）

コーディングする上で、欠かさないのがテキストエディタです。

今回は有名なテキストエディタのVisual Studio Codeについて基本をまとめておきます。

## Visual Studio Code

![Visual Studio Codeサイト](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_10.png)

[Visual Studio Code - Code Editing. Redefined](https://code.visualstudio.com)

Visual Studio CodeはMicrosoftが開発している無料・高機能な上に軽量なテキストエディタで、「VSCode」と略されます（「Visual Studio」という別のアプリケーションもあるため、Visual Studioと略すと混乱を招くので注意しましょう）。

ひと昔前は「[Sublime Text](https://www.sublimetext.com/)」や「[Atom](https://atom.io/)」といったテキストエディタも普及していましたが、現在では後発のVisual Studio Codeが普及していて、もはや定番のエディタになっています。

特徴をまとめると下記の通りです。

- 機能が多く、初期状態でも使える便利な機能が多い

- Electron製（ウェブの技術を使って作られたアプリ）なので拡張機能がウェブの人も作りやすく、拡張機能の数も豊富

- 同じElectron製のAtomよりも動作が軽量

拡張機能も豊富していて自分好みにカスタマイズできますし、特にこだわりがないならとりあえずVisual Studio Codeを選択して問題ないでしょう。

インストールはVisual Studio Codeの公式サイトからダウンロードしてインストールします。

### Visual Studioとの違い

[Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコード エディター](https://visualstudio.microsoft.com/ja/)

Visual Studio Codeとは別に「Visual Studio」というアプリケーションもあります。

Visual Studio Codeがテキストエディタなのに対して、Visual Studioはコンパイラやデバッガーなども搭載された統合開発環境です（とはいえ、Visual Studio Codeも機能がどんどん追加されたり、拡張機能を入れたりすることで統合開発環境に近くできます）。

### Visual Studio Code for Web

[Visual Studio Code for the Web](https://vscode.dev/)

2021年10月20日に「Visual Studio Code for Web」が公開されました。

Visual Studio CodeがアプリケーションでPCにインストールする必要があるのに対して、Visual Studio Code for Webはブラウザで使えるウェブアプリです。

ブラウザ上で「[vscode.dev](https://vscode.dev/)」にアクセスするだけでVisual Studio Codeが使えます。

- Local File System Access APIに対応したモダンブラウザ（Microsoft EdgeやGoogle Chrome）であれば、ファイルをアップする必要なくローカルファイルをそのまま参照できる

- ウェブ関連であれば、アプリケーション版と同じ操作感で使える

## 初期設定

アプリケーションをインストールしたあと、起動するとウェルカム画面が表示されます。

次から表示したくない場合は、下の「Show welcome page on startup」のチェックを外しましょう。

![Visual Studio Codeのウェルカム画面](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_1-2.png)

### 日本語化

まずはデフォルトだと英語だったので、日本語化の設定からしていきます。サイドバーの一番下のアイコンをクリックして［Extensions］を開きます。

![［Extensions］](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_2-2.png)

自分の場合は開くと既に「Japanese Language Pack for Visual Studio Code」がインストールされていたのですが、まだインストールされていない人は上の検索ボックスから検索してインストールしてください。

次に、shift + command + Pを押してコマンドパレットを開き、「Configure Display Language」を入力して選択します。

![「Configure Display Language」の入力](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_3-2.png)

「Select Display Language」と表示されるので、「ja」を選択します。

![言語設定の変更](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_4-2.png)

あとは「Restart」を選択してVisual Studio Codeを再起動して、ちゃんと日本語になっていれば日本語化は完了です。

![Visual Studio Codeの再起動](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_5-2.png)

### テーマの設定

メニューバーの［Code］→［基本設定］→［配色テーマ］でVisual Studio Codeのテーマを変更できます。

![［Code］→［基本設定］→［配色テーマ］](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_6-1.png)

選択するとコマンドパレットが表示されてデフォルトテーマから選択できるのですが、検索キーワードを入力してenterを押すとVisual Studio CodeのMarketplace内のテーマも検索してすぐ反映できます。

自分の場合は「One Dark」というテーマが好みで気に入っているので、検索をかけて変更しました。

![テーマの選択](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_7-1.png)

変更後は再起動を促されるので、再起動すれば設定完了です。

![Visual Studio Codeの再起動](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_8.png)

ちなみにインストールしたテーマもサイドバーの［拡張機能］から確認できます。

![インストールしたテーマの確認](https://webrandum.net/mskz/wp-content/uploads/2022/06/image_9.png)