VScodeを使うなら入れたい拡張機能10選



# はじめに
当記事は勉強を開始したばかりの初学者向けです。
VScodeを使ってweb制作をしています。便利だと感じた拡張機能の紹介です。

[vsコードに拡張機能をインストールする方法がわからない方はこちら](https://jp.infragistics.com/products/indigo-design/help/codegen/installing-vs-code-extension)

*拡張機能名はリンクになっています*

# 目次
- Japanese Language Pack for VS Code
- Auto Rename Tag
- Zenkaku
- Live Server
- Live Sass Compiler
- htmltagwrap
- Bracket Pair Colorizer
- Code Spell Checker
- HTML CSS Support
- WordPress Snippet


# 各種拡張機能説明

>### [1. Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)


![](https://ms-ceintl.gallerycdn.vsassets.io/extensions/ms-ceintl/vscode-language-pack-ja/1.59.3/1628641121450/Microsoft.VisualStudio.Services.Icons.Default)
vscodeを日本語で使うための拡張機能。

英語が苦手な方は絶対入れるべき!!
  　　　　


>### [2. Zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)

![](https://mosapride.gallerycdn.vsassets.io/extensions/mosapride/zenkaku/0.0.3/1480485295916/Microsoft.VisualStudio.Services.Icons.Default)

***エラーの原因***になる全角文字を教えてくれる。

灰色になってるやつ!!

![](https://github.com/mosapride/vscode-zenkaku/blob/images/readme01.png?raw=true)

*導入したら常時ONになるように設定しよう*

デフォルトではvscodeを開くたびにONに切り替える必要がある。

常にONになるように設定する。

[設定方法を紹介しているサイトはこちら](https://freebsd.sing.ne.jp/tool/19/06/04.html)
~~面倒なところは他人任せ~~

　　

>### [3. Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)

<img src="https://ritwickdey.gallerycdn.vsassets.io/extensions/ritwickdey/liveserver/5.6.1/1555497731217/Microsoft.VisualStudio.Services.Icons.Default" width="140px">

**HTML**/**CSS**/**JavaScript**の記述をリアルタイムでブラウザに反映。

都度更新ボタンを押す必要がない!!

[Live Serverの使い方はこちら](https://life-care.site/programming/liveserver_install_how_to_use)


>### [4. Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)

![](https://ritwickdey.gallerycdn.vsassets.io/extensions/ritwickdey/live-sass/3.0.0/1531332580258/Microsoft.VisualStudio.Services.Icons.Default)

sassのcssへのコンパイルを自動で行う。

*デフォルトだとコンパイルされたcssファイルはコンパイル元と同じフォルダに入る*
 
 *コンパイルしたcssファイルはcssフォルダに入れたい*
 
[設定方法はこちらのサイトを参照](https://yumegori.com/vscode-sass-setting20200116)

　　

>### [5. htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)

<img src="https://bradgashler.gallerycdn.vsassets.io/extensions/bradgashler/htmltagwrap/0.0.7/1513928914744/Microsoft.VisualStudio.Services.Icons.Default" width="140">
**html**タグをラップできる。

範囲を選択して**option + W**でラップ。

![](https://github.com/bgashler1/vscode-htmltagwrap/raw/master/images/screenshot.gif)
　　

>### [6. Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

![](https://coenraads.gallerycdn.vsassets.io/extensions/coenraads/bracket-pair-colorizer/1.0.61/1542132753296/Microsoft.VisualStudio.Services.Icons.Default)

対応するかっこの色を変える。

縦棒選で範囲を教えてくれる。

直感的にタグの始まりと終わりがわかります!!

![](https://github.com/CoenraadS/BracketPair/raw/master/images/example.png)

>### [7. Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

<img src="https://streetsidesoftware.gallerycdn.vsassets.io/extensions/streetsidesoftware/code-spell-checker/1.10.2/1606510538527/Microsoft.VisualStudio.Services.Icons.Default" width="140">

単語のスペルミスを教えてくれる。

　　

![](https://raw.githubusercontent.com/streetsidesoftware/vscode-spell-checker/master/packages/client/images/example.gif)
　　
　　
>### [8. HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)

![](https://ecmel.gallerycdn.vsassets.io/extensions/ecmel/vscode-html-css/1.10.2/1612969511646/Microsoft.VisualStudio.Services.Icons.Default)

htmlを書く際にcssで利用中のclassが候補として出るようになる。

これならスペルミスも減りますね。

>### [9. WordPress Snippet](https://marketplace.visualstudio.com/items?itemName=tungvn.wordpress-snippet)

![](https://cdn.vsassets.io/v/M190_20210811.1/_content/Header/default_icon_128.png)

最初の数文字入力するだけでwordpressのテンプレートタグを候補に表示。

wordpressを使うなら絶対入れておくべき!!


## おわりに
VScodeは拡張機能でより快適に扱えるようになります。
紹介した9選の中から気になったものを試してください!!

10選じゃないの？と思いました？

実は同じ拡張機能を2回紹介していたので一つ消しました・・・
でもタイトルはキリが良いから10選!!