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