今回はVisualStudioCodeで使えるおすすめの拡張機能を見ていきたいと思う。拡張機能の種類は膨大だから他にもいっぱい良いものはあると思うけど、何か使ったことのないもので良さそうなものがあれば試してみるといいかもしれません。ではやっていこう。
VSCodeのおすすめ拡張機能
GitLens
GitLensはGitを使って開発している場合、誰がそのコードを書いたのかっていうをカーソルを当てるだけで見ることができる。
個人開発なら自分しか開発してないから意味ないけど、仕事はチーム開発のことが多いですよね。その時にこのコードどういう意味だろう？変えていいかな？とか思ったら誰が書いたかをすぐに確認して聞くことができたりする。チーム開発においては力を発揮するでしょう。
また、Gitのマークからいろんな情報を見ることができる。
コミット履歴を見ることができるのは楽でいいかもしれない。ブランチやリモートリポジトリの情報も見ることができるから、何かGit関連で確認したかったらこの辺りを見ておけばOK。
差分も確認できるから色々右上のボタンを押して確認してみるといいと思います。
SourceTreeなんかで差分確認もいいけど、エディタでこういうことまでみることができるのは便利だよね。
Docker
DockerはDockerを使っているプロジェクトで力を発揮してくれる拡張機能。Dockerのマークをクリックするとコンテナやイメージを確認することができる。
コンテナやイメージを確認するときって$docker psや$docker container lsとかっていうコマンドを打ったりするけど、コマンドを打つことなく確認できる。
ちなみにDockerHubなんかにも接続できるからAzureやDockerHubを普段から使っている人はDocker使うのがちょっとだけ楽になるかもしれない。
VolumeやNetworkを見ることができるから、今までコマンド打って確認していた人にはいいかもしれない。
IndentRainbow
IndentRainbowはインデントの色を良い感じにしてくれる拡張機能。色は設定次第だけど、こんな感じに表示される。
インストールしてなんか微妙な色だな・・・ってなったらsettings.jsonに色に関する設定をしてみるといいですよ。
設定次第でカラフルにすることもできる。
これはちょっとやり過ぎかもしれないけど、自分の好きな色でインデントを表示するようにしてやろう。設定をいじったら反映させるために、[command（ctrl） + shift + p]からreload windowを実行するといいですよ。
Bracket Pair Colorizer
Bracket Pair Colorizerはカッコを見やすく表示してくれるもの。インストールするとこんな感じでどこで閉じるのか分かりやすい線が表示される。（下で言えば黄色い線）
VSCodeの標準機能でもいける
VisualStudioCodeの標準機能で賄う方法もある。settings.jsonに以下を記述してみよう。
カスタマイズ性はあまりないけど、これぐらいで十分っていう場合にはVSCodeの機能だけで良いと思います。
Path Intellisense
Path Intellisenseはファイルパスなんかを予測して候補を表示してくれる拡張機能。何かimportするときなんかに補完してくれるから助かる。
あれあのファイルどこだったかなあ？っていう時に補完してくれるといちいち確認しなくても書けるから便利でいい。
Trailing Spaces
Trailing Spacesはスペースを色で分かりやすくしてくれる拡張機能。こんな風に赤色で表示してくれる。
このスペースはデフォルトだとタブと半角スペースは赤く表示される？と思うけど、全角スペースなんかは赤くならないと思います。この赤くする部分の設定は正規表現で指定することができるから好きなように指定してやりましょう。
( | )+は半角スペースか全角スペースの連続したものは赤くなります。自分がどの部分をハイライトしたいかによって正規表現は変えておくといいですよ。
それと保存した時にスペースを除きたかったらTrim On Saveにはチェックを入れておくといいです。
Live Server
LiveServerは静的ファイルの変更を検知してリアルタイムで画面を更新してくれる拡張機能。HTMLファイルで試してみるとこんな感じでファイルを変更して保存するとブラウザも勝手に更新してくれる。
HTMLファイル保存したらいちいちブラウザ手動で更新してっていうことをしなくていいから楽ですね。LiveServerを起動すると127.0.0.1のポートが5500でローカルサーバーを立ててくれる。
VSCodeでフォルダを開いたら、右下のGo Liveボタンを押せばサーバーが起動する。
あとはファイルの変更をしてみてブラウザが更新されるか確認してみよう。Web制作なんかだと結構楽になるんじゃないかなと思います。
Auto Rename Tag
AutoRename Tagはタグの名前を変更すると閉じタグもそれに応じて変更してくれる拡張機能。
タグの名前を変更するって地味におきますよね。特にVueやReactで自分でつけた名前のタグを変更する場合なんてものは割と多い気がする。そんな時にも使える。
フロントの開発する人は入れておくとちょっと便利になるんじゃないかなと思います。
各種Theme
テーマはきっと何か入れていると思うけど、一応紹介しておきます。試しにvscodeから[dark]と検索してみるとそれっぽいテーマがたくさん出てくる。
テーマは自分の好きなものを選べばいいけど、どんなテーマがあるのか分からない・・・っていう場合はvscode themesを見てみるといいですよ。
良い感じのものがあったら使ってみてください。
Quokka.js
Quokka.jsはエディタ上でJavaScriptの実行結果がどんな風になるか確かめることのできる拡張機能。jsファイルを作って試してみるとこんな感じでOUTPUT欄が記述に応じて変更してますね。
赤色はエラーで緑色は成功、そして結果もエディタ上に表示されたりする。JSを試すときにブラウザのコンソールから試したり、Codepenなんかのオンラインで使えるエディタを使うっていうこともできるけど、エディタでJSの実行を確認できるから楽。
JavaScriptを普段からゴリゴリ書く人は試してみるといいでしょう。実行する時には[cmd + shift + p]を押して[Start on Current File]を実行すればOK。
CodeSpellChecker
CodeSpellCheckerは英単語のチェックをしてくれる拡張機能で、スペルミスがある時に注意してくれる。
スペルミスに気づかずにコードレビューで指摘されるっていう経験ある人もいるのではないでしょうか。スペルミスはそもそもコードを書く段階で注意してくれるようにしてやればいいんです。
スペルミスしちゃうんだよなあ・・・っていう人は入れてみるといいですよ。
Clipboard Ring
Clipboard Ringはクリップボードの拡張をしてくれる拡張機能で、普通は1つしかクリップボードにコピーしておいておけないけど、これは以前コピーしたものも呼び出すことができる。
cmd(ctrl) + shift + vを連打することによって過去にコピーしたものも出すことができる。貼り付けるときにshiftキー押すだけで使えるから楽。
GitHub Pull Requests and Issues
この拡張機能はVSCode上でプルリクエストやイシューを確認することができるもの。
毎回Githubをブラウザから見にいってプルリクを確認するっていうようなことをやっている場合は、VSCodeを見れば良くなるので移動少なくなってちょっと楽になるんじゃないだろうか。
VSCodeのおすすめ拡張機能まとめ
今回はVSCodeのおすすめ拡張機能を紹介したけど、この記事で書いたのは以下の拡張機能。
- GitLens
- Docker
- IndentRainbow
- Bracket Pair Colorizer
- Path Intellisense
- Trailing Spaces
- Live Server
- Auto Rename Tag
- 各種Theme
- Quokka.js
- CodeSpellChecker
- Clipboard Ring
- GitHub Pull Requests and Issues
何か使ったことのないもので使えそうなものがあれば試してみるといいかもしれない。プログラミングをしていればエディタなんて毎日のように触るし自分が使いやすいように改造していきましょう。
