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

  • URLをコピーしました!

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

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

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

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

VSCodeのおすすめ理由5つ
  1. セットアップが簡単で導入コストが低い
  2. 公式ドキュメントがしっかりしている
  3. エディタの動作が軽い
  4. 拡張機能が豊富である
  5. Microsoftが開発しているエディタ(無くなるリスクが低い)
目次

VSCodeのインストール手順

VSCodeのインストール手順の画像

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

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

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

VSCODEの公式サイトの画像1

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

VSCODEの公式サイトの画像2

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

VSCODEの公式サイトの画像3

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

VSCODEのダウンロード確認の画像

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

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

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

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

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

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

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

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

VSCodeを日本語で表示する

VSCodeを日本語化

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

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

VSCodeの拡張機能の画像
  1. 検索窓から、「Japanese」と入力して、「Japanese Language Pack for VS Code」を検索・表示させます。
  2. Japanese Language Pack for VS Codeが表示されたら、「install」ボタンをクリックします。
Japanese Language Pack for VS Codeをインストール

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

VSCodeを再起動する

VSCodeの初期設定

VSCodeの初期設定

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

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

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

VSCodeの配色変更方法

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

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

半角スペースの見え方①

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

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

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

半角スペースの表示方法変更

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

半角スペースの見え方②

VSCodeの拡張機能について

VSCodeの拡張機能

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

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

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

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

①zenkaku

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

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

zenkakuの拡張機能

②Code Spell Checker

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

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

Code Spell Checkeの拡張機能

③Tabnine

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

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

Tabnineの拡張機能

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

①VSCODE-ICONS

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

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

vscode-iconsの拡張機能

②Indent-Rainbow

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

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

Indent-Rainbowの拡張機能

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

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

①HTMLHint

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

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

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

HTMLHintの拡張機能

②Auto Rename Tag

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

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

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

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

Auto Rename Tag の拡張機能

まとめ

まとめ

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

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

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

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

プログラミングに行き詰った時 UDEMYを使う3つのメリット

この記事が気に入ったら
いいねしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次