これは

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

定番のやつ

Japanese Language Pack for Visual Studio Code

Extension for Visual Studio Code - Language pack extension for Japanese

VSCode日本語化パック。

Bookmarks

Extension for Visual Studio Code - Mark lines and jump to them

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

indent-rainbow

Extension for Visual Studio Code - Makes indentation easier to read

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

Code Spell Checker

Extension for Visual Studio Code - Spelling checker for source code

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

ドキュメント系

Draw.io Integration

Extension for Visual Studio Code - This unofficial extension integrates Draw.io into VS Code.

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

Markdown Preview Enhanced

Extension for Visual Studio Code - Markdown Preview Enhanced ported to vscode

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

Swagger Viewer

Extension for Visual Studio Code - Swagger Viewer lets you preview and validate Swagger 2.0 and OpenAPI files as you type in Visual ...

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

PlantUML

Extension for Visual Studio Code - Rich PlantUML support for Visual Studio Code.

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

開発に役立つもの

code-eol

Extension for Visual Studio Code - Display newline characters in your code

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

TODO Highlight

Extension for Visual Studio Code - highlight TODOs, FIXMEs, and any keywords, annotations...

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

EditorConfig for VS Code

Extension for Visual Studio Code - EditorConfig Support for Visual Studio Code

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

Path Intellisense

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

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

open in browser

Extension for Visual Studio Code - This allows you to open the current file in your default browser or application.

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

YAML

Extension for Visual Studio Code - YAML Language Support by Red Hat, with built-in Kubernetes syntax support

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

DotENV

Extension for Visual Studio Code - Support for dotenv file syntax

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

zenkaku

Extension for Visual Studio Code - show double-byte-whiteSpace

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

change-case

Extension for Visual Studio Code - Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word

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

Serverless Console

こちらを参照。

Git

Git Graph

Extension for Visual Studio Code - View a Git Graph of your repository, and perform Git actions from the graph.

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

GitLens

Extension for Visual Studio Code - Supercharge Git within VS Code — Visualize code authorship at a glance via Git blame annotations ...

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

HTML/CSS

Auto Rename Tag

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

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

Python

autoDocstring – Python Docstring Generator

Extension for Visual Studio Code - Generates python docstrings automatically

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

CSV

Edit csv

Extension for Visual Studio Code - extension to edit csv files with a table ui

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

Rainbow CSV

Extension for Visual Studio Code - Highlight CSV and TSV files, Run SQL-like queries

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

その他・Tips

ワークスペースで推奨の拡張機能を追加

.vscode/extensions.json ファイルを作成する。

.vscode/extensions.json

{
  "recommendations": [
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "streetsidesoftware.code-spell-checker"
  ]
}

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

.devcontainer/devcontainer.jsonextensions に記述しておくと、コンテナ作成時にインストールされる。

.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"
  ],

元記事はこちら

【随時更新】自分用VSCode拡張機能まとめ
著者:@danishi