はじめに

個人的にオススメなVSCodeの拡張機能43個とsettings.jsonの設定を紹介します。ちなみに、CopilotなどのAIツールは省いてます。

言語別にデフォルトのフォーマッターを指定する場合は、formatOnSaveなどは false にしておきましょう。自分のsettings.jsonの冒頭部分は以下のようになっています。

.vscode/settings.json

{
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
}

この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。

以下は、この記事で紹介する拡張機能のカテゴリ一覧です。

設定ファイル関連(Yaml, Json, Toml)
Git関連
Markdown関連
カラー系
API関連
コンテナ
その他便利な拡張機能
ネタ系

設定ファイル関連(Yaml, Json, Toml)

特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。

Prettier

esbenp.prettier-vscode

jsonだけの設定では、VSCodeの設定ファイル(settings.jsonやdevcontainer.json)などに適応してくれません。コメント付きのjsonはjsoncをsettings.jsonで以下のように指定する必要があります。

.vscode/settings.json

{
  "[json][jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "files.insertFinalNewline": true,
    "editor.autoIndent": "advanced",
  },
  // 設定しないとvscodeの設定ファイルでProblems loading referenceのエラーが出る時がある
  "json.schemaDownload.enable": true
}

YAML

redhat.vscode-yaml

yamlファイルのフォーマッター。docker-compose.ymlや GitHub Actionのワークフローのyamlファイルは、デフォルトの設定では反映されないので、以下のように設定が必要。

jsonc:.vscode/settings.json

{
  "yaml.format.enable": true,
  "[yaml][dockercompose][github-actions-workflow]": {
    "editor.defaultFormatter": "redhat.vscode-yaml",
    "editor.tabSize": 2,
    "editor.formatOnSave": true,
    "editor.insertSpaces": true,
    "files.insertFinalNewline": true,
    "editor.autoIndent": "advanced",
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
    }
  }
}

Even Better TOML

tamasfe.even-better-toml

jsonc:.vscode/settings.json

{
  "[toml]": {
    "editor.defaultFormatter": "tamasfe.even-better-toml",
    "editor.insertSpaces": true,
    "editor.formatOnSave": true,
    "files.insertFinalNewline": true
  }
}

Git関連

Git関連の拡張機能を紹介していきます。

Git Graph

mhutchie.git-graph

コミット履歴をリポジトリツリーで確認したい時に使用します。
サイドバーのソース管理のところからGit Graphを表示することができます。

よくGit Historyと比較されます。(参考: 【VScode】Git Graphの使い方！他の拡張機能との違いを徹底解説！ | てりーのフロントエンドBLOG)

GitLens

eamodio.gitlens

Git Graph同様Gitを使用するなら必須の拡張機能。コミット履歴をみることができます。
サイドバーからブランチ作成とかもできるようになります。

Git Moji

seatonjiang.gitmoji-vscode

コミットしたい時にコミットメッセージで絵文字を使用したい人は入れておくと便利です。

デフォルトだと絵文字が多すぎるので、以下のように独自の設定を登録することができます。

jsonc:.vscode/settings.json

{
  "gitmoji.onlyUseCustomEmoji": true, // カスタマイズした絵文字のみ表示する
  "gitmoji.addCustomEmoji": [
    {
      "emoji": "🐛",
      "code": ":bug:",
      "description": "バグ修正"
    },
    {
      "emoji": "👍",
      "code": ":+1:",
      "description": "機能改善"
    },
    {
      "emoji": "✨",
      "code": ":sparkles:",
      "description": "部分的な機能追加"
    },
    {
      "emoji": "🎉",
      "code": ":tada:",
      "description": "盛大に祝うべき大きな機能追加"
    },
    {
      "emoji": "🚀",
      "code": ":rocket:",
      "description": "パフォーマンス改善"
    }
  ]
}

GistPad

vsls-contrib.gistfs

GitHub GistをVSCode上で管理することができるようになります。

Pull Request

GitHub.vscode-pull-request-github

VSCode上でプルリクを作成したり、操作することが可能となります。

GitHub Actions

GitHub.vscode-github-actions

GitHub Actionの拡張機能。
サジェストやサイドバーでの実行履歴の確認、ワークフローの設定(SecretsやValiables)の管理ができる。

Markdown関連

README.mdなどのマークダウンファイルで使用する拡張機能を紹介していきます。

Markdown All In One

yzhang.markdown-all-in-one

Markdownのプレビューや目次の作成など色々な機能が入っている拡張機能。
デフォルトフォーマッターにはmarkdownlintを使用する。

markdownlint

DavidAnson.vscode-markdownlint

以下のように設定する。ちなみに、editor.codeActionsOnSaveをmarkdownの設定の中に入れると、動かなくなるので注意。

.vscode/settings.json

{
  "editor.codeActionsOnSave": {
    "source.fixAll.markdownlint": "explicit"
  },
  "[markdown]": {
    "editor.defaultFormatter": "DavidAnson.vscode-markdownlint",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true,
    "editor.formatOnType": true
  },
  "markdownlint.run": "onSave",
  // 無視したいルール
  "markdownlint.config": {
    "MD010": false,
    "MD025": false,
    "MD033": false,
    "MD034": false
  },
}

GitHub Markdown Preview

bierner.github-markdown-preview

MarkdownのプレビューのテーマをGitHubと同じ色にしてくれる。
また、> [!NOTE]や> [!TIP]などの記法のプレビューを可能にする。

Mermaid Markdown Syntax Highlight

Mermaid記法を Markdown で使用できるようにする。

bpruitt-goddard.mermaid-markdown-syntax-highlighting

Foam

foam.foam-vscode

Obsidian のように Markdown を管理する。テンプレートやページ間リンクを作成できる。また、cmd + P > show graphを押すと、グラフで可視化することができる。

カラー系

Color Highlight

naumovs.color-highlight

ソースコード内のカラーコードに実際の色付けで強調表示する。CSSなどを書かなくても、settings.jsonで使用する可能性もあるので入れておく。

indent-rainbow

oderwat.indent-rainbow

以下のようにインデントに色をつけてくれる。

Todo Tree

Gruntfuggly.todo-tree

TODOや FIXMEなどのアノテーションコマンド見やすくしてくれる。また、サイドバーにアノテーションのついたコマンドの一覧を表示させられる。
ちなみに、以下のように自分はリーダブルコードのアノテーションを追加しています。

.vscode/settings.json

{
  // カスタムタグの設定
  "todo-tree.general.tags": [
    "HACK",
    "FIXME",
    "TODO",
    "XXX",
    "REVIEW",
    "OPTIMIZE",
    "CHANGED",
    "NOTE",
    "WARNING"
  ],
  // タグのデフォルトの色の設定
  "todo-tree.highlights.defaultHighlight": {
    "foreground": "#000000",
    "background": "#2C7CFF",
    "iconColor": "#24ff41",
    "opacity": 45
  },
  // タグごとの色の設定
  "todo-tree.highlights.customHighlight": {
    "HACK": {
      "icon": "zap",
      "background": "#e5d411",
      "iconColor": "#e5d411"
    },
    "FIXME": {
      "icon": "flame",
      "background": "#f11e1e",
      "iconColor": "#f11e1e"
    },
    "TODO": {
      "icon": "check-circle"
    },
    "XXX": {
      "icon": "x-circle",
      "background": "#f8831d",
      "iconColor": "#f8831d"
    },
    "REVIEW": {
      "icon": "pin",
      "iconColor": "#8441f1"
    },
    "OPTIMIZE": {
      "icon": "rocket",
      "background": "#f8831d",
      "iconColor": "#f8831d"
    },
    "CHANGED": {
      "icon": "issue-reopened",
      "iconColor": "#003cff"
    },
    "NOTE": {
      "icon": "thumbsup",
      "iconColor": "#be6e2d"
    },
    "WARNING": {
      "icon": "alert",
      "background": "#f11e1e",
      "iconColor": "#f11e1e"
    }
  },
}

Material Icon Theme

PKief.material-icon-theme

アイコンをマテリアルアイコンにしてくれます。

Better Comments

aaron-bond.better-comments

TODOやAlertのコメントを見やすく色をつける。自分はTODO Treeを使用しているので使っていない。

Peacock

johnpapa.vscode-peacock

F1 → Peacockと入力 → Peacock: Change to a favorite color

するとVSCodeの外側の色を変えられる。

自分はcontainerとlocalを区別するために、containerの場合だけ色を変えています。

/Users/username/Library/Application Support/Code/User/settings.json

{
  "peacock.remoteColor": "#03555a"
}

上記の設定をすると、コンテナ使用時の色を変更できますが、ワークスペースのsettings.jsonに勝手に追加されてしまうので気をつけてください。

Output Colorizer

IBM.output-colorizer

VSCodeの出力を分かりやすく色付けしてくれる。エラーがみやすくなる。

Coverage Gutters

ryanluker.vscode-coverage-gutters

テストカバレッジをカラーでコード上に可視化する。

API関連

PostmanのようにAPIテストをVSCode上でできる拡張機能。

REST Client

humao.rest-client

軽量なAPIプラットフォーム。Postmanのように、複雑なAPIには対応していない。

Thunder Client

rangav.vscode-thunder-client

REST Clineより複雑なAPIを叩きたい場合はこちらを使用する。

コンテナ

Remote Development

ms-vscode-remote.vscode-remote-extensionpack

以下の拡張機能がまとまったもの。コンテナやリモートでの開発をする場合は必須。

WSL
Dev Containers
Remote SSH
Remote Tunnel

Docker

ms-azuretools.vscode-docker

Dockerの拡張機能。

その他便利な拡張機能

Code Spell Checker

streetsidesoftware.code-spell-checker

スペルミスをチェックしてくれます。cmd+.で辞書に登録することもできます。

設定ファイルはエラーが多くなることが多いので、そういう場合はignoreに設定しましょう。

.vscode/settings.json

{
  // 無視したいファイルのパス
  "cSpell.ignorePaths": [
    ".vscode",
    ".devcontainer/devcontainer.json",
  ],
  // 無視したい単語
  "errorLens.excludeBySource": ["cSpell"]
}

Live Share

MS-vsliveshare.vsliveshare

他人とソースコードを同時に編集したいときに使用します。
勉強会やモブプログラミングをする際に役立ちます。

サイドバーのアイコンをクリックして、shareすることでリンクが生成されます。ただし、MSアカウントかGitHubアカウントが必要です。

Bookmarks

alefragnani.Bookmarks

ソースコードにブックマークをつけることができる。

Error Lens

usernamehw.errorlens

エラーメッセージをすぐ横に出してくれます。

エラーが多すぎると、見辛くなるので、アプリケーション単位でexcludeBySourceに設定します。特に、スペルチェッカーは多くなることが多いです。
絵文字を左に出力したい場合は設定が必要です。

.vscode/settings.json

{
  "errorLens.excludeBySource": ["cSpell"], // 非表示にしたいエラーの拡張機能
  "errorLens.gutterIconsEnabled": true, // 左にIconを表示するか
  "errorLens.gutterIconSet": "emoji",  // iconに絵文字を設定する
  // 絵文字の設定を独自の設定に変更する
  "errorLens.gutterEmoji": {　 
    "error": "💀",
    "warning": "😱",
    "info": "📌",
    "hint": "💡"
  }
}

Resource Monitor

mutantdino.resourcemonitor

メモリ使用量やCPU使用量を表示する。

Code Runner

formulahendry.code-runner

右上のボタンから実行できるようになる機能。

標準入力をコマンドラインから渡したいときは以下の設定が必要。

.vscode/settings.json

{
    "code-runner.runInTerminal": true
}

VSCode PDF

tomoki1207.pdf

VSCode上でPDFを表示するための拡張機能。

CodeSnap

adpyke.codesnap

Web上やチーム内にコードを共有したいときにスナップショットを作成してくれる拡張機能。

Project Manager

alefragnani.project-manager

VScode内で複数のプロジェクト管理ができるようになる。Dev-Containerのプロジェクトも登録可能。
一発で他のプロジェクトディレクトリを開けるのでめちゃくちゃ便利！

Regex Previewer

chrmarti.regex

正規表現が合っているかを確認できる。

Marquee

stateful.marquee

ニュースなどのウィジェットを追加する。

ネタ系

くれぐれも遊びすぎないように注意してください。

Chrome Dinosaur Game

geekanant.chrome-dinosaur-game

ChromeのあのゲームがVSCode上でできるようになる。

Sudoku Game

ameer.code-sudoku

VSCode上で数独ができる。

Music Time for Spotify

softwaredotcom.music-time

SportifyをVSCodeから聴くことができるようにする拡張機能。

Power Mode

hoovercj.vscode-power-mode

文字を打ち込んだら、エフェクトが出る。

Bongo Cat

pixl-garden.BongoCat

文字を入力すると右下の猫の腕が動きます。

vscode-pets

tonybaloney.vscode-pets

ペットをVSCode内で飼えます。トトロもいます。

設定のやり方

VSCodeの設定方法は主に3つあります。(コンテナ設定とワークスペース設定はプロジェクトのルートからの相対パスです。あと、下記はMacの場合のパスです。)

ワークスペース設定(誰もが共有できる設定): .vscode/settings.json
コンテナ設定(dev-container上で共有したい設定): .devcontainer/devcontainer.jsonのsettings
ユーザ設定(個別で設定したい設定): ~/Library/Application

別の設定ファイルに同じ設定項目が存在する場合、ワークスペース設定 > コンテナ設定 > ユーザ設定の順番に強い。

ワークスペース設定

~/Library/Applicationに書く。
ワークスペースの設定。コンテナ、ローカル関係なく設定される。
リンターやフォーマッターの設定など共有すべき設定値が含まれる。

{
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
 "editor.guides.bracketPairs": true, // 括弧の色付け
  "editor.rulers": [120], // 120文字の箇所に縦線を入れる
  "editor.stickyScroll.enabled": true // スティッキースクロール
}

コンテナ設定

.devcontainer/devcontainer.jsonのsettingsに書く。
devcontainerユーザーの共通設定。devcontainerに依存する設定はここに書く。(コンテナ上でのパスの指定など)

{
  "name": "${localWorkspaceFolderBasename}",
         // ・・・・・
  "customizations": {
    "vscode": {
      "settings": {
        　// ・・・・・
      },

ユーザ設定

Macの場合は ~/Library/Application Support/Code/User/settings.json に指定します。
テーマやCopilotの設定など、個人的に使いたい・共有しない方がよい設定を書きます。
自分は、テーマやターミナルのパスなどをユーザの設定ファイルに記述しております。

/Users/username/Library/Application Support/Code/User/settings.json

{
  "workbench.colorTheme": "Solarized Light",
  "workbench.iconTheme": "material-icon-theme",
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.external.osxExec": "Warp.app",
  "terminal.integrated.enableMultiLinePasteWarning": "auto",
  "peacock.remoteColor": "#03555a"
}

拡張機能ファイル

ワークスペース推奨拡張機能 : .vscode/extensions.json
dev-containerで共有する拡張機能 : devcontainer.jsonのextensions

ワークスペースの方に入れた場合は推奨なので、強制力はない。(ちなみに、非推奨も設定できる。)

この記事で紹介した拡張機能のextensions.json

拡張機能のIDをコピーするのは手間だと思うので、この記事で紹介している拡張機能を全てextensions.json としてまとめました。必要なものだけ 取り込んでください。(なんとなくGistで埋め込んでみましたが、ハイライトがおかしくなるのでjsoncにしてます。)

ローカルで推奨拡張機能を一括インストールする方法

./install_extensions.shで`一括インストールを実行できます。

おわりに

ご精読ありがとうございました。(添付写真のテーマがコロコロ変わっててすみませんでした。)
他におすすめの拡張機能やより良い設定があれば、コメントで教えてください！
その他、コンタクトは X の　@tomomon1227までお願いします。今回は、開発言語ごとの設定やコンテナの設定などは記載しませんでしたが、現在執筆中なので完成したら投稿したいと思います！