はじめに
個人的にオススメなVSCodeの拡張機能43個とsettings.jsonの設定を紹介します。ちなみに、CopilotなどのAIツールは省いてます。
言語別にデフォルトのフォーマッターを指定する場合は、formatOnSaveなどは false にしておきましょう。自分のsettings.jsonの冒頭部分は以下のようになっています。
{
"editor.formatOnSave": false,
"editor.formatOnPaste": false,
"editor.formatOnType": false,
}
この記事で紹介している拡張機能のIDは、記事の最後にまとめています。また、設定の方法については設定のやり方に記述しています。
以下は、この記事で紹介する拡張機能のカテゴリ一覧です。
設定ファイル関連(Yaml, Json, Toml)
特にYamlやJsonはどのプロジェクトでも使用する可能性が高いので、必須の拡張機能となってくるかと思います。
Prettier
jsonだけの設定では、VSCodeの設定ファイル(settings.jsonやdevcontainer.json)などに適応してくれません。コメント付きのjsonはjsoncを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
yamlファイルのフォーマッター。docker-compose.ymlや GitHub Actionのワークフロー のyamlファイルは、デフォルトの設定では反映されないので、以下のように設定が必要。
{
"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
{
"[toml]": {
"editor.defaultFormatter": "tamasfe.even-better-toml",
"editor.insertSpaces": true,
"editor.formatOnSave": true,
"files.insertFinalNewline": true
}
}
Git関連
Git関連の拡張機能を紹介していきます。
Git Graph
コミット履歴をリポジトリツリーで確認したい時に使用します。
サイドバーのソース管理のところからGit Graphを表示することができます。
よくGit Historyと比較されます。(参考: 【VScode】Git Graphの使い方！他の拡張機能との違いを徹底解説！ | てりーのフロントエンドBLOG)
GitLens
Git Graph同様Gitを使用するなら必須の拡張機能。コミット履歴をみることができます。
サイドバーからブランチ作成とかもできるようになります。
Git Moji
コミットしたい時にコミットメッセージで絵文字を使用したい人は入れておくと便利です。
デフォルトだと絵文字が多すぎるので、以下のように独自の設定を登録することができます。
{
"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
GitHub GistをVSCode上で管理することができるようになります。
Pull Request
GitHub.vscode-pull-request-github
VSCode上でプルリクを作成したり、操作することが可能となります。
GitHub Actions
GitHub Actionの拡張機能。
サジェストやサイドバーでの実行履歴の確認、ワークフローの設定(SecretsやValiables)の管理ができる。
Markdown関連
README.mdなどのマークダウンファイルで使用する拡張機能を紹介していきます。
Markdown All In One
Markdownのプレビューや目次の作成など色々な機能が入っている拡張機能。
デフォルトフォーマッターにはmarkdownlintを使用する。
markdownlint
DavidAnson.vscode-markdownlint
以下のように設定する。ちなみに、editor.codeActionsOnSaveをmarkdownの設定の中に入れると、動かなくなるので注意。
{
"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
Obsidian のように Markdown を管理する。テンプレートやページ間リンクを作成できる。また、cmd + P > show graphを押すと、グラフで可視化することができる。
カラー系
Color Highlight
ソースコード内のカラーコードに実際の色付けで強調表示する。CSSなどを書かなくても、settings.jsonで使用する可能性もあるので入れておく。
indent-rainbow
以下のようにインデントに色をつけてくれる。
Todo Tree
TODOや FIXMEなどのアノテーションコマンド見やすくしてくれる。また、サイドバーにアノテーションのついたコマンドの一覧を表示させられる。
ちなみに、以下のように自分はリーダブルコードのアノテーションを追加しています。
{
// カスタムタグの設定
"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
アイコンをマテリアルアイコンにしてくれます。
Better Comments
TODOやAlertのコメントを見やすく色をつける。自分はTODO Treeを使用しているので使っていない。
Peacock
F1 → Peacockと入力 → Peacock: Change to a favorite color
するとVSCodeの外側の色を変えられる。
自分はcontainerとlocalを区別するために、containerの場合だけ色を変えています。
{
"peacock.remoteColor": "#03555a"
}
上記の設定をすると、コンテナ使用時の色を変更できますが、ワークスペースのsettings.jsonに勝手に追加されてしまうので気をつけてください。
Output Colorizer
VSCodeの出力を分かりやすく色付けしてくれる。エラーがみやすくなる。
Coverage Gutters
ryanluker.vscode-coverage-gutters
テストカバレッジをカラーでコード上に可視化する。
API関連
PostmanのようにAPIテストをVSCode上でできる拡張機能。
REST Client
軽量なAPIプラットフォーム。Postmanのように、複雑なAPIには対応していない。
Thunder Client
REST Clineより複雑なAPIを叩きたい場合はこちらを使用する。
コンテナ
Remote Development
ms-vscode-remote.vscode-remote-extensionpack
以下の拡張機能がまとまったもの。コンテナやリモートでの開発をする場合は必須。
- WSL
- Dev Containers
- Remote SSH
- Remote Tunnel
Docker
Dockerの拡張機能。
その他便利な拡張機能
Code Spell Checker
streetsidesoftware.code-spell-checker
スペルミスをチェックしてくれます。cmd+.で辞書に登録することもできます。
設定ファイルはエラーが多くなることが多いので、そういう場合はignoreに設定しましょう。
{
// 無視したいファイルのパス
"cSpell.ignorePaths": [
".vscode",
".devcontainer/devcontainer.json",
],
// 無視したい単語
"errorLens.excludeBySource": ["cSpell"]
}
Live Share
他人とソースコードを同時に編集したいときに使用します。
勉強会やモブプログラミングをする際に役立ちます。
サイドバーのアイコンをクリックして、shareすることでリンクが生成されます。ただし、MSアカウントかGitHubアカウントが必要です。
Bookmarks
ソースコードにブックマークをつけることができる。
Error Lens
エラーメッセージをすぐ横に出してくれます。
エラーが多すぎると、見辛くなるので、アプリケーション単位でexcludeBySourceに設定します。特に、スペルチェッカーは多くなることが多いです。
絵文字を左に出力したい場合は設定が必要です。
{
"errorLens.excludeBySource": ["cSpell"], // 非表示にしたいエラーの拡張機能
"errorLens.gutterIconsEnabled": true, // 左にIconを表示するか
"errorLens.gutterIconSet": "emoji", // iconに絵文字を設定する
// 絵文字の設定を独自の設定に変更する
"errorLens.gutterEmoji": {
"error": "💀",
"warning": "😱",
"info": "📌",
"hint": "💡"
}
}
Resource Monitor
メモリ使用量やCPU使用量を表示する。
Code Runner
右上のボタンから実行できるようになる機能。
標準入力をコマンドラインから渡したいときは以下の設定が必要。
{
"code-runner.runInTerminal": true
}
VSCode PDF
VSCode上でPDFを表示するための拡張機能。
CodeSnap
Web上やチーム内にコードを共有したいときにスナップショットを作成してくれる拡張機能。
Project Manager
VScode内で複数のプロジェクト管理ができるようになる。Dev-Containerのプロジェクトも登録可能。
一発で他のプロジェクトディケくとりを開けるのでめちゃくちゃ便利！
Regex Previewer
正規表現が合っているかを確認できる。
Marquee
ニュースなどのウィジェットを追加する。
ネタ系
くれぐれも遊びすぎないように注意してください。
Chrome Dinosaur Game
geekanant.chrome-dinosaur-game
ChromeのあのゲームがVSCode上でできるようになる。
Sudoku Game
VSCode上で数独ができる。
Music Time for Spotify
SportifyをVSCodeから聴くことができるようにする拡張機能。
Power Mode
文字を打ち込んだら、エフェクトが出る。
Bongo Cat
文字を入力すると右下の猫の腕が動きます。
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の設定など、個人的に使いたい・共有しない方がよい設定を書きます。
自分は、テーマやターミナルのパスなどをユーザの設定ファイルに記述しております。
{
"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までお願いします。今回は、開発言語ごとの設定やコンテナの設定などは記載しませんでしたが、現在執筆中なので完成したら投稿したいと思います！