VScodeのおすすめ拡張機能

フロントエンドでの開発を行う際に、便利だと感じた拡張機能を紹介。

Add jsdoc comments

関数を選択してコマンドパレット(Ctrl + Shift + P)から"Add Doc Comments"を選択するとjsdocを自動生成することができる。

Auto Rename Tag

タグ名を変えると対になっているタグ名も変更される。

Bookmarks

Shift + Alt + Lでコードにブックマークを付けられる。
Ctrl + Alt + Lで次のブックマークに、
Ctrl + Alt  + Jで前のブックマークに移動できる。

Bracket Pair Colorizer

対応する括弧に色がつく。

CSS Peek

Ctrl + クリックで定義されているCSSを参照できる。非常に便利。

CSScomb

コマンドパレットから"CSSComb:Format styles"を選択で、CSSのプロパティ順を整形できる。これも便利。

ESLint

JavaScript の静的検証ツール。実行前に明らかなバグ等を見つけることができる。カスタマイズが効くらしいがその辺はよくわかってない。

Git Graph

ステータスバーの"Git Graph"からGitのツリー構造を見られる。綺麗。

Git History

Gitのcommit等の履歴が見れる。GUIで綺麗。

Highlight Matching Tag

対応するタグがハイライトされる。コピペしたときにインデントがずれて閉じタグを見失うので便利。

HTMLHint

HTMLの構文エラーを表示してくれる。偶に役に立つ。

htmltagwrap

Alt + Wで選択している文字列をpタグで囲うことができる。

indent-rainbow

インデントに色がつく。綺麗。

IntelliSense for CSS class names in HTML

クラス名の補完。

Japanese Language Pack for Visual Studio Code

日本語化。英弱には必須。

Live Sass Compiler

ステータスバーの"Watch Sass"を選択すると保存する度に.scssファイルがコンパイルされる。非常に便利。

Live Server

(Alt + L) + (Alt + O)でブラウザが起動。ファイルを保存する度にHTMLが更新される。

Material Icon Theme

アイコンがマテリアルになる。

Path Autocomplete

pathの補完をしてくれる。

Rainbow CSV

CSVがカラフルになる。

Rainglow

配色テーマが増える。左下の管理(歯車)もしくは、(Ctrl + K) + (Ctrl + T)から選択。

Visual Studio Intelli Code

インテリセンス。