【VS Code】おすすめ拡張機能 9選

この記事は、Gajeroll Advent Calendar 2022 の 22 日目の記事です。

はじめに
Git 操作を便利にする拡張機能
1. GitLens — Git supercharged
2. Conventional Commits
コード入力時に役立つ拡張機能
Web 開発に役立つ拡張機能
1. Import Cost
2. Browse Lite
その他
1. JSON Crack
2. Polacode
おわりに

はじめに

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

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and availa...

この記事では、開発効率を爆上げしてくれる便利な VS Code 拡張機能を 10 個ご紹介します。

Git 操作を便利にする拡張機能

GitLens — Git supercharged

VS Code では、もともと Git に関する機能がサポートされています。
それだけでも十分便利ですが、GitLens は VS Code でできる Git 周りの機能をさらに増やしてくれます。例えば、Commit Graph が見れたりやコードを書いた人などが見えるようになったりします。(機能がたくさんあるので全部は使いこなせていません。)

GitLens — Git supercharged - Visual Studio Marketplace

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations and CodeLens, seamlessly nav...

Conventional Commits

Conventional Commits とは、簡単に言えば、コミットメッセージのルールを定めたものです。

この拡張機能は、Conventional Commits の形式でコミットメッセージを書くためのダイアログを表示してくれます。
実務でも Conventional Commits を使っているプロジェクトは多いので、愛用しています。

Conventional Commits - Visual Studio Marketplace

Extension for Visual Studio Code - 💬Conventional Commits for VSCode.

コード入力時に役立つ拡張機能

Vim

みなさん大好き Vim のキーバインドを VS Code でも使いたい。そんな声に応えてくれる拡張機能です。
VS Code の Vim プラグインとしてはこちらが最も有名です。

Vim - Visual Studio Marketplace

Extension for Visual Studio Code - Vim emulation for Visual Studio Code

amVim

こちらの拡張機能も Vim のキーバインドを利用可能にしてくれるものですが、Vim と異なるのは、VS Code 自身のショートカットキーもそのまま使えるという点です。Vim では一部の VS Code のショートカットキーが使えなくなるので、完全に Vim だけだと辛いという方にはこちらがおすすめです。

amVim - Visual Studio Marketplace

Extension for Visual Studio Code - The Vim mode for Visual Studio Code that works as expected.

Code Spell Checker

英単語のスペルミスに下線を表示し、修正候補を提案してくれます。

Code Spell Checker - Visual Studio Marketplace

Extension for Visual Studio Code - Spelling checker for source code

Web 開発に役立つ拡張機能

Import Cost

ライブラリ等からインポートする際に、そのファイルサイズを表示してくれます。
エンジニアたるものパフォーマンス改善は気にしたいものですね。

Import Cost - Visual Studio Marketplace

Extension for Visual Studio Code - Display import/require package size in the editor

Browse Lite

こちらは、VS Code 上でブラウザを使いたいときに役立ちます。
例えば、Web サイトや Web アプリを開発しているときなど、Chrome とエディタを行ったり来たりするのは面倒です。
VS Code 内で画面を分割してプレビューできる点はとても便利です。
ただし、実際のブラウザよりも動作が重い場合が多々あります。