この記事は ウェブクルー 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さんです。
よろしくお願いします。