【VSCode】オススメの拡張機能と設定

# はじめに

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

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

```jsonc:.vscode/settings.json
{
  "editor.formatOnSave": false,
  "editor.formatOnPaste": false,
  "editor.formatOnType": false,
}
```

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

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

- [設定ファイル関連(Yaml, Json, Toml)](#設定ファイル関連yaml-json-toml)
- [Git関連](#git関連)
- [Markdown関連](#markdown関連)
- [カラー系](#カラー系)
- [API関連](#api関連)
- [コンテナ](#コンテナ)
- [その他便利な拡張機能](#その他便利な拡張機能)
- [ネタ系](#ネタ系)


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

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

## Prettier

[esbenp.prettier-vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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

```jsonc:.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](redhat.vscode-yaml)

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

```jsonc: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](https://marketplace.visualstudio.com/items?itemName=tamasfe.even-better-toml)

```jsonc: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](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/40b4562f-e030-c5c7-8b32-ce5e70e7340c.png)

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

## GitLens

[eamodio.gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/a2b8d7f2-8734-0dc4-9c93-417ae1132b06.png)

## Git Moji

[seatonjiang.gitmoji-vscode](https://marketplace.visualstudio.com/items?itemName=seatonjiang.gitmoji-vscode)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/c2f6a00b-fdf1-a54e-7abf-2049058040e3.png)

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

```jsonc: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](https://marketplace.visualstudio.com/items?itemName=vsls-contrib.gistfs)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/2d0814ca-3152-70ba-4527-48672edcd099.png)

## Pull Request

[GitHub.vscode-pull-request-github](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/20e6870c-ff55-78f3-d46d-df29a2a13754.png)

## GitHub Actions

[GitHub.vscode-github-actions](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-github-actions)

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

# Markdown関連

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

## Markdown All In One

[yzhang.markdown-all-in-one](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)

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

## markdownlint

[DavidAnson.vscode-markdownlint](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint)

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

```jsonc:.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](https://marketplace.visualstudio.com/items?itemName=bierner.github-markdown-preview)

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

## Mermaid Markdown Syntax Highlight

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

[bpruitt-goddard.mermaid-markdown-syntax-highlighting](https://marketplace.visualstudio.com/items?itemName=bpruitt-goddard.mermaid-markdown-syntax-highlighting)

## Foam

[foam.foam-vscode](https://marketplace.visualstudio.com/items?itemName=foam.foam-vscode)

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

# カラー系

## Color Highlight

[naumovs.color-highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/041a2828-fc6b-a4e0-a8b8-8df81c2866d9.png)

## indent-rainbow

[oderwat.indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/cb5814ac-e5f2-f227-6de2-aff21d77d64e.png)

## Todo Tree

[Gruntfuggly.todo-tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)

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

```jsonc:.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](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/4f9ea15f-8d6e-7173-fd4f-6b7254fd31da.png)

## Better Comments

[aaron-bond.better-comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

`TODO`や`Alert`のコメントを見やすく色をつける。自分は[TODO Tree](#todo-tree)を使用しているので使っていない。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/22a5e387-2e28-41bd-dbeb-9dbf948b7e75.png)

## Peacock

[johnpapa.vscode-peacock](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/4f335f0a-221e-a335-4478-106ee1a465a0.png)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/59949bb5-0805-d4bf-dac7-aea5f822344f.png)

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

```jsonc:/Users/username/Library/Application Support/Code/User/settings.json
{
  "peacock.remoteColor": "#03555a"
}
```

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


## Output Colorizer

[IBM.output-colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)

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

## Coverage Gutters

[ryanluker.vscode-coverage-gutters](https://marketplace.visualstudio.com/items?itemName=ryanluker.vscode-coverage-gutters)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/39a2693a-7bec-cdca-36e3-9db04f50197f.png)

# API関連

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

## REST Client

[humao.rest-client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

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

## Thunder Client

[rangav.vscode-thunder-client](https://marketplace.visualstudio.com/items?itemName=rangav.vscode-thunder-client)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/f01484b5-b078-e39d-88bc-bc700a4f576a.png)

# コンテナ

## Remote Development

[ms-vscode-remote.vscode-remote-extensionpack](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack)

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

- WSL
- Dev Containers
- Remote SSH
- Remote Tunnel

## Docker

[ms-azuretools.vscode-docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)

Dockerの拡張機能。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/df4fdcf2-c956-4ed6-1f65-cbe5fa7d66f6.png)

# その他便利な拡張機能

## Code Spell Checker

[streetsidesoftware.code-spell-checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/aa28a105-2070-7586-512b-f4be4d089c95.png)

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

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

## Live Share

[MS-vsliveshare.vsliveshare](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/db283ae5-c44d-3c87-08d5-d072107ada6c.png)

## Bookmarks

[alefragnani.Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)

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

## Error Lens

[usernamehw.errorlens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/5da111fe-a47a-3fc9-549d-8edea177df27.png)

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

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

## Resource Monitor

[mutantdino.resourcemonitor](https://marketplace.visualstudio.com/items?itemName=mutantdino.resourcemonitor)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/cc4394ab-f528-8be7-9cc8-a9846c137ecd.png)

## Code Runner

[formulahendry.code-runner](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/69bc2626-163d-53e0-7d01-4c3fb69819b2.png)

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

```jsonc:.vscode/settings.json
{
    "code-runner.runInTerminal": true
}
```

## VSCode PDF

[tomoki1207.pdf](https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf)

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

## CodeSnap

[adpyke.codesnap](https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/ce2c1e07-0e77-3b36-b891-349d08ded7ee.png)

## Project Manager

[alefragnani.project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/ab1efd5b-8e98-0113-b989-5b33a82af55e.png)

## Regex Previewer

[chrmarti.regex](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)

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

## Marquee

[stateful.marquee](https://marketplace.visualstudio.com/items?itemName=stateful.marquee)

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

# ネタ系

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

## Chrome Dinosaur Game

[geekanant.chrome-dinosaur-game](https://marketplace.visualstudio.com/items?itemName=geekanant.chrome-dinosaur-game)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/07cb8f73-6b08-8003-af36-65a7916c72b9.png)

## Sudoku Game

[ameer.code-sudoku](https://marketplace.visualstudio.com/items?itemName=ameer.code-sudoku)

VSCode上で数独ができる。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/3a036c79-46a6-b06c-d6c5-310a2af6577b.png)

## Music Time for Spotify

[softwaredotcom.music-time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.music-time)

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

## Power Mode

[hoovercj.vscode-power-mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/73255dbc-9702-d423-42a5-2957d745e7d5.png)

## Bongo Cat

[pixl-garden.BongoCat](https://marketplace.visualstudio.com/items?itemName=pixl-garden.BongoCat)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/04d982a0-c283-47bd-7803-a58595c2e7af.png)

## vscode-pets

[tonybaloney.vscode-pets](https://marketplace.visualstudio.com/items?itemName=tonybaloney.vscode-pets)

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/156096/b7ee159d-6446-3047-e3be-28424de717c2.png)

# 設定のやり方

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

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

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

## ワークスペース設定

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

```json
{
  "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に依存する設定はここに書く。(コンテナ上でのパスの指定など)


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

## ユーザ設定

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

```jsonc:/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にしてます。)

https://gist.github.com/tomo1227/d2ea167085af3573f1a24fbef5fb97ce

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

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

https://gist.github.com/tomo1227/14408dab145b732096bdd55483787f31

# おわりに

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