はじめに

Visual Studio Code（VSCode）は、公式のMarketplaceから多くの拡張機能を追加でき、用途に合わせて柔軟にカスタマイズ可能なエディタだ。
本記事では、筆者のPC（Windows 11）にインストールしているVSCodeの設定と拡張機能を紹介する。

VSCodeのおすすめ基本設定

VSCodeの設定は、ショートカット Ctrl + , で開き、検索窓に設定名を入力することで変更可能だ。
以下の設定はプログラミング言語を問わず役立つ。

• files.trimTrailingWhitespace
  余分な空白を削除する設定。
  不要な空白の修正による差分を減らし、コードの一貫性を保てる。

• files.insertFinalNewline
  ファイルの最後に改行を追加。
  UNIX系ツールやGitで推奨される形式を守れる。

• editor.formatOnSave
  保存時に自動でコードを整形する。
  手作業の整形を省け、コードスタイルの統一が図れる。

• explorer.confirmDragAndDrop
  ファイルのドラッグ&ドロップ時に確認ダイアログを表示。
  誤操作でファイルを移動してしまうリスクを防げる。

• explorer.confirmDelete
  ファイルやフォルダの削除時に確認メッセージを表示。
  誤って重要なファイルを削除するリスクを軽減できる。

これらの設定を有効にすると、より快適で安全なコーディング環境が実現する。

おすすめ拡張機能

VSCodeの拡張機能は、開発効率を大幅に向上させるための重要なツールだ。
以下は、特におすすめの拡張機能を紹介する。

一般コーディング支援

• Japanese Language Pack for Visual Studio Code
  VSCodeのUIを日本語化する。
  英語が苦手な初心者でも直感的に操作できるため、効率的な利用が可能になる。

• 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のシンタックスハイライト、補完機能を提供する。
  ファイルの階層や構造が見やすくなるため必須。

その他便利な拡張機能

• 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コメントを生成し、ドキュメントの作成をサポート。
  コードの保守性が向上する。

Web開発におすすめの拡張機能

• CSS Peek
  HTML内から対応するCSSスタイルにジャンプする機能を提供する。
  スタイルの確認や編集がスムーズに行える。

• ESLint
  JavaScriptやTypeScriptのリントツール。
  コードのスタイルやエラーを検出し、修正を促してくれる。
  プロジェクト全体のコードスタイルを統一するのに便利。

• REST Client
  APIリクエストをVSCode上で直接テストできる。
  エンドポイントのレスポンスを手軽に確認できる。

• HTML CSS Support
  HTMLファイル内で使用されるクラス名の補完機能を強化する。
  CSSやスタイルシートの補完が向上し、Web開発の効率が上がる。

まとめ

この記事では、VSCodeを効率的に活用するための基本設定とおすすめ拡張機能を紹介した。これらの設定や機能を活用すれば、開発環境が快適になり、作業効率も向上する。
詳細なドキュメントは、VSCode公式サイトで確認可能だ。

この記事を参考に、自分に合った拡張機能を導入し、快適な開発環境を構築してほしい。