7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2022-11-07

これは

私が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 ファイルを作成する。

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

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

7
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?