はじめに
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公式サイトで確認可能だ。
この記事を参考に、自分に合った拡張機能を導入し、快適な開発環境を構築してほしい。