【2018年7-12月】に使っていたおすすめのVSCode拡張リストです。言語やフレームワークに偏らず、標準的なもののみ載せています。
Contents
- 1 リスト
- 1.1 Auto Rename Tag
- 1.2 Bookmarks
- 1.3 Bracket Pair Colorizer
- 1.4 Docker
- 1.5 Dracula Theme
- 1.6 Git History
- 1.7 GitLens — Git supercharged
- 1.8 indent-rainbow
- 1.9 Japanese Language Pack for Visual Studio Code
- 1.10 Material Icon Theme
- 1.11 Output Colorizer
- 1.12 Path Intellisense
- 1.13 Prettier – Code formatter
- 1.14 Rainbow CSV
- 1.15 Regex Previewer
- 1.16 Sort lines
- 1.17 SVG Viewer
- 1.18 Todo+
- 1.19 Trailing Spaces
リスト
Auto Rename Tag
対応する開始タグと終了タグを同時に編集することができます。タグの閉じ忘れなどの防止に役立ちます。

Bookmarks
コード内にブックマークをつけることができます。これにより作業箇所の当たりを付けたり、似たようなファイルやコードが多い時は、次回作業する時の目印にしています。

Bracket Pair Colorizer
対応する{}・()などの括弧に色を付けて表示してくれます。どこからどこまでが範囲なのかが分かりやすくなります。

Docker
VSCodeに標準でインストールされていたと思うのですが、正直あまり使えていません。説明を読む限りはDokerfileの自動生成など結構便利なことができそうな感じもするのですが…今後もう少し試してみます。

Dracula Theme
霧がかったようなカラーのテーマです。好みはあるでしょうが俺は気に入ってます。他に使うテーマはVSCodeデフォルトで入っているHigh Contrastくらいです。

Git History
グラフィカルにGitの変更を表示することができます。条件を設定してソートして表示することもできるので流れがわかりやすくて便利です。

GitLens — Git supercharged
対象のコードを誰がいつ変更したかと、その内容を確認することができます。

indent-rainbow
インデントに色をつけて深さがわかりやすくなります。

Japanese Language Pack for Visual Studio Code
VSCodeの表示言語を日本語に変更できるようになります。

Material Icon Theme
VSCode内のファイルアイコンをマテリアルアイコンに変更できるようになります。ファイルアイコンは視覚的に分かりやすい方が好きです。

Output Colorizer
logファイルに色をつけて見やすくしてくれます。

Path Intellisense
パスやファイル名の入力補完ができるようになります。

Prettier – Code formatter
有名な自動整形ツールです。静的解析ばかりに目がいってフォーマット整形ができていないので、今後はPrettierも活用してクリーンコーディングを意識していきたいです。

Rainbow CSV
CSVのカラムデータに色をつけて見やすくしてくれます。

Regex Previewer
正規表現のリアルタイムプレビューを表示することができます。

Sort lines
選択した範囲のコード内で様々な条件でソートができるようになります。

SVG Viewer
VSCode内でSVGのプレビューをできるようにします。これが入ってないとSVGはテキストで表示されてしまうので不便です。

Todo+
コード内に書いたTodoなどを検索して一覧表示してくれます。リファクタリングする際の目印になります。

Trailing Spaces
コードの行末スペースを可視化します。削除忘れなどの確認になります。
