【随時更新】自分用VSCode拡張機能まとめ

# これは

私がVSCodeによく入れている拡張機能をまとめます。
便利なのが見つかり次第更新します。

---

# 定番のやつ

## Japanese Language Pack for Visual Studio Code

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

VSCode日本語化パック。

## Bookmarks

https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks

任意の行にブックマークを付けれる。

## indent-rainbow

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

インデントが七色になって見やすくなる。

## Code Spell Checker

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

英単語のtypoを判定してくれる。

# ドキュメント系

## Draw.io Integration

https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

Draw.io形式のSVGをGUIで編集できる。

## Markdown Preview Enhanced

https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

Markdownファイルのプレビューができる。

## Swagger Viewer

https://marketplace.visualstudio.com/items?itemName=Arjun.swagger-viewer

Swagger（Opne API）形式のファイルのプレビューができる。

## PlantUML

https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml

PlantUMLで書いたコードをプレビューや画像出力できる。

## vscode-pdf

https://marketplace.visualstudio.com/items?itemName=tomoki1207.pdf

PDFファイルが開ける。

## Marp for VS Code
https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

Marpフォーマットで書いたMarkdownファイルをスライド形式で出力できる。

# 開発に役立つもの

## code-eol

https://marketplace.visualstudio.com/items?itemName=sohamkamani.code-eol

改行文字がLFかCRLFかわかりやすくしてくれる。

## TODO Highlight

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

`TODO:`や`FIXME:`などのコメントを目立たせてくれる。

## EditorConfig for VS Code

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

.editorconfigファイルを読み込んでルールを適用してくれる。

## Path Intellisense

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

プロジェクトのパス構造からファイル名をオートコンプリートしてくれる。

## CodeSnap

https://marketplace.visualstudio.com/items?itemName=adpyke.codesnap

選択した範囲のコードをいい感じにスクショ保存にしてくれる。

## open in browser

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

HTMLファイルをブラウザで開いてくれる。

## YAML

https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml

YAML言語をVSCodeでサポートしてくれる。

## DotENV

https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv

.envファイルを構文ハイライトしてくれる。

## zenkaku

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

全角スペースを強調してくれる。

## change-case

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

スネークケースやキャメルケースの変換をコマンドで行える。

## Serverless Console

https://marketplace.visualstudio.com/items?itemName=devadvice.serverlessconsole

こちらを参照。

https://qiita.com/danishi/items/db1c959ec704c2559f10

## Git

### Git Graph

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

リポジトリの変更履歴をグラフにしてくれる。

### GitLens

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Gitの各種操作や視覚補助。

## HTML/CSS

### Auto Rename Tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

対応する開始タグ、終了タグを一度に編集できる。

## Python

### autoDocstring - Python Docstring Generator

https://marketplace.visualstudio.com/items?itemName=njpwerner.autodocstring

Python Docstringを自動生成してくれる。

## CSV

### Edit csv

https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv

CSVをデータベースチックに編集できるUIを提供してくれる。

### Rainbow CSV

https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv

同一列ごとに七色に色分けされて見やすくなる。

## ワークスペース操作

### Project Manager

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager 

異なる場所にあるワークスペース定義に名前をつけてワンボタンで切り替え可能にする。

### Peacock

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock

ワークスペースの色分け設定を簡単に行える。

# その他・Tips

## ワークスペースで推奨の拡張機能を追加
`.vscode/extensions.json` ファイルを作成する。
```json:.vscode/extensions.json
{
  "recommendations": [
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "streetsidesoftware.code-spell-checker"
  ]
}
```

## devcontainerに予め拡張機能を追加する

`.devcontainer/devcontainer.json` の `extensions` に記述しておくと、コンテナ作成時にインストールされる。
```jsonc:.devcontainer/devcontainer.json
  // Add the IDs of extensions you want installed when the container is created.
  "extensions": [
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "streetsidesoftware.code-spell-checker"
  ],
```

上記でインストールされないときのHack

https://github.com/microsoft/vscode-remote-release/issues/7190#issuecomment-1560372687