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

コーディングする上で、欠かさないのがテキストエディタです。
今回は有名なテキストエディタのVisual Studio Codeについて基本をまとめておきます。

Visual Studio Code

code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

https://code.visualstudio.com

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

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

ひと昔前は「Sublime Text」や「Atom」といったテキストエディタも普及していましたが、現在では後発のVisual Studio Codeが普及していて、もはや定番のエディタになっています。

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

• 機能が多く、初期状態でも使える便利な機能が多い
• Electron製（ウェブの技術を使って作られたアプリ）なので拡張機能がウェブの人も作りやすく、拡張機能の数も豊富
• 同じElectron製のAtomよりも動作が軽量

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

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

Visual Studioとの違い

Visual Studio

Visual Studio: ソフトウェア開発者とチーム向けの IDE およびコード エディター

https://visualstudio.microsoft.com/ja/

Visual Studio 開発ツールとサービスによって、開発者が任意のプラットフォームや言語でアプリの開発を行うのが容易になります。 コード エディターまたは IDE を使用してどこでも無料で開発できます。

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

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

Visual Studio Code for Web

vscode.dev

Visual Studio Code for the Web

https://vscode.dev

Build with Visual Studio Code, anywhere, anytime, entirely in your browser.

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

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

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

• Local File System Access APIに対応したモダンブラウザ（Microsoft EdgeやGoogle Chrome）であれば、ファイルをアップする必要なくローカルファイルをそのまま参照できる
• ウェブ関連であれば、アプリケーション版と同じ操作感で使える

初期設定

アプリケーションをインストールしたあと、起動するとウェルカム画面が表示されます。
次から表示したくない場合は、下の「Show welcome page on startup」のチェックを外しましょう。

日本語化

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

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

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

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

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

テーマの設定

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

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

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

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

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