た

たにるぽ

ブログ一覧に戻る
IT・技術·

VSCode完全セットアップガイド｜開発効率を爆上げする拡張機能35選

#VSCode#開発環境#拡張機能#効率化
VSCode完全セットアップガイド｜開発効率を爆上げする拡張機能35選

VSCode完全セットアップガイド｜開発効率を爆上げする拡張機能35選

開発を始めるとき、「どのエディタを使おう？」って迷いませんか？

僕も最初はAtom、Sublime Text、そして今はVSCodeと色々使ってきましたが、結論としてVSCodeが圧倒的におすすめです。無料で高機能、しかも拡張機能が豊富で、ほぼすべての開発言語に対応しています。

でも初期設定って意外と面倒くさいんですよね。「とりあえず使えればいいや」と思っていても、後から「あ、この拡張機能入れておけばよかった...」なんてことがよくあります。

そこで今回は、現役エンジニアとして日々VSCodeを使っている僕が、 本当に使える初期設定と拡張機能 を厳選してご紹介します。この記事の通りに設定すれば、すぐに快適な開発環境が手に入りますよ！

VSCodeのインストール〜まずはHomebrewで楽々セットアップ

まずはVSCode本体のインストールから始めましょう。

Macユーザーの方なら、Homebrewを使うのが断然おすすめです。公式サイトからダウンロードしてもいいのですが、Homebrewなら一行のコマンドで済みますし、アップデートも楽々です。

# Homebrewでのインストール
brew install --cask visual-studio-code
Homebrewがインストールされていない方は、公式サイトから先にインストールしてくださいね。

WindowsやLinuxの方は、公式サイトからダウンロードしてインストールしてください。

インストールが完了したら、ターミナルから code コマンドでVSCodeを起動できます。便利ですよ！

# 現在のディレクトリでVSCodeを開く
code .

# 特定のファイルを開く
code index.html

必須設定1：日本語化で使いやすさアップ

VSCodeをインストールして最初にやることといえば、 日本語化 ですよね。

英語のままでも使えないことはありませんが、やっぱり日本語の方が設定項目がわかりやすいです。特に初心者の方にはおすすめします。

日本語拡張機能をインストール

  1. VSCodeを開いて、サイドバーの拡張機能アイコン（四角いパズルのピース）をクリック
  2. 検索ボックスに「Japanese Language Pack」と入力
  3. 「Japanese Language Pack for Visual Studio Code」をインストール
  4. インストール後、VSCodeを再起動
再起動すると、メニューやコマンドパレットが日本語になっているはずです。もし英語のままの場合は、Ctrl+Shift+P（Mac: Cmd+Shift+P）でコマンドパレットを開き、「Configure Display Language」を実行して「ja」を選択してください。

必須設定2：Markdown関連の拡張機能

ブログを書いたり、READMEファイルを作成したりと、Markdownを使う機会って結構多いですよね。VSCodeはデフォルトでMarkdownに対応していますが、拡張機能を入れるとさらに便利になります。

おすすめMarkdown拡張機能

1. Markdown All in One

名前: Markdown All in One
ID: yzhang.markdown-all-in-one

この拡張機能は本当に便利です！ショートカットキーでの太字・斜体設定、自動リスト作成、目次の自動生成など、Markdown作成に必要な機能が全部入っています。

2. Markdown Preview Enhanced

名前: Markdown Preview Enhanced
ID: shd101wyy.markdown-preview-enhanced

リアルタイムプレビューがめちゃくちゃ便利です。Ctrl+Shift+V（Mac: Cmd+Shift+V）でプレビューが開けます。

3. markdownlint

名前: markdownlint
ID: DavidAnson.vscode-markdownlint

Markdownの書き方をチェックしてくれる拡張機能です。統一感のあるドキュメントが書けるようになります。

必須設定3：Prettier - コードフォーマッターの決定版

コードの見た目を統一するなら、Prettierは絶対に入れておきましょう。

チーム開発では特に重要で、誰が書いても同じフォーマットになるので、コードレビューが楽になります。

Prettierのインストールと設定

名前: Prettier - Code formatter
ID: esbenp.prettier-vscode

インストール後、設定を開いて（Ctrl+,またはCmd+,）、以下の項目を設定します：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.singleQuote": true,
  "prettier.semi": true,
  "prettier.tabWidth": 2
}
保存時に自動フォーマットされるので、最初は「勝手に変わった！」とびっくりするかもしれませんが、慣れると本当に便利です。

Node.js開発者向け必須拡張機能

JavaScriptやTypeScriptでの開発なら、これらの拡張機能は必須です。

ESLint - コード品質の守護神

名前: ESLint
ID: dbaeumer.vscode-eslint

ESLintはコードの品質をチェックしてくれるツールです。バグの原因になりそうなコードパターンを事前に教えてくれるので、とても助かります。

Jest - テスト開発のお供

名前: Jest
ID: Orta.vscode-jest

Jestを使ったテスト開発なら、この拡張機能があるとテストの実行状況がリアルタイムで分かります。テストが通っているかどうかが一目でわかるので、TDD（テスト駆動開発）がやりやすくなります。

JavaScript (ES6) code snippets

名前: JavaScript (ES6) code snippets
ID: xabikos.JavaScriptSnippets

ES6の記法でのスニペット（コード断片）が使えるようになります。cl + Tabで console.log() が入力されるなど、作業効率がアップします。

GitHub連携で開発効率アップ

GitHubを使っている方なら、これらの拡張機能は絶対に入れておきましょう。

GitHub Pull Requests and Issues

名前: GitHub Pull Requests and Issues
ID: GitHub.vscode-pull-request-github

VSCodeから直接プルリクエストの確認や作成ができます。ブラウザを開かなくてもいいので、本当に便利です。

GitLens - Git履歴を可視化

名前: GitLens — Git supercharged
ID: eamodio.gitlens

コードの各行に、いつ誰が変更したかが表示されます。「このコード、誰が書いたんだっけ？」というときに重宝します。

Git Graph

名前: Git Graph
ID: mhutchie.git-graph

ブランチの履歴がビジュアルで確認できます。複雑なブランチ構造も一目でわかるようになります。

広告

AWS開発者向け拡張機能

AWS上でサービスを開発している方には、これらの拡張機能がおすすめです。

AWS Toolkit

名前: AWS Toolkit for Visual Studio Code
ID: AmazonWebServices.aws-toolkit-vscode

VSCode内でAWSのリソースを確認したり、Lambda関数を編集・デプロイしたりできます。AWSコンソールを開く回数が格段に減りますよ。

CloudFormation Linter

名前: CloudFormation Linter
ID: kddejong.vscode-cfn-lint

CloudFormationテンプレートの記法チェックをしてくれます。YAML/JSONの構文エラーを事前に防げます。

AWS関連の拡張機能は、実際にAWSを使う開発でないと恩恵を感じにくいかもしれません。必要に応じて後からインストールでも大丈夫です。

作業効率を爆上げする便利系拡張機能

ここからは、日々の開発作業を効率化してくれる便利な拡張機能をご紹介します。

Todo Tree - TODOコメントを見逃さない

名前: Todo Tree
ID: Gruntfuggly.todo-tree

コード内の // TODO: や // FIXME: コメントを一覧表示してくれます。「あとでやろう」と思って書いたTODOを忘れることがなくなります。

Auto Rename Tag

名前: Auto Rename Tag
ID: formulahendry.auto-rename-tag

HTMLやJSXで、開始タグを変更すると終了タグも自動で変更してくれます。地味に便利です。

Bracket Pair Colorizer 2

名前: Bracket Pair Colorizer 2
ID: CoenraadS.bracket-pair-colorizer-2

括弧やブレースを色分けしてくれます。ネストが深いコードでも、対応関係がわかりやすくなります。

Path Intellisense

名前: Path Intellisense
ID: christian-kohler.path-intellisense

ファイルパスの自動補完をしてくれます。import 文を書くときなどに威力を発揮します。

Live Server

名前: Live Server
ID: ritwickdey.LiveServer

HTMLファイルをローカルサーバーで開いて、変更を自動でブラウザに反映してくれます。フロントエンド開発には必須ですね。

AI時代の開発ツール

最近はAIを活用した開発ツールも充実してきました。特に注目の拡張機能をご紹介します。

Claude Code（旧Claude Dev）

名前: Claude Code
ID: AnthropicPBC.claude-code
これは本当におすすめです！ClaudeのAIがコーディングをサポートしてくれる拡張機能で、コード生成からデバッグまで幅広く活用できます。

特に複雑なロジックを実装するときや、「こんな機能を作りたいけど、どう書けばいいかわからない」というときに重宝します。

Cline（旧Claude Coder）

名前: Cline
ID: saoudrizwan.claude-dev

ファイルの編集や作成を自動化してくれるAIアシスタント拡張機能です。プロジェクト全体を理解して、複数ファイルにわたる変更も提案してくれます。

番外編：AIコーディング専用エディタという選択肢

VSCodeとは別に、AI機能に特化したコードエディタも登場しています。

Cursor - AI-first Code Editor

Cursorは「AIファーストのコードエディタ」として話題になっています。VSCodeベースなので操作感は似ていますが、AI機能がより洗練されています。

Cursorの特徴：

  • コード生成がVSCodeの拡張機能より自然
  • プロジェクト全体の文脈を理解してくれる
  • チャット機能でコードについて質問できる

Windsurf - コードを風のように

Windsurfも新しいAI統合コードエディタです。「風のような軽やかさ」がコンセプトで、AIアシスタントとの協働に特化しています。

Windsurfの特徴：

  • リアルタイムコラボレーション機能
  • 自然言語でのコード指示が可能
  • マルチファイル編集の精度が高い
これらのAI専用エディタは、まだ発展途上ですが、将来性は非常に高いと思います。VSCodeに慣れた後で試してみるのがおすすめです。

その他のおすすめ拡張機能（用途別）

テーマ・見た目系

Material Icon Theme

ID: PKief.material-icon-theme

ファイルアイコンがわかりやすくなります。

One Dark Pro

ID: zhuangtongfa.Material-theme

人気のダークテーマです。目に優しくて長時間の作業でも疲れにくいです。

データベース開発

SQLTools

ID: mtxr.sqltools

VSCode内でデータベースに接続してクエリが実行できます。

Docker開発

Docker

ID: ms-azuretools.vscode-docker

Dockerfileの記法サポートや、コンテナの管理ができます。

Python開発

Python

ID: ms-python.python

Python開発なら必須の拡張機能です。

Pylance

ID: ms-python.vscode-pylance

Pythonの型チェックや自動補完を強化してくれます。

設定のカスタマイズで自分好みに

拡張機能を入れただけでは終わりません。設定をカスタマイズして、自分好みの開発環境に仕上げましょう。

おすすめの基本設定

設定ファイル（settings.json）に以下を追加すると、より使いやすくなります：

{
  // エディタの基本設定
  "editor.fontSize": 14,
  "editor.lineHeight": 1.5,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "boundary",

  // ファイル保存時の動作
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,

  // ターミナルの設定
  "terminal.integrated.defaultProfile.osx": "zsh",
  "terminal.integrated.fontSize": 12,

  // 検索設定
  "search.exclude": {
    " **/node_modules": true,
    "** /dist": true,
    " **/.git": true
  },

  // Git設定
  "git.confirmSync": false,
  "git.enableSmartCommit": true
}

ワークスペース設定の活用

プロジェクトごとに異なる設定を使いたい場合は、ワークスペース設定が便利です。プロジェクトのルートディレクトリに .vscode/settings.json ファイルを作成すると、そのプロジェクト専用の設定が適用されます。

例えば、TypeScriptプロジェクトでは厳密な型チェック、Pythonプロジェクトではリンターの設定など、プロジェクトの性質に合わせて調整できます。

まとめ：あとは使いながらカスタマイズしていこう

今回は、VSCodeの初期設定から実用的な拡張機能まで、幅広くご紹介しました。

でも、** 完璧な開発環境は一日にして成らず **です。最初からすべてを完璧にしようとしなくても大丈夫。まずは基本的な設定から始めて、開発していく中で「こんな機能があったらいいな」と思ったときに拡張機能を探してみてください。

実際、僕も今回ご紹介した拡張機能をすべて最初から使っていたわけではありません。プロジェクトを進めていく中で、「効率化したい」「もっと便利にしたい」という気持ちから、少しずつ環境を改善してきました。

** 重要なのは、使いながら自分好みにカスタマイズしていくこと**です。

みなさんも、まずは今回ご紹介した基本設定から始めて、開発しながら自分だけの最強VSCode環境を作り上げてください！

もし「こんな拡張機能もおすすめだよ」「この設定便利だよ」といった情報があれば、ぜひコメントで教えてくださいね。みんなでより良い開発環境を作っていきましょう！

すべての記事を見る
この記事が役に立ちましたか？

関連記事

新しいMacBook Airを開発者仕様にセットアップ！実際に行った初期設定を全公開

新しいMacBook Airを開発者仕様にセットアップ！実際に行った初期設定を全公開

新品MacBook Airを購入したエンジニアが実際に行った初期設定を詳しく解説。OS設定からHomebrew、開発ツール、AIツールまで、効率的な環境構築の手順を紹介します。

IT・技術
MacBook環境構築+2
続きを読む
生成AIを使いこなす7つのプロンプトテクニック【基礎編】

生成AIを使いこなす7つのプロンプトテクニック【基礎編】

プロンプトの書き方で性能が30%も変わる？Google公式ガイドをもとに、明日から使えるプロンプトエンジニアリングの基本テクニックを解説。

IT・技術
生成AIプロンプトエンジニアリング+2
続きを読む
実務で使える！プロンプトエンジニアリング実践ガイド【実践編】

実務で使える！プロンプトエンジニアリング実践ガイド【実践編】

商品レビュー分析、データ抽出、動画分析など、実際のビジネスシーンで使えるプロンプトの具体例と、AIが苦手なタスクへの対処法を解説。

IT・技術
生成AIプロンプトエンジニアリング+2
続きを読む
すべての記事を見る →