Edited at

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

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


Auto Close Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

その名の通りClose Tagを自動で入力してくれます。単純にタイピングが減るので肉体的・心理的負担の軽減にもなります。

usage.gif


Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

タグを修正した際にClose Tagも合わせて修正してくれます。これも手間が減って便利です。

usage (1).gif


Bracket Pair Colorizer 2

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

コードブロックをわかりやすく配色してくれる拡張機能です。可読性が上がるためこれも負担軽減に繋がります。

example.png


GitLens — Git supercharged

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

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

gitlens-preview.gif


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すれば不要かもしれませんがリファクタリングの参考になるかもしれません。

import-cost.gif


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

アイコンは好みなのでなんでもいいと思いますが、自分はこれを入れています。

fileIcons.png


Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

ファイルパスの自動入力をしてくれます。必須レベルですが、エディター単体でサポートして欲しい。。

iaHeUiDeTUZuo.gif


Prettier - Code formatter

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

コードフォーマッターです。広い範囲の言語に対応していて最近はこれがスタンダードになってますね。

1_Dy12UyjZIieX86lj0AJ53Q.gif


Quokka.js

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

エラーになる箇所を実行前に評価してくれる拡張機能です。

vsc1.gif


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

全角や余計なスペースをハイライトしてくれる拡張機能です。

27996497-05825060-64b1-11e7-8f1c-7a827b9f0a6f.gif