やりたかったこと

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

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

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

ハマったポイント

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

関連記事