VScode初心者が入れるべき拡張機能


# Abstract

VScodeは非常に軽量なエディタの一つで、最近のIDEの中で勢いのあるエディタです。
その理由の一つは、拡張機能の豊富さであると思います。**けれど豊富すぎて何を入れるべきかいうのがはっきりしていません。**

本記事は「VScode初心者」に焦点を絞り、gitなどを除いて紹介します。
また、この記事は言語に関わらず使える拡張機能を主に紹介します。

つまり：開発というよりもプログラミング学習環境としての視点で紹介します。

# 筆者の環境

拡張機能の動作はOSに依存しないと思うのですが、一応。

Windows 10
あるいはWSL(Ubuntu)

```
$ code --version
1.52.1
```

windowsの視点で話を進めますので、Macの方はctrlなどを適宜読み替えてください。

# 記事のルール

拡張機能名 `識別子`
で紹介します。
※識別子というのは、VScodeの拡張機能マーケットにおいて各拡張機能が持つユニークな値です。いわば拡張機能マーケットの中での住所です。

インストールするときは拡張機能の検索窓で拡張機能名を入れるか、もしくは識別子を入れてみてください。

# 日本語サポートの拡張機能

## Japanese Language Pack for Visual Studio Code `ms-ceintl.vscode-language-pack-ja`

![Japanese-Language-Pack.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/67ddcc97-3290-967d-c4d2-0c8da109ba58.jpeg)

言わずもがなと知れた、日本語化するやつ。インストール後に、コマンドパレット(ctrl+shift+pで開ける)から`configure display language`を検索して選択。その後jaを選択すればおｋ。
まぁある程度英語が読める人は特に必要はなかったりする。

## Japanese Word Handler `sgryjp.japanese-word-handler`

![Japanese-Word-Handler.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/1aafdf82-1087-a31f-e2eb-c4e496471d66.jpeg)

日本語でも単語区切りをできるようにする機能。
VScodeは*ctrl+←*や*ctrl+→*で単語単位で移動する機能を有しています。
例えば

```hello.py
# Hello World
print('Hello World')
```

という時、`# Hello World`の末尾にカーソルを当てて、*ctrl+←*を押すと、カーソルはWの手前に移動するということです。だけどこれ、日本語には対応してなくて

```python
# テストする
```

とかのコメントで、末尾にカーソルを当てて*ctrl+←*を押すと、文の先頭に行ってしまいます。
この拡張機能入れておくと`する`を一単語として扱ってくれて、`テスト`と`する`の間にカーソルが飛ぶようになります。日本語のコメントなどで意外と重宝する。

ただ、日本語は複雑な文法なんで、完璧ではないです。~~諦めよう。~~

# コード表示に関する拡張機能

IDEの良い点はコードのハイライト表示ですよね。
**まずは自分が使う言語に対応した拡張機能をインストールしましょう。**
大体の言語には`ms-vscode`がリリースしている拡張機能があります。使いたい言語名で検索して、出てくる拡張機能の中で迷ったら公式のリリースしているものを選んどきましょう。

## Indenticator `sirtori.indenticator`

![Indenticator.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/3f700a9a-e183-9373-1bb4-77be1da2ab34.jpeg)

今自分がどこのインデントレベルにいるのかを表示してくれる機能。

:::note warn
公式の機能でもインデント表示に対応していますが、微妙に異なる部分があります。詳しくは https://github.com/SirTori/indenticator#remarks をご覧ください。
:::

![公式リポジトリの例](https://raw.githubusercontent.com/SirTori/indenticator/master/img/demo.gif)
※公式リポジトリの例です。

## Background Phi Colors `wraith13.background-phi-colors`

![Background-Phi-Colors.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/e04d6b9a-d97d-5465-842f-b993517dd8cc.jpeg)

こちらは[VS Code ネタ詰め合わせ](https://qiita.com/wraith13/items/9b7da9e2c2355f7573dd)での紹介が良いと思います。

> 一言で言うなら「背景色を様々に自動着色する VS Code 拡張」です。コンセプト的にはコードを「読む」時の人間の負荷を「見る」時に近いレベルに下げ( 文字の認識はもちろん、その集合となる大量の文字で構成されるテキストの認識(=読む)というタスクは人間の脳にとって負荷の高いタスクです。 )、また同時にコードに対する様々な認識能力を向上させる為のモノです。

> - 引数の参照箇所
> - 変数のアクセス箇所
> - スペルミス
> - 類似したコードの差分
> - 他
>
> この VS Code 拡張を使う事で、上に挙げたような事柄を意識的に把握し易くなるだけでなく、無意識的にも気付き易くなります。知能の本質は認識能力と表現能力の集合に他ならないワケですが、この拡張はコードに対するあなたの認識能力を向上をさせます。言い換えればコードに相対する時の知能を向上させるワケです。
>
> 初期状態ではあなたの好みにマッチしないかもしれませんが、いろいろ設定可能ですので気に入った部分だけつまみ食い的に利用するのもよいでしょう。
>
> また、この拡張は indent-rainbow や Trailing Spaces と言った拡張と同等の機能も内包しています。
>
> VS Code の背景(Background)ではなく枠(Frame)を自動着色する Frame Phi Colors という姉妹拡張もあります。

ということで、べた褒めですね。なおREADME.mdには

> this extension is probably not for everyone, and the ratings will vary widely depending on the person. But for those who like it, it will be a very powerful extension.

と書かれています。要は人を選ぶということですね。VScodeは比較的気軽に拡張機能を有効/無効、アンインストールなどができるので、一度試してみるのがよいと思います。

## Better Comments `aaron-bond.better-comments`

![Better-Comment.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/b4a384e3-0fd7-887e-974b-8a33c82857d0.jpeg)

コメントを色付けしてくれる機能。

:::note
より詳細な解説を[Better Commentsを使いこなす](https://qiita.com/take_me/items/ae0772646dd59630a8b5)でしました。そちらが最新情報となります。
:::

~~対応言語はかなり多いので、普通に知られてる言語は大丈夫だと思います。~~
(2022/05/10追記) VScodeがbuilt-inで用意している言語すべてに対応しています。恐らく言語の仕様を定義した拡張機能さえあれば他の言語でも動きます。

C言語の例では
![Better-Comment2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/7c0f95c9-51be-4db9-5604-12eb1ba68efe.jpeg)
みたいになります。
また自分でコメントの色を変えたり、追加することもできます。[Better Commentsを使いこなす](https://qiita.com/take_me/items/ae0772646dd59630a8b5)をご覧ください。

# 補完に関する拡張機能

IDEを使用する一番のメリットは「補完」です。メモ帳などでは不可能な、高速快適コーディングには必須といえるでしょう。

## Visual Studio IntelliCode `visualstudioexptteam.vscodeintellicode`

![Visual-Studio-IntelliCode.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/0e54697d-26a8-8ae1-279e-b54683c539cf.jpeg)

いわゆる予測変換。定義済みの変数とかを入力する時などで予測してくれます。比較的優秀なのでとりあえずインストールしときましょう。

## Path Intellisense `christian-kohler.path-intellisense`

![Path-Intellisense.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/25f46ac1-837b-4333-e635-8c219b246860.jpeg)
パスの入力で予測変換してくれる拡張機能。
なお編集しているコードをカレントディレクトリとして予測変換しているっぽいので、実行ディレクトリと編集しているディレクトリが異なる場合は微妙だったりする。
基本`./`か`../`って打つと予測変換が始まる。気がする。

# 便利機能を付与する拡張機能

上記の拡張機能だけで、それなりに便利になります。更に最強にするための拡張機能を紹介します。

## Code Runner `formulahendry.code-runner`

![Code-Runner.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/5ac16148-2ca4-fbb1-6254-2eb6c70e71b5.jpeg)

様々な言語を素早く手軽に実行できるようにする拡張機能です。
個人的に非常に気に入ってるので、これに関しては別記事にしました。
[Code Runnerを使いこなす](https://qiita.com/take_me/items/6a1d2d417889837219d1)
ただし、setting.jsonをいじるので、少し慣れていないと難しいと思います。

## Code Spell Checker `streetsidesoftware.code-spell-checker`

![Code-Spell-Checker.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/9e6c8c40-b0a9-aec4-9385-ebdeb2513189.jpeg)

端的に言えば、英単語の間違いを指摘する拡張機能です。(日本語は非対応。ロシア語・ドイツ語などはそれに対応した拡張機能があります。)
これのなにが強いのかというと、、、
![公式リポジトリの例](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)
※上記は公式の例です。マーケットのページからも見れます。

特筆すべきは**単語区切りがスペースに限らない点です**。
コーディングではキャメルケースやスネークケースなどの命名規則がありますが、それらすべてに対応しています。しかも似た単語を、Quick Fixで提案してくれます。(日本語化してたら違う表示かもしれません。)
![Code-Spell-Checker2.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/69d497d9-79fc-1634-9e08-7823cc0e6087.jpeg)
![Code-Spell-Checker3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/448279b6-02c2-1dfd-ee80-b4996a6e3acc.jpeg)
また、選択肢の中には`add user dictionary`や`ignore `と言った選択肢もあります。
例えばpythonでnumpyをimportしようとすると、「numpyなんて単語ねぇよ」と言われます。しかし修正するとおかしなことになるのは自明です。そこで`add user dictionary`すると、どこでもnumpyの文字列は単語として登録されます。

変数名や関数名は英単語で命名することが多いので、非常に重宝します。加えてタイポも起こし辛くなるので、スペルミスでエラーに悩む…なんてことがなくなります。非常に強力な拡張機能なのでとりあえずインストールがおすすめです。

## Zoom Bar `wraith13.zoombar-vscode`

![Zoom-Bar.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/e3d5fc4f-7dd8-b063-8629-eb216df2d603.jpeg)

拡大・縮小を変更できるUIを追加する拡張機能です。まぁまぁ便利。
ちなみにVScodeでは*ctrl+ +* または*ctrl + -*で拡大・縮小できる。けど細かく指定するとなると面倒(知らないだけかもしれませんが)なので、おすすめです。

# VScodeの表示に関する拡張機能

テーマなどの紹介です。必須ではなく、個人のお好みです。

## vscode-icons `vscode-icons-team.vscode-icons`

![vscode-icons.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/aff67a83-d0df-0bd4-248e-dc8a3705ba21.jpeg)
アイコンテーマで非常に有名なやつです。多分。
VSCodeはデフォルトでは、エクスプローラーの表示が殺風景です。アイコンがないので。

アイコンテーマの変更の仕方は簡単です。まずこの拡張機能をダウンロードした後、コマンドパレットを開きます(ctrl+shift+p)。その後、`icon theme`と検索して出てくる`Preferences: File Icon Theme`を選択すると選択肢が出てくるので選びます。これで設定完了というわけですね。
上記の方法は他のアイコンテーマへの変更時にも使うので覚えておくとよいでしょう。

## Material Theme `equinusocio.vsc-material-theme`

![Material-Theme.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/47775f43-bc23-ea06-a2b5-8f443a872c19.jpeg)

Material ThemeとMaterial Iconsという二つの拡張機能をまとめてインストールするやつです。
前者はテーマの拡張機能で、非常に種類が豊富です。きっと好きなやつが見つかるよ！テーマの変更方法はDraculaの項で。
後者はアイコンテーマの拡張機能であり、前項と同様ですが、デザインが異なります。

## Dracula Official `dracula-theme.theme-dracula`

![Dracula.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/876565cc-85ff-bcbf-f238-98e4b3abee22.jpeg)
比較的有名な配色テーマなようです。実はここまでのスクリーンショットは全てこのテーマです。ダーク系では一番好きです。
テーマの変更方法はアイコンテーマの場合とほぼ同じ。
この拡張機能をダウンロードした後、コマンドパレットを開きます(ctrl+shift+p)。その後、`color theme`と検索して出てくる`Preferences: Color Theme`を選択すると選択肢が出てくるので選びます。

ちなみにアイコンテーマも配色テーマもコマンドパレットでは`Theme`で検索すれば出てくるので、これだけ覚えておくといいかもしれません。

## background-cover `manasxx.background-cover`

![background-cover.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483769/e3834d86-68f3-25da-bd00-9724aa62a876.jpeg)
背景を好きな画像に変更する拡張機能です。~~標準で搭載してくれたらいいのに。~~
ちなみにVScodeの中身のCSSを書き換えることで実現しているとか云々を以前どこかで聞いたので、**自己責任でお願いします**。

基本的にはこちら[VSCodeとターミナルに背景画像を加えたらプログラミングがちょっと楽しくなるよ](https://qiita.com/samuraibrass/items/da38aab503f576629211)の記事のように行えばオッケーです。
**ただし、初回に背景を変更するときは管理者権限でVScodeを起動する必要があったはずです。**
これは私限定かもしれませんし、そうじゃないかもしれませんが。。
また、背景を設定してVScodeを使うと、また[サポート対象外]ってでます。
後、通知に「Codeが壊れています。再インストールしてください」などがでます。
**お使いのPCは正常です。壊れてません。**
たいていの人にとってはうざいと思うので、通知の右上の歯車マークをクリックして、「通知を表示しない」を選択しましょう。 **次回のアップデートまでは**通知が出ません。アップデートが来るたびに通知+背景が消されます。背景はもう一度設定してください。(※管理者権限での起動は不要。)

# まとめ

VSCodeには便利な拡張機能がたくさんあるということがわかりますね。
このほかにもcsvの閲覧に便利な拡張機能や、zipファイルの中身を覗く拡張機能など、便利なものはたくさんあります。「VScode ○○」で検索したら大体ヒットします。
また、VScodeは拡張機能を比較的簡単に開発することもできます。(だからこそ多くの拡張機能があるとも言えます)プログラミングに慣れてきて、不便だなぁと思うことがあれば自分で拡張機能を開発する、、、なんてこともできますから、挑戦してみてはいかがでしょうか。