VSCodeのおすすめ拡張機能10選（開発効率化）

やりたかったこと

VSCodeの拡張機能を使って開発効率を上げたかった。特に使用頻度が高いものをまとめる。

環境

Visual Studio Code

おすすめ拡張機能

1. GitLens

Gitの履歴をVSCode上で確認できる。誰がいつどの行を変更したか一目でわかる。

拡張機能ID：eamodio.gitlens

2. Prettier

コードを自動フォーマットする。保存時に自動整形されるように設定すると便利。

拡張機能ID：esbenp.prettier-vscode

3. ESLint

JavaScriptのコードチェック。バグになりやすいコードを事前に検出する。

拡張機能ID：dbaeumer.vscode-eslint

4. Docker

DockerfileやDocker Composeの補完・構文チェック。

拡張機能ID：ms-azuretools.vscode-docker

5. Remote - SSH

VPSにSSH接続してVSCodeで直接編集できる。

拡張機能ID：ms-vscode-remote.remote-ssh

6. GitHub Copilot

AIによるコード補完。有料だが生産性が大幅に向上する。

拡張機能ID：GitHub.copilot

7. indent-rainbow

インデントをカラフルに表示して見やすくする。

拡張機能ID：oderwat.indent-rainbow

8. Auto Rename Tag

HTMLのタグを変更すると対応するタグも自動で変わる。

拡張機能ID：formulahendry.auto-rename-tag

9. Path Intellisense

ファイルパスの補完。./ と入力するとファイル候補が出る。

拡張機能ID：christian-kohler.path-intellisense

10. Japanese Language Pack

VSCodeのUIを日本語化する。

拡張機能ID：MS-CEINTL.vscode-language-pack-ja

拡張機能のインストール方法

VSCodeを開く
左サイドバーの拡張機能アイコン（四角が4つ）をクリック
拡張機能IDを検索
「インストール」をクリック

ハマったポイント

拡張機能を入れすぎるとVSCodeが重くなる
Prettierを使う場合はESLintと設定を合わせる必要がある
Remote - SSHは開発効率が大幅に上がるのでVPSを使う人には必須

Remote - SSHを使うにはVPS側でSSH接続が設定されている必要がある。LinuxのSSH接続の基本（VPSに接続する方法）の ~/.ssh/config を設定しておくとVSCodeからもワンクリックで接続できる。