これは
私がVSCodeによく入れている拡張機能をまとめます。
便利なのが見つかり次第更新します。
定番のやつ
Japanese Language Pack for Visual Studio Code
VSCode日本語化パック。
Bookmarks
任意の行にブックマークを付けれる。
indent-rainbow
インデントが七色になって見やすくなる。
Code Spell Checker
英単語のtypoを判定してくれる。
ドキュメント系
Draw.io Integration
Draw.io形式のSVGをGUIで編集できる。
Markdown Preview Enhanced
Markdownファイルのプレビューができる。
Swagger Viewer
Swagger(Opne API)形式のファイルのプレビューができる。
PlantUML
PlantUMLで書いたコードをプレビューや画像出力できる。
vscode-pdf
PDFファイルが開ける。
Marp for VS Code
Marpフォーマットで書いたMarkdownファイルをスライド形式で出力できる。
開発に役立つもの
code-eol
改行文字がLFかCRLFかわかりやすくしてくれる。
TODO Highlight
TODO:
やFIXME:
などのコメントを目立たせてくれる。
EditorConfig for VS Code
.editorconfigファイルを読み込んでルールを適用してくれる。
Path Intellisense
プロジェクトのパス構造からファイル名をオートコンプリートしてくれる。
CodeSnap
選択した範囲のコードをいい感じにスクショ保存にしてくれる。
open in browser
HTMLファイルをブラウザで開いてくれる。
YAML
YAML言語をVSCodeでサポートしてくれる。
DotENV
.envファイルを構文ハイライトしてくれる。
zenkaku
全角スペースを強調してくれる。
change-case
スネークケースやキャメルケースの変換をコマンドで行える。
Serverless Console
こちらを参照。
Git
Git Graph
リポジトリの変更履歴をグラフにしてくれる。
GitLens
Gitの各種操作や視覚補助。
HTML/CSS
Auto Rename Tag
対応する開始タグ、終了タグを一度に編集できる。
Python
autoDocstring - Python Docstring Generator
Python Docstringを自動生成してくれる。
CSV
Edit csv
CSVをデータベースチックに編集できるUIを提供してくれる。
Rainbow CSV
同一列ごとに七色に色分けされて見やすくなる。
ワークスペース操作
Project Manager
異なる場所にあるワークスペース定義に名前をつけてワンボタンで切り替え可能にする。
Peacock
ワークスペースの色分け設定を簡単に行える。
その他・Tips
ワークスペースで推奨の拡張機能を追加
.vscode/extensions.json
ファイルを作成する。
{
"recommendations": [
"formulahendry.auto-rename-tag",
"christian-kohler.path-intellisense",
"streetsidesoftware.code-spell-checker"
]
}
devcontainerに予め拡張機能を追加する
.devcontainer/devcontainer.json
の extensions
に記述しておくと、コンテナ作成時にインストールされる。
// 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