この記事は、Gajeroll Advent Calendar 2022 の 22 日目の記事です。
はじめに
Visual Studio Code は、Microsoft が無料で提供する軽量かつ強力なソースコードエディタで、Windows、macOS、Linux で利用できます。
JavaScript、TypeScript、Node.js をサポートしており、C++、Python、Go などの様々な言語やランタイムのための拡張機能があります。

この記事では、開発効率を爆上げしてくれる便利な VS Code 拡張機能を 10 個ご紹介します。
Git 操作を便利にする拡張機能
GitLens — Git supercharged
VS Code では、もともと Git に関する機能がサポートされています。
それだけでも十分便利ですが、GitLens は VS Code でできる Git 周りの機能をさらに増やしてくれます。例えば、Commit Graph が見れたりやコードを書いた人などが見えるようになったりします。(機能がたくさんあるので全部は使いこなせていません。)
Conventional Commits
Conventional Commits とは、簡単に言えば、コミットメッセージのルールを定めたものです。
この拡張機能は、Conventional Commits の形式でコミットメッセージを書くためのダイアログを表示してくれます。
実務でも Conventional Commits を使っているプロジェクトは多いので、愛用しています。
コード入力時に役立つ拡張機能
Vim
みなさん大好き Vim のキーバインドを VS Code でも使いたい。そんな声に応えてくれる拡張機能です。
VS Code の Vim プラグインとしてはこちらが最も有名です。
amVim
こちらの拡張機能も Vim のキーバインドを利用可能にしてくれるものですが、Vim と異なるのは、VS Code 自身のショートカットキーもそのまま使えるという点です。Vim では一部の VS Code のショートカットキーが使えなくなるので、完全に Vim だけだと辛いという方にはこちらがおすすめです。
Code Spell Checker
英単語のスペルミスに下線を表示し、修正候補を提案してくれます。
Web 開発に役立つ拡張機能
Import Cost
ライブラリ等からインポートする際に、そのファイルサイズを表示してくれます。
エンジニアたるものパフォーマンス改善は気にしたいものですね。
Browse Lite
こちらは、VS Code 上でブラウザを使いたいときに役立ちます。
例えば、Web サイトや Web アプリを開発しているときなど、Chrome と エディタを行ったり来たりするのは面倒です。
VS Code 内で画面を分割してプレビューできる点はとても便利です。
ただし、実際のブラウザよりも動作が重い場合が多々あります。
その他
JSON Crack
こちらは JSON 形式のファイルを可視化してくれる拡張機能です。
あまり使用頻度は高くないですが、データ構造を検討する際に役立つかもしれません。
Polacode
コードのスクショを良い感じに作ることができる拡張機能です。
おわりに
最後までご覧いただきありがとうございます。
PC ロールでは、テクノロジーに関する情報をまとめて発信しています。
また、おすすめのガジェットについて幅広く紹介していく、ガジェロールもあります。
ガジェットやソフトを使うエンジニア・クリエイターはぜひご覧ください。


コメント