VSCodeのインストール・初期設定方法とおすすめ拡張機能について

2022年6月8日、GitHubよりテキストエディタ「Atom」の開発を終了する、との発表が行われました。

Atomユーザーには、12月15日の廃止日までに代替サービスへの移行方法などを案内するとされています。

本記事では、ここ最近、テキストエディタとして人気が高まっている、Microsoftが開発した「Visual Studio Code」のインストール方法とおすすめ拡張機能についてご紹介します。

現在、Atomエディタから他のテキストエディタへ乗り換えを検討されている方や、愛用されているテキストエディタがこれといって無い方は、この記事を参考に「Visual Studio Code」を一度、試して使用されることをオススメします。

VSCodeのインストール手順

ではさっそく、「Visual Studio Code」をインストールする際の画面を表示しながら、インストール方法を説明していきます。

Visual Studio Codeを公式サイトより入手する

はじめに、Visual Studio Codeの公式サイトに移動しましょう。

次に、端末OSに合わせてWindows、Linux、Macのいずれかを下記の画面から選択しましょう。

「Visual Studio Code」のダウンロードが完了すると次の画面が表示されます。

Windowsの場合は、「Visual Studio Code」のセットアップ用のexeが、ダウンロードフォルダに格納されます。下記の「Visual Studio Code」のセットアップ用のexeをダブルクリックするとインストールが始まります。

【簡単】Visual Studio Codeのインストール手順

「Visual Studio Code」のセットアップ用のexeをダブルクリックすると、下のような画面が表示されますので、内容を確認し、「同意する」にチェックをして、「次へ」進みます。

下の図のように、「Visual Studio Code」のインストール先を入力する欄が出てきます。インストール先のフォルダを変更する場合は、「参照ボタン」を押下して、インストール先フォルダを変更しましょう。

インストール先のフォルダを変更しない場合は、このまま「次へ」を押してください。

スタートメニューフォルダにショートカットを作成します。特に変更がなければ、このまま「次へ」を押してください。

ここでは、追加タスクを選択します。問題なければ、すべてチェックして、「次へ」進みます。

これまで設定してきた内容について、この画面で最終確認します。問題なければ、「インストール」を押下して、インストールを開始します。

インストールが完了すると、次の画面が表示されます。

VSCodeを日本語で表示する

VSCodeをインストールした直後は、英語で表示されています。日本語で表示させるために、拡張機能で「Japanese Language Pack for VS Code」をインストールします。

拡張機能をインストールする方法は以下の手順で簡単に行えます。

インストールが終わったら、RestartボタンをクリックしてVSCodeを再起動します。

VSCodeの初期設定

①配色のテーマを変更する方法

インストールした直後は、デフォルトの配色テーマですが、以下のメニュからお好みの色に変更することができます。

⇒ファイル⇒ユーザ設定⇒配色テーマをクリック

②半角スペースを記号で表示する

VSCodeのデフォルトの表示では、半角スペースは次の画面のように、何も表示されません。

次の設定方法により、半角スペースを記号で表示することができます。

「ファイル」⇒「ユーザ設定」⇒「設定」をクリックします。

①検索窓で、「whitespace」と入力する。
②設定値を「selection」から「all」へ変更する。

変更後は、半角スペースが、薄く記号で表示されます。

VSCodeの拡張機能について

VScodeは様々な拡張機能が用意されています。

便利な拡張機能を入れることで、更に使いやすくなりコーディングの生産性が爆上がりします。

カテゴリー別にご紹介しますので、興味のある拡張機能があれば、インストールして使用してください。

【共通編】コーディングを補完する機能

①zenkaku

ソースコードに全角スペースが存在する場合に、わかりやすく明示してくれます。プログラミングで全角スペースを入力するとコンパイルエラーとなり、気付かないときは、無用に時間を消費してしまいます。

特にプログラミング初心者の方にはおススメの機能です。

②Code Spell Checker

Code Spell Checkerは、変数名やメソッド名などのスペル誤りをチェックしてくれます。

単純なコーディング誤りによるプログラムエラーを防止するのに役立ちますね。

③Tabnine

ソースコードを解析し、JavaScript, Python, Java, Typescriptをはじめあらゆるプログラム言語のオートコンプリートを提供してくれる拡張機能です。

プログラミングの作業効率・生産性がアップしますよ！

【共通編】ビジュアルを補完する機能

①VSCODE-ICONS

ファイル名の横に表示されるアイコンを変更することができます。

ファイルの種類がとてもカラフルで見やすく、一目で分かるようになりますよ。

②Indent-Rainbow

インデントの深さ・ネスト構造が色分けで表示されます。

初期状態でも、点線でインデントの深さが描画されていますが、深さに応じて異なる色合いが設定され、インデントの深さが識別しやすくなります。

【HTML編】HTMLのコーディングに役立つ拡張機能

ここでは、HTMLをコーディングする時に便利な拡張機能について２つご紹介します。

①HTMLHint

HTMLHintは、HTMLをコーディングする時に、コーディングエラーを自動で表示してくれる拡張機能です。

HTMLHintを使えば、VSCode上でコードエラーを分かりやすく表示することができますよ。

コードの問題を発見してくれますので、HTMLを使い始めた初心者の方には便利な機能でおすすめです！

②Auto Rename Tag

HTMLのタグを編集する時は、通常、開始タグと閉じタグ両方を編集する必要があります。

「Auto Rename Tag」の拡張機能は、どちらか一つのタグを書き換えると、もうひとつのタグも同時に編集してくれる便利な拡張機能です。

修正作業が低減されますし、修正漏れといった誤りも防止することができます。

HTMLをコーディングする人にはこちらの拡張機能もおすすめです！

まとめ

Visual Studio Code のインストール方法と簡単な初期設定および拡張機能について解説しました。

Visual Studio Code はこのほかにもいろいろ便利な拡張機能が用意されています。

是非、Visual Studio Codeをテキストエディタとして一度、使ってみてください。

最後までお読みいただきありがとうございました。

エンジニアに必要な３つの普遍的なスキル

初心者プログラマーがコピペプログラマーになってしまうリスク

プログラミングで挫折しないためには？