【2022年最新】Visual Studio Codeのおすすめ拡張機能

![Group-1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/52c8bc07-944f-0eeb-d7ff-35586e0cd765.jpeg)


<p>どんな現場でも最低限入れておく！というものを選びました。</p>

### [1.Japanese Language Pack](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
英語が第一言語の人以外は推奨、最近はVScodeをインストールすると推奨してくることも

### [2.Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
英語のスペルミスを波線で教えてくれます。自分で作成した変数名にも反応してしまうので注意(無視でOK)

![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/9de9d203-e23a-26de-c5b4-eb53495911a2.png)
青い波線の箇所でマウスオンすると…

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/90a4924d-6afc-c46d-173e-69190d4c867c.png)
クイックフィックスが表示

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/8a46cf30-f7d3-23c3-f5ae-894d8a79db78.png)

### [3.LiveServer](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
HTMLファイルを開いて右クリック⇒<strong>Open with LiveServer</strong>または
  ショートカットキー(Windows:`alt`押したまま`L`→`O`、Mac:`option(⌥)`押したまま`L`→`O`)でデフォルトブラウザに表示

![Liveserver-scaled.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/83e00842-db24-a681-097a-f0d5f9e5ed9b.jpeg)

### [4.Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
</h3>
<p>ファイルパス補完候補を表示</p>

![passautocomplete-scaled.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/f545d39f-82e7-f69f-2605-5defeb154c46.jpeg)

### [5.Zenkaku](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
エラーの原因となる全角の空白の箇所を表示させます。

![zenkaku.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/9fad9468-e403-a7b5-fe52-e3144eb320fc.jpeg)


またはVScodeの設定を変更して全角の空白を◯で表示することも可能です。詳しくは[こちらの記事](https://qiita.com/MPrg2011/items/71de855ce2de314d0943)を参照。

https://qiita.com/MPrg2011/items/71de855ce2de314d0943

### 補足：Bracket Pair Colorizer2について
括弧記号を色付けしてくれるとても便利な拡張機能でしたが、[公式ページ](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)にも記載の通り、VScodeの標準機能に搭載されました。
>This project started on 3 Dec 2016. Now 5 years later, it has become a native feature in VSCode.This extension has
    seen wilder success then I could over ever dreamed of, with over 10M+ downloads.I&#8217;m glad so many people found
    it useful, however it no longer has a purpose entering 2022 so development will no longer continue.
https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

以下の手順で設定しましょう。
1.左上のCode⇒基本設定⇒設定(または<strong>command(⌘)+,</strong>(Mac)<span
    style="background-color:#fff7cc" class="tadv-background-color"><strong>Ctrl</strong></span> + <span
    style="background-color:#fff7cc" class="tadv-background-color"><strong>,</strong></span>(Windows))

![スクリーンショット-2022-04-11-20.38.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/06c4df77-ce15-af64-e712-3908d6face70.png)

2.右上の設定(JSON)をクリック
![スクリーンショット-2022-04-11-20.38.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2adf142f-0f06-40b8-b6c3-5c6419398353.png)

3.以下のコードをコピーして貼り付け
```
"editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs":"active"
```
![スクリーンショット-2022-04-11-20.50.17-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/67fc1583-1aaa-c133-d8d3-234ea0029fc4.png)

4.VScodeを一度終了し、再度起動します。
下記画像のように<b>{ }</b>の数が増えてくるとどの<b>{</b>と<b>}</b>がペアなのかわかりにくくなりますが、この設定をしておくことで<b>{ }</b>が片方無い！ということも防げるので時短になります。
![スクリーンショット-2022-04-11-21.25.54.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1051129/2b9816e9-274c-9232-710f-b3e9efb66670.jpeg)