みんなに聞いてみた！オススメVS Code拡張機能（2019年版）

この記事は [ウェブクルー Advent Calendar 2019](https://qiita.com/advent-calendar/2019/webcrew) 14日目の記事です。
昨日は @niku_moto さんの「[.localドメイン環境にMacOSをぶち込もうとした戦い](https://qiita.com/niku_moto/items/93ed82692cd742934875)」でした。

# はじめに
ずっとAdobe Dreamweaverを使っていたのですが、最近思い切って切り替えました。
その際に弊社のフロントエンドメンバーに聞いた、オススメ拡張機能を一挙ご紹介！
もし使えそうなものがあれば、ぜひ導入してみてください。

# バージョン
Visual Studio Codeバージョン：**1.40.2**を使用

# おすすめ拡張機能一覧
### [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本語化するパッケージ。とりあえず必須で入れるやつ。
### [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
開始タグを入力し`Enter`を押すだけで、自動的に閉じタグを入力してくれる。
### [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
開始タグを修正すると、自動的に閉じタグも修正してくれる。もちろん逆でもOK！
### [htmltagwrap](https://marketplace.visualstudio.com/items?itemName=bradgashler.htmltagwrap)
テキスト等を選択し、`Alt+w`を押すとpタグで囲ってくれる。
ここpタグで括りたいな～、というとき便利！（設定で別のタグにすることも可）
### [HTML Snippets](https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets)
HTML5に対応しているスニペット。Emmetのようなもの。
### [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
自分で定義したclass名の入力候補が出てくる。
### [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
プロジェクト内のパスを予測変換で出してくれる。
### [Insert br Tag](https://marketplace.visualstudio.com/items?itemName=1natsu.insert-br-tag)
`Shift+Enter`でbrタグ挿入できる。
### imgタグのサイズを自動入力
ファイル → 基本設定 → キーボードショートカット → キーボードショートカットを開く（右上アイコン）
JSONファイルが開かれるので、`[]`の中に貼り付ける。

```
{
    "key": "ctrl+i",
    "command": "editor.emmet.action.updateImageSize",
    "when": "editorTextFocus"
}
```
↓参考にさせていただきました！
https://qiita.com/maco1028/items/5f8dde07d9a62ec47142
### [Guides](https://marketplace.visualstudio.com/items?itemName=spywhere.guides)
インデントが分かりやすいように、開始タグと閉じタグを縦線で結んでくれる。
### [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
ソースコード上でスペルチェックをし、間違ってるところは波線が引かれる。
class名などで2単語以上繋げる場合、キャメルケースにすると消える。
社名などは単語登録も可。

### [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
括弧に色をつけてくれるので、見易くなる。
### [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
末尾などに入ってしまっているムダなスペースを赤く表示してくれる。
### [zenkaku](https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku)
全角スペースをグレーで表示してくれる。（※インストール後、機能を有効にする必要あり）

# その他
### [Polacode](https://marketplace.visualstudio.com/items?itemName=pnp.polacode)
ソースコードのキャプチャを撮る機能。
### [filesize](https://marketplace.visualstudio.com/items?itemName=mkxml.vscode-filesize)
開いているファイルのサイズを表示してくれる。（画面下のステータスバーに）
### [Auto-Open Markdown Preview](https://marketplace.visualstudio.com/items?itemName=hnw.vscode-auto-open-markdown-preview)
Markdownファイルを開くとプレビューが表示される。
### [テキスト校正くん](https://marketplace.visualstudio.com/items?itemName=ICS.japanese-proofreading)
テキストファイルやMarkdownファイルの日本語の文章をチェックしてくれる。


# おまけ
### [Kitty Time =(＾● ⋏ ●＾)= ෆ](https://marketplace.visualstudio.com/items?itemName=QzSG.kitty-time)
ネコで癒されたい人はぜひ:cat:

# 最後に
たまにチームにこういった話題を投げかけてみると、いい拡張機能との出会いがあるかもしれませんね！

明日の記事は@Hideto-Kiyoshima-wcさんです。
よろしくお願いします。