開発が捗る Visual Studio Code 拡張機能

拡張機能はできるだけ最小限にしておきたい派です。そんな自分がインストールして使い勝手がよかった拡張機能をいくつか紹介します。

Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
その名の通りClose Tagを自動で入力してくれます。単純にタイピングが減るので肉体的・心理的負担の軽減にもなります。

Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
タグを修正した際にClose Tagも合わせて修正してくれます。これも手間が減って便利です。

Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
コードブロックをわかりやすく配色してくれる拡張機能です。可読性が上がるためこれも負担軽減に繋がります。

GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
行ごとに最終更新者を表示してくれる拡張機能です。地味に便利で、PRのレビュアーを見定めるときやコードの質問を誰にするかの参考になります。

Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja
UIを日本語化したいときは入れるようにしましょう。

Import Cost

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
JavaScriptもしくはTypeScriptでimportしたファイルの容量を表示してくれる拡張機能です。容量の大きいファイルは赤文字で表示されるようになります。webpackなどでTree Shakingすれば不要かもしれませんがリファクタリングの参考になるかもしれません。

IntelliJ IDEA Keybindings

https://marketplace.visualstudio.com/items?itemName=k--kato.intellij-idea-keybindings
IntelliJやWebstormなどのIDEA製品を使っていたユーザー向けの拡張機能です。キーバインディングをIDEAユーザーが慣れ親しんだ設定にカスタマイズすることができます。

Material Icon Theme

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
アイコンは好みなのでなんでもいいと思いますが、自分はこれを入れています。

Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
ファイルパスの自動入力をしてくれます。必須レベルですが、エディター単体でサポートして欲しい。。

Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
コードフォーマッターです。広い範囲の言語に対応していて最近はこれがスタンダードになってますね。

Quokka.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
エラーになる箇所を実行前に評価してくれる拡張機能です。

Settings Sync

https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
GithubのGistを使って複数のマシンで設定を共有することができるようになります。設定方法はリンク先から行けばスクリーンショット付きでまとまっています。

Trailing Spaces

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces
全角や余計なスペースをハイライトしてくれる拡張機能です。