Visual Studio Code（VSCode)は、公式のMarketplaceから多くの拡張機能を追加でき、用途に合わせて柔軟にカスタマイズ可能なエディタである。
本記事では、筆者のPC(Windows11)にインストールしているVSCodeの設定と拡張機能を紹介する。
VSCodeのおすすめ設定
VSCodeの設定は、Ctrl + ,で開き、検索窓に設定名を入力することで変更できる。
以下の設定は、プログラミング言語に関係なく役立つ。
files.trimTrailingWhitespace
余分な空白を削除する設定。検索して有効にする。files.insertFinalNewline
ファイルの最後に改行を追加する。
コードの一貫性を保つため、有効にしておくと便利。editor.formatOnSave
保存時に自動でコード整形を行う設定。
統一されたコードスタイルを保ちやすい。explorer.confirmDragAndDrop
ファイルのドラッグ&ドロップ時に確認メッセージを表示する設定。意図しないファイル移動を防ぐためにも有効にするのがおすすめ。explorer.confirmDelete
ファイルやフォルダの削除時に確認メッセージを表示。誤削除の防止に役立つ。
これらの設定を有効にすることで、VSCodeはより快適で一貫性のあるコーディング環境になる。
おすすめ拡張機能（汎用）
一般コーディング支援
GitLens
Gitの履歴や変更内容を可視化し、リポジトリ管理がしやすくなる拡張機能。
Git管理を強化し、作業効率を向上させる。Prettier - Code formatter
コードフォーマッターとして多言語に対応し、コードの一貫した整形をサポートする。
保存時に自動整形できるので便利。Bracket Pair Colorizer 2
括弧を色分けし、ネスト構造を視覚的に把握しやすくする拡張機能。
複雑な構造のコードも見やすくなり、エラーを防げる。Path Intellisense
パス補完機能を提供し、ファイルやディレクトリを指定する際に自動で補完される。
パスの入力ミスが減り、作業効率も向上。Error Lens
エラーや警告を行内でハイライトし、即座に見つけやすくする拡張機能。
エラーメッセージを素早く確認でき、効率的にデバッグできる。Auto Rename Tag
HTMLやXMLファイルでタグ名を変更すると、対応する終了タグ名も自動で変更される拡張機能。Web開発時に特に便利。Indent Rainbow
インデントのレベルごとに異なる色で表示され、コードのネストを視覚的に把握しやすくする。特にPythonやYAMLファイルの可読性が向上する。
インフラ・DevOps向け拡張機能
Docker
Dockerファイルの補完、シンタックスハイライト、コンテナ管理ができ、VSCodeから直接Dockerコンテナを操作できる。Terraform
IaC（Infrastructure as Code）ツールであるTerraformのコード補完や構文ハイライトが提供され、インフラ管理がしやすくなる。Kubernetes
Kubernetesのクラスタを直接管理し、デプロイやクラスタの状態確認がVSCode上で可能になる。YAML
KubernetesやDocker Composeの設定ファイルに欠かせないYAMLのシンタックスハイライト、補完機能を提供する。ファイルの階層や構造が見やすくなるため必須。
その他便利な拡張機能
Settings Sync
VSCodeの設定や拡張機能をGitHubアカウントと同期し、複数デバイスで同じ開発環境を維持できる。Markdown All in One
Markdown記法のサポートを充実させ、プレビュー機能やテーブル生成など、Markdownでのドキュメント作成を支援する。Remote - SSH
SSH接続でリモートサーバや仮想マシンにアクセスし、VSCodeのローカル環境で開発が行える便利な拡張機能。Todo Tree
コメント内に// TODOや// FIXMEのようなタグを一覧表示してくれる便利な拡張機能。タスク管理がしやすくなるため、コードレビュー時にも役立つ。
Python開発におすすめの拡張機能
Python
Microsoftの公式Python拡張機能。
補完やデバッグ、コードリント、Jupyterノートブックのサポートまで備え、Python開発の基本となる。Pylance
高速かつ正確なコード補完を提供し、Pythonの型チェック機能も充実。
Python拡張機能とセットで使うのがおすすめ。Jupyter
VSCode上でJupyterノートブックを扱えるようにする拡張機能で、データ分析や機械学習のプロジェクトに非常に便利。Python Docstring Generator
関数やクラスに対して自動でDocstringコメントを生成し、ドキュメントの作成をサポート。コードの保守性が向上する。Pytest
テストフレームワークであるPytestを簡単に実行・管理できる拡張機能。テスト結果の確認やデバッグが容易になり、コードの品質管理が向上する。
Web開発におすすめの拡張機能
Web開発に便利な拡張機能も数多くある。
Live Server
ローカルサーバを立ち上げ、HTMLやCSSの変更を自動でリロードしてリアルタイムプレビューが確認できる。
フロントエンドの開発に特に便利。CSS Peek
HTML内から対応するCSSスタイルにジャンプする機能を提供し、スタイルの確認・編集がスムーズに行える。ESLint
JavaScriptやTypeScriptのリントツール。
コードのスタイルやエラーを検出し、修正を促してくれる。プロジェクト全体のコードスタイルを統一するのに便利。HTML CSS Support
HTMLファイル内で使用されるクラス名の補完機能を強化する拡張機能。CSSやスタイルシートの補完が向上し、Web開発の効率が上がる。
ターミナルのカスタマイズ
VSCodeのターミナルもカスタマイズが可能。
以下の設定がおすすめだ：
settings.jsonの編集：ターミナルのテーマカラーやフォントを「settings.json」で設定し、カスタマイズが可能。- Oh My Zsh：Zshを利用する場合、「Oh My Zsh」をターミナルにインストールすると、プロンプトや補完機能が充実し、操作性が向上する。
本記事では、筆者が日々活用しているVSCodeのおすすめ設定と拡張機能について紹介した。
VSCodeは拡張性が高く、多くの設定や機能を追加できる総じて非常に有能なエディターである。
ぜひ、自分に合った環境を構築して快適な開発を目指してほしい。
