Skip to main content

Visual Studio Codeの拡張機能

ここでは私が使用しているVisual Studio Codeの拡張機能についてまとめました． これは備忘録も兼ねていて、試したものの利用していない拡張機能についてもメモ程度に記録しています． 言語や言語サーバーの拡張機能については割愛．

開発​

Code Runner​

ファイルの中にプログラムを埋め込んで、それを実行するときに利用しています． デフォルトは python に設定しておいて、それ以外は実行時に選択しています． Markdownなどでちょっとした計算やプログラムを書いておいて、Code Runnerで実行するといった使い方ができて、一種のノートブックのような感じで使うこともできます．

Code Spell Checker​

スペルチェッカーです．ただし、現在は無効にしていて代わりに typos を使っています． ただ、typos よりノイズは多いかわりにスペルミスもtyposより検出してくれるので、通常は typos で、定期的に Code Spell Checker (cSpell) でチェックするのがいいかなと思います．（今は基本未使用）

Typos spell checker​

Code Spell Checkerはノイズが多いので、代わりに導入しているスペルチェッカーです． ただ、ノイズが少ない分、スペルミスを検出しないケースもあります．最低限のチェックをする程度で考えていいと思います．

EditorConfig for VS Code​

.editorconfig を有効にするための拡張機能．

Error Lens​

エラーや警告をエディタ内に表示する拡張機能．警告やエラーをしっかり対応しないと画面がひどいことになる．

Fix JSON​

jsonicという構文を使ってJSONを書ける拡張機能．慣れると便利．

Sort JSON objects​

JSONオブジェクトのキーを整列する拡張機能．今は未使用．

JSON Tools​

Pretty/Minifyができる．

GitGraph​

Gitグラフツリーを確認できる拡張機能．

GitLens​

エディタ内で履歴を確認できる拡張機能．基本的には無効にしていて、必要になったら有効にしています．

indent-rainbow​

インデントのネストを色でわかりやすくする拡張機能．（標準でもある程度見やすくなったので今は未使用）

Jupyter​

Jupyter Notebook を扱える拡張機能．

Polyglot Notebooks​

Jupyter Notebook で C# や PowerShell を扱うための拡張機能．

LaTeX Workshop​

LaTeX 文章を書くのに便利な拡張機能．これと TeXLive で快適な TeX執筆環境を構築できる．

PlantUML​

UMLを描画するための拡張機能．

Rainbow CSV​

CSVの列に色をつけてくれる拡張機能．

REST Client​

Visual Studio Codeから手軽にHTTPリクエストをテストできる拡張機能．

TODO Highlight​

TODO や FIXME などをハイライト表示してくれる拡張機能．カスタマイズもできる．（今は未使用）

ToDo Tree​

TODO Highlight をやめて、現在はこちらを導入． ツリービューで確認できるので便利．

全般​

Custom CSS and JS Loader​

Visual Studio Code本体のフォントを変更するために使用． ファイルエクスプーラーやタブ、PROBLEMSパネルなどのフォントを変更しています．

GistPad​

GitHub の Gist を管理できる拡張機能． GistPadのスクラッチノートはシークレット扱いだけど、シークレットGistはプライベートではありません． ですから、検索には引っ掛からないものの外部には公開されている状態なので注意．このスクラッチノート機能の代わりとして Notes を使用．

Font Switcher​

フォントを素早く切り替えられる．プログラム用のフォントと文章を書く時のフォントを切り替えるときに利用．

Notes​

手軽にメモ管理． 他に VSNotes がありますが、こちらはVisual Studio Codeでメモの削除ができないため見送り．また、タグも不要だったので．

Numbered Bookmarks​

番号のついたブックマーク機能．ブックマーク拡張機能は Bookmarks がありますが、こちらはなぜか上手く機能しなかったので、代わりに Numbered Bookmarks を利用しています．

Shortcut Menu Bar​

エディタの右上にカスタムボタンを表示する拡張機能．あらかじめ用意されたボタンと、カスタムボタンを最大10個表示できる． アイコンをいじれないなどの不満はあるものの、ショートカットに追加するほどでもない機能を入れてます．

Simple New File​

ワークスペース内でファイルを作成したり開くときに便利な拡張機能．自動でフォルダを作成してくれる． 似たような拡張機能は多いですが、これが一番シンプルで使いやすい．今は未使用．

Subtitles Editor​

字幕編集の拡張機能．SRT形式の編集や翻訳の機能があって便利．

Whitespace++​

全角の空白をわかりやすくするための拡張機能．

Bracket Select​

括弧やクォート間を選択したいときに便利な拡張機能．とくに文字列を選択したいときに使用．

Control Snippets​

各スニペットの有効・無効を設定できる拡張機能です．ビルトインのスニペットや、特定の拡張機能のスニペットを個別に設定できます． 余計なスニペットを無効にしたいときに使います．

Snippets Manager​

スニペット管理の拡張機能です．複数行のスニペットを作成する場合はこのような拡張機能を使ったほうが管理しやすいです． スニペットの追加・削除・編集や、現在のスニペットの確認もわかりやすいです．

tldraw​

図形を書きたいときに．

Open in External App​

外部アプリケーションで開く機能を追加します．

テキスト校正くん​

日本語の文章をチェックする拡張機能．

Pinit​

特定のフォルダやファイルをピンする機能．お気に入りのようなものです．

Markdown​

Markdown Preview Enhanced​

Markdownプレビュー．数式やMermaidなどサポートしている．また、PDFなどの出力も対応している． とくに重要なのは CSS (less) でカスタマイズすることが簡単なこと．

これ以外だと Microsoft の Learn Preview があります．これは GitHub のシンタックスに似ていることもあってテーマをいじらないのであればこれがいいかも．

標準のMarkdownプレビューは、CSS によるカスタマイズがしづらい．Markdownファイルからの相対パスかWebからのリンクにしか対応していない．検索すると絶対パスでもできるということが書かれているが、現在ではできない．

Markdown Table​

Markdownでの表を書くときに便利な拡張機能．項目を作成してからの表生成や、各セルの移動などがサポートされている．

info

この拡張機能とスニペット機能との相性がとても悪いです．両方とも有効にしていると、表内で次のセルに移動するときにTabキーを押すと、場合によってはスニペットが展開されてしまいます．VS CodeのスニペットはFuzzy検索なので、とても厄介な問題です．とりあえず、Markdownファイルではスニペットを無効にしています．スニペットを使う場合は明示的にスニペット挿入機能を使っています．ショートカットキーに割り当てていればあまり気になりません．ちなみに、私は「Ctrl+J, Ctrl+J」に割り当てています．

Markdownlint​

Markdownのリンター．

Markdown Shortcuts​

Markdown用のショートカットセット．Ctrl+Bなどよく使うものと被るので注意．

Markmap​

Markdownで書いたものをマインドマップのように表示してくれる拡張機能．情報や頭の中を整理するときに便利．

Marp for VS Code​

Marp を使ってスライドを作成する拡張機能．スライドに数式があるなら、かなり楽に作成できる．

Paste Image​

Markdownで画像を挿入する拡張機能．挿入するときの設定が細かくできる．今は未使用．

Table Formatter​

Markdownの表を整形してくれる拡張機能．

自作拡張機能​

vscode-pixy-outline​

関数や目印(MARKS)をアウトラインに表示する拡張機能． 詳しくは 自分用にVSCodeのアウトライン拡張を作ってみました を参照してください．

vscode-pixy-paste-image​

Paste Image をベースにしてカスタマイズしたもの．Paste Image は png形式しか対応していないので、jpg形式で保存できるようにしたこと．また、保存先のフォルダ名にワークスペースフォルダなどの特殊フォルダを指定できるようにしたこと．この2つをサポートしているものが見つからなかったので結局、カスタマイズしました．

Simple New File（フォーク版）​

Simple New Fileをフォークして不具合を修正したバージョン．詳しくは Visual Studio Codeの新規ファイル作成を支援する拡張機能 を参照してください．

その他​

説明が不要なもの．

  • C/C++
  • clangd
  • ClangFormat
  • CodeLLDB
  • Deno
  • Dev Container
  • Docker
  • ES7+ React/Redux/React-Native snippets
  • ESLint
  • Flake8
  • Go
  • Graphviz (dot) language support for Visual Studio Code
  • Graphviz Preview
  • isort
  • Prettier - Code formatter
  • Pretteir ESLint
  • Pylance
  • Python
  • Ruff
  • Mypy
  • Remote - SSH
  • Remote Development
  • Remote Explorer
  • rust-analyzer
  • Shader languages support for Visual Studio Code
  • Tailwind CSS IntelliSense
  • WSL
  • YAML
  • Better TOML

テーマ​

Last updated on