この記事はウェブクルー Advent Calendar 2019 14日目の記事です。
昨日は @niku_moto さんの「.localドメイン環境にMacOSをぶち込もうとした戦い」でした。

はじめに

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

バージョン

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

おすすめ拡張機能一覧

Japanese Language Pack for Visual Studio Code

日本語化するパッケージ。とりあえず必須で入れるやつ。

Auto Close Tag

開始タグを入力しEnterを押すだけで、自動的に閉じタグを入力してくれる。

Auto Rename Tag

開始タグを修正すると、自動的に閉じタグも修正してくれる。もちろん逆でもOK！

htmltagwrap

テキスト等を選択し、Alt+wを押すとpタグで囲ってくれる。
ここpタグで括りたいな～、というとき便利！（設定で別のタグにすることも可）

HTML Snippets

HTML5に対応しているスニペット。Emmetのようなもの。

IntelliSense for CSS class names in HTML

自分で定義したclass名の入力候補が出てくる。

Path Autocomplete

プロジェクト内のパスを予測変換で出してくれる。

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

インデントが分かりやすいように、開始タグと閉じタグを縦線で結んでくれる。

Code Spell Checker

ソースコード上でスペルチェックをし、間違ってるところは波線が引かれる。
class名などで2単語以上繋げる場合、キャメルケースにすると消える。
社名などは単語登録も可。

Bracket Pair Colorizer

括弧に色をつけてくれるので、見易くなる。

Trailing Spaces

末尾などに入ってしまっているムダなスペースを赤く表示してくれる。

zenkaku

全角スペースをグレーで表示してくれる。（※インストール後、機能を有効にする必要あり）

その他

Polacode

ソースコードのキャプチャを撮る機能。

filesize

開いているファイルのサイズを表示してくれる。（画面下のステータスバーに）

Auto-Open Markdown Preview

Markdownファイルを開くとプレビューが表示される。

テキスト校正くん

テキストファイルやMarkdownファイルの日本語の文章をチェックしてくれる。

おまけ

Kitty Time =(＾● ⋏ ●＾)= ෆ

ネコで癒されたい人はぜひ

最後に

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

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