備忘録
備忘録
学びと解説
学びと解説
Python
Python
Linux
Linux

記事内に商品プロモーションを含む場合があります。

VSCode初心者からプロまで!生産性を高めるおすすめ設定&拡張機能ガイド

はじめに

Visual Studio CodeVSCode)は、公式の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
    インデントのレベルごとに異なる色で表示され、コードのネストを視覚的に把握しやすくする。
    特にPythonYAMLファイルの可読性が向上する。

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