拡張機能 (Extensions) [VSCode]

拡張機能

ストア：

Extensions for Visual Studio Family of Products | Visual Studio Marketplace [Official]

使い方

ドキュメント：

Install Extension | Visual Studio Code Documentation

参考：

拡張機能をインストール／削除する方法と、有効／無効を切り替える方法 | BLOG AND DESTROY

インストール場所

拡張機能は特に指定しなかった場合、ユーザーフォルダの下の .vscode/extensions 内にインストールされる。

Windows: %USERPROFILE%\.vscode\extensions
macOS: ~/.vscode/extensions
Linux: ~/.vscode/extensions

%USERPROFILE% は通常、C:\Users\[User Name] フォルダが割り当てられている。

ドキュメント：

Where are extensions installed? | Visual Studio Code [Official]

参考：

Is there a way to change the extensions folder location for Visual Studio Code? – Stack Overflow

In which path does Visual Studio Code install extensions? – Stack Overflow

How can I find the folder of the theme I’m using in VS Code – Stack Overflow

一覧を作成する

参考：

How can you export the Visual Studio Code extension list? – Stack Overflow

アンインストール

参考：

How to uninstall .vsix Visual Studio Extensions? – Stack Overflow

Audio Preview

入手：

Audio Preview | Visual Studio Marketplace [Official]

参考：

sukumo28/vscode-audio-preview: VSCode Extension to Preview and Play WAV File – GitHub

autoDocstring

Python コード内にドキュメント生成用の docstring を自動生成する拡張機能。

入手：

autoDocstring – Python Docstring Generator | Visual Studio Marketplace [Official]

参考：

Visual Studio Code で Python のコメント記述の補助を行う autoDocstring を利用する | MR が楽しい

AutoHotkey Plus Plus

入手：

AutoHotkey Plus Plus | Visual Studio Marketplace [Official]

リポジトリ：

vscode-autohotkey/ahkpp: AutoHotkey Language Support for Visual Studio Code – GitHub

参考：

Support for AHK V2 syntax · Issue #96 · vscode-autohotkey/ahkpp – GitHub

Support AHK v2 · Issue #146 · vscode-autohotkey/ahkpp – GitHub

Fix formatting and syntax highlighting · Issue #123 · vscode-autohotkey/ahkpp – GitHub

AutoHotkey v2 Language Support

入手：

AutoHotkey v2 Language Support | Visual Studio Marketplace [Official]

リポジトリ：

thqby/vscode-autohotkey2-lsp: AutoHotkey v2 Language Support Using vscode-lsp – GitHub

Background Cover

入手：

Background Cover | Visual Studio Marketplace [Official]

リポジトリ：

AShujiao/vscode-background-cover – GitHub

参考：

VSCode に背景画像を設定する方法／固定表示もランダム表示も可能 | UPDATE

Better Comments

入手：

Better Comments | Visual Studio Marketplace [Official]

参考：

Better Comments を使いこなす – Qiita

Better Comments – コメントを色分けして管理する | Webrandum

Better Comments の使い方／設定方法／コードコメントの色分け表示 | Python でプログラムを作りたい！

Blockman

入手：

Blockman – Highlight Nested Code Blocks | Visual Studio Marketplace [Official]

リポジトリ：

leodevbro/vscode-blockman: VSCode Extension to Highlight Nested Code Blocks – GitHub

Bookmarks

操作

Ctrl + Alt + K：カーソル位置にブックマークを追加／削除する

入手：

Bookmarks | Visual Studio Marketplace [Official]

リポジトリ：

alefragnani/vscode-bookmarks: Bookmarks Extension for Visual Studio Code – GitHub

参考：

Bookmarks | 開発覚書

Bookmarks が便利 | IT ガイド

Bookmarks – ブックマーク機能はやっぱり快適ですね | techback

Bracket Pair Colorizer 2

**DEPRECATED**

入手：

Bracket Pair Colorizer 2 | Visual Studio Marketplace [Official]

参考：

メンテナンスされなくなった Bracket Pair Colorizer 2 から VS Code に標準搭載の括弧記号色付け機能に乗り換えよう | DevelopersIO

VSCode の拡張機能 Bracket Pair Colorizer 2 はもう使うな！ | dotTrail

C / C++

Extension Pack

次の4つの拡張機能をまとめてインストールするパック

入手：

C / C++ | Visual Studio Marketplace [Official]

C / C++ Extension Pack | Visual Studio Marketplace [Official]

リポジトリ：

microsoft/vscode-cpptools: Official Repository for the Microsoft C / C++ Extension for VSCode – GitHub

ドキュメント：

C / C++ | Visual Studio Code [Official]

C / C++ Themes

入手：

C / C++ Themes | Visual Studio Marketplace [Official]

CMake Tools

入手：

CMake Tools | Visual Studio Marketplace [Official]

ドキュメント：

Get Started with CMake Tools on Linux | Visual Studio Code [Official]

リンク：

How To – microsoft/vscode-cmake-tools – GitHub

Frequently Asked Questions – microsoft/vscode-cmake-tools – GitHub

Documentation – microsoft/vscode-cmake-tools – GitHub

Code-EOL

入手：

Code-EOL | Visual Studio Marketplace [Official]

Code Runner

操作

Ctrl + Alt + N：開いているファイルをコードランナーで実行する

設定

コマンドをターミナルで実行するように設定する。

{
    // ...
    "code-runner.runInTerminal": true,
    // ...
}

入手：

Code Runner | Visual Studio Marketplace [Official]

リポジトリ：

formulahendry/vscode-code-runner: Code Runner – GitHub

参考：

Code Runner を使いこなす – Qiita

Code Runner を使ってショートカットキーで実行する | 可茂 IT 塾

Code Runner を使う | yokuaru Tech notes

Code Spell Checker

入手：

Code Spell Checker | Visual Studio Marketplace [Official]

参考：

Code Spell Checker を導入して typo と戦う – Qiita

Code Spell Checker を導入して typo で4時間溶けないようにした | 北山淳也

Color Highlight

入手：

Color Highlight | Visual Studio Marketplace [Official]

Color Info

入手：

Color Info | Visual Studio Marketplace [Official]

参考：

Color Info で CSS / SCSS の16進数カラーコードを RGB にかんたん変換 | 教えて！おねだーりん

Color Picker

操作

Alt + C → P：カラーピッカーダイアログを開く

入手：

Color Picker | Visual Studio Marketplace [Official]

リポジトリ：

anseki/vscode-color: Helper with GUI to generate color codes such as CSS color notations – GitHub

Compare Folders

入手：

Compare Folders | Visual Studio Marketplace [Official]

リポジトリ：

moshfeu/vscode-compare-folders: The source code of the extension Compare Folders – GitHub

参考：

VSCode でフォルダ丸ごと比較する | amateur engineer’s blog

Compare Folders – a Visual Studio Code Extension Journey #1 | Mosh Feu

Compare Folders – a Visual Studio Code Extension Journey #2 | Mosh Feu

Compare Folders – a Visual Studio Code Extension Journey #3 | Mosh Feu

is there a compare folders feature in VS Code? – Stack Overflow

Custom CSS and JS Loader

設定

{
    // ...
    "vscode_custom_css.imports": [
        "file:///C:/Users/[User Name]/.vscode/css/custom.css"
    ],
    // ...
}Code language: JSON / JSON with Comments (json)

入手：

Custom CSS and JS Loader | Visual Studio Marketplace [Official]

リポジトリ：

be5invis/vscode-custom-css: Custom CSS Plugin for Visual Studio Code – GitHub

参考：

ファイルエクスプローラーのツリーを見やすくする – Qiita

SynthWave ’84 – ネオンサイン風テーマで VScode を彩る – Qiita

複数ファイルを開いている時にタブを多段表示する方法 | Masuyama

エクスプローラペインのフォントを変える | Neo’s World

「萌え仕様」にする！ | ミニマムオプスの小屋

開発しやすいようにカスタマイズ | Narumium Blog

Extension loads and does nothing · Issue #138 · be5invis/vscode-custom-css – GitHub

import custom CSS and JS extension – Stack Overflow

Customize UI

※ VSCode v1.74 以降では動作しない。

入手：

Customize UI | Visual Studio Marketplace [Official]

リポジトリ：

iocave/customize-ui: UI Customization Plugin for VSCode – GitHub

参考：

Customize UI 拡張機能を使ったお気楽 VSCode UI Tweak – Qiita

UI を CSS で修正する | smallStall

Annoucement: Customize UI is probably not going to work anymore · Issue #156 · iocave/customize-ui – GitHub

VScode doesn’t launch when apply monkey patch · Issue #157 · iocave/customize-ui – GitHub

My VSCode cannot open the page after enabling the customize UI · Issue #159 · iocave/customize-ui

Monkey path not loading in VSCode 1.74.0 · Issue #55 · iocave/monkey-patch – GitHub

After enabling monkey patch my VSCode is not visible anymore on macOS · Issue #56 · iocave/monkey-patch – GitHub

1.74 Intentionally Breaks Monkeypatch + CustomizeUI · Issue #1390 · VSCodium/vscodium – GitHub

CharacterCount

入手：

CharacterCount | Visual Studio Marketplace [Official]

リポジトリ：

8amjp/vsce-charactercount: CharacterCount – GitHub

参考：

VSCode で拡張機能なしで文字数を確認する方法 | マゴトログシュミニイキル

Debug Visualizer

入手：

Debug Visualizer | Visual Studio Marketplace [Official]

参考：

Visualize Data Structures in VSCode | AddyOsmani.com

Diff Folders

入手：

Diff Folders | Visual Studio Marketplace [Official]

リポジトリ：

L13/vscode-diff: Compare two folders in Visual Studio Code – GitHub

Error Lens

入手：

Error Lens | Visual Studio Marketplace [Official]

参考：

Error Lens でエラーを見やすく | sqer

Error Lens | 開発覚書

Fix VSCode Checksums

入手：

Fix VSCode Checksums | Visual Studio Marketplace [Official]

GhostText

動画：

Demo (Federico Brigante)

公式サイト：

GhostText – Use Your Text Editor in the Browser [Official]

入手：

GhostText | Chrome ウェブストア [公式]

GhostText Official | Visual Studio Marketplace [Official]

~~GhostText | Visual Studio Marketplace [Official]~~

リポジトリ：

fregante/GhostText – GitHub

fregante/GhostText-for-VSCode – GitHub

jtokoph/ghosttext-vscode – GitHub

参考：

Ghost Text – VSCode でテキストエリアに直接入力できる | UWEB

Git Diff and Merge Tool

入手：

Git Diff and Merge Tool | Visual Studio Marketplace [Official]

参考：

What Visual Studio Code extension is good for 3 way merging? – Stack Overflow

Git History

入手：

Git History | Visual Studio Marketplace [Official]

参考：

VSCode 上で git log を見る際に便利な拡張機能 Git History | Lonely Mobiler

gitignore

入手：

gitignore | Visual Studio Marketplace [Official]

参考：

VSCode で gitignore を生成できる拡張機能を導入しとくと便利かも | Lonely Mobiler

GitLens

こちらのページを参照

GitLens の使い方

入手：

GitLens – Git supercharged | Visual Studio Marketplace [Official]

参考：

GitLens | 開発覚書

Git の commit 間の diff をいい感じに見れる。そう、GitLens ならね。 | ねののお庭。

GitLens はいいぞ、という話 | Wyton

GlassIt

入手：

GlassIt-VSC | Visual Studio Marketplace [Official]

リポジトリ：

hikarin522/GlassIt-VSC: VSCode Extension to Set Window to Transparent on Windows Platform – GitHub

参考：

Visual Studio Code の背景を透過する Windows版 – Qiita

背景を透過する方法 | 西住工房

GlassIt-VSC – 背景を透明化 | プログラマーやめました

VSCode の見た目を少しカスタマイズしてみる | うしぶろ

Make VSCode window transparent · Issue #12578 · microsoft/vscode – GitHub

transparent window? – Stack Overflow

HexDump

入手：

HexDump for VSCode | Visual Studio Marketplace [Official]

Hex Editor

入手：

Hex Editor | Visual Studio Marketplace [Official]

リポジトリ：

microsoft/vscode-hexeditor: VS Code Hex Editor – GitHub

参考：

バイナリエディタプラグイン | とんくんソフトウェア技術部

VSCode に Hex Editor が追加された | 閑古鳥

VSCode でバイナリファイルを編集したい – スタック・オーバーフロー

Highlight Matching Tag

入手：

Highlight Matching Tag | Visual Studio Marketplace [Official]

HTML Tag Wrap

Alt + W：選択範囲をタグで囲う

入手：

HTML Tag Wrap | Visual Studio Marketplace

参考：

bgashler1/vscode-htmltagwrap: Wraps a Chunk of HTML Code in Tags – GitHub

参考：

HTML Tag Wrap – ショートカット一発でタグを囲える超便利プラグイン | 株式会社グレイズ

Import Cost

動画：

Review (Code 2020)

入手：

Import Cost | Visual Studio Marketplace [Official]

リポジトリ：

wix/import-cost: Displays the Import Size of the Package You are Importing inside the Code Editor – GitHub

IntelliCode

入手：

IntelliCode | Visual Studio Marketplace [Official]

ドキュメント：

IntelliCode | Microsoft Learn [公式]

参考：

IntelliCode を使ってみよう | JavaScript 勉強会

i18n Ally

入手：

i18n Ally | Visual Studio Marketplace [Official]

リポジトリ：

lokalise/i18n-ally: All in One i18n Extension for VSCode – GitHub

参考：

i18n Without Pain Using This VSCode Extension | Level Up Coding

How to configure `I18n Ally` VsCode plugin to read my locals from one single file? – Stack Overflow

JS & CSS Minifier

**UNMAINTAINED**

入手：

JS & CSS Minifier | Visual Studio Marketplace

リポジトリ：

olback/es6-css-minify: Easily minify CSS and JavaScript in VSCode – GitHub

参考：

VSCode で JavaScript / CSS を圧縮／軽量化する | 己で解決！泣かぬなら己で鳴こうホトトギス

VSCode の拡張機能 JS & CSS Minifier でファイルを圧縮／軽量化する | Free Style

Sass や CSS の縮小をしたいけど gulp や webpack で挫折しそうなときに使う VSCode 拡張機能 | ゆるけー

CSS と JS を VSCode で Minify する方法 | WEBREE

Macros

入手：

Macros | Visual Studio Marketplace [Official]

参考：

exceedsystem/vscode-macros: Macros – GitHub

参考：

VSCode でマクロを実現する方法 | EXCEEDSYSTEM

Markdown All in One

入手：

Markdown All in One | Visual Studio Marketplace [Official]

リポジトリ：

yzhang-gh/vscode-markdown: Markdown All in One – GitHub

Markdown Preview Enhanced

入手：

Markdown Preview Enhanced | Visual Studio Marketplace [Official]

リポジトリ：

shd101wyy/markdown-preview-enhanced: One of the ‘BEST’ Markdown Preview Extensions – GitHub

ドキュメント：

Documentation | Markdown Preview Enhanced

Merge-n-Paste

入手：

Merge-n-Paste | Visual Studio Marketplace [Official]

参考：

Merge-n-Paste – 比較／マージして貼り付ける拡張機能 – Qiita

Minify All

入手：

MinifyAll | Visual Studio Marketplace [Official]

参考：

How to Automatically Minify the Code of Your Web Site in VSCode | Adel Benyahia

Monkey Patch

入手：

Monkey Patch | Visual Studio Marketplace [Official]

リポジトリ：

iocave/monkey-patch: Inject Custom JavaScript into VSCode – GitHub

MPEG-4 Preview

※音声は非対応

入手：

MPEG-4 Preview | Visual Studio Marketplace [Official]

Novel Writer

入手：

Novel Writer | Visual Studio Marketplace [Official]

リポジトリ：

ttrace/vscode-language-japanese-novel: Novel Writer – GitHub

One Dark Pro

公式サイト：

One Dark Pro for VSCode

入手：

One Dark Pro | Visual Studio Marketplace [Official]

リポジトリ：

Binaryify/OneDark-Pro: Atom’s iconic One Dark theme for Visual Studio Code – GitHub

Open in Application

入手：

Open in Application | Visual Studio Marketplace [Official]

リポジトリ：

fabiospampinato/vscode-open-in-application: Open an Arbitrary File in its Default App, or the App You Want – GitHib

参考：

how to make local file link open default program – Stack Overflow

Partial Diff

入手：

Partial Diff | Visual Studio Marketplace [Official]

参考：

Partial Diff – VSCode で選択した文字列同士を比較できる拡張機能 | Lonely Mobiler

Path Intellisense

入手：

Path Intellisense | Visual Studio Marketplace [Official]

リポジトリ：

ChristianKohler/PathIntellisense: Visual Studio Code Plugin that Autocompletes Filenames – GitHub

Prettier

こちらのページを参照

Prettier の使い方

入手：

Prettier – Code Formatter | Visual Studio Marketplace [Official]

リポジトリ：

prettier/prettier-vscode: Visual Studio Code extension for Prettier – GitHub

参考：

VSCode に Prettier 入れてますか？ | サーバーワークスエンジニアブログ

Prettier の使い方 & おすすめ設定を紹介 | 株式会社マーベリックス

Prettier 拡張機能を使ってコードを自動フォーマット | SMART

保存時に Prettier の自動フォーマットが効かなくなった件 | かもメモ

Visual Studio Code で Prettier のフォーマット機能を言語単位で無効にする | DevelopersIO

Prettier をアップデートしたら言語単位でのフォーマット無効設定が動作しなくなったので対処した話 | DevelopersIO

VSCode の拡張機能 Prettier でソースコードを整形する | bnote

Python

入手：

Python | Visual Studio Marketplace [Official]

ドキュメント：

Get Started Tutorial for Python | Documentation for Visual Studio Code [Official]

参考：

VSCode で Python 3 の実行 – Qiita

Relative Path

入手：

Relative Path | Visual Studio Marketplace [Official]

リポジトリ：

jakob101/RelativePath: Relative Path Plugin for Visual Studio Code – GitHub

参考：

Markdown file path complete in VSCode – Stack Overflow

Remote WSL

入手：

Remote WSL | Visual Studio Marketplace [Official]

ドキュメント：

Developing in the Windows Subsystem for Linux | Documentation for Visual Studio Code [Official]

参考：

VSCode の Remote WSL で WSL を快適に使う – Qiita

VScode の新機能で WSL 上にローカル開発環境を構築する – Qiita

VSCode Remote WSL で Python 開発環境構築 – Qiita

WSL とファイルパーミッションと VSCode の話 | Goryudyuma’s blog

REST Client

入手：

REST Client | Visual Studio Marketplace [Official]

参考：

REST API のテストに Postman 使ってたけど Visual Studio Code の REST Client に乗り換えた | かずきの Blog

Rubberduck

動画：

Demo (Lars Grammel)

入手：

Rubberduck – ChatGPT for Visual Studio Code | Visual Studio Marketplace [Official]

リポジトリ：

rubberduck-ai/rubberduck-vscode: Use AI-Powered Code Edits, Explanations, Code Generation, Error Diagnosis, and Chat in Visual Studio Code with the Official OpenAI API – GitHub

参考：

Introducing Rubberduck: AI Chat in Visual Studio Code (Lars Grammel) | CodeX

Search Editor Apply Changes

入手：

Search Editor Apply Changes | Visual Studio Marketplace [Official]

リポジトリ：

JacksonKearl/vscode-search-editor-apply-changes: Apply Local Search Editor Edits to Your Workspace – GitHub

Todo Plus

入手：

Todo Plus | Visual Studio Marketplace [Official]

リポジトリ：

fabiospampinato/vscode-todo-plus: Manage Todo Lists with Ease. Powerful, Easy to Use and Customizable – GitHub

参考：

VSCode でタスク管理 | Reincarnation Tech

Todo Tree

入手：

Todo Tree | Visual Studio Marketplace [Official]

参考：

Todo Tree が良かった話 – Qiita

Todo Tree – ToDo 検索できる拡張／忘れないうちに ToDo を残そう | ポジTA

Todo Tree の使い方／Todo コメントのツリービュー化 | Python でプログラムを作りたい！

Todo Tree – ToDo コメントを一覧で表示する拡張機能 | Webrandum

Trailing Spaces

入手：

Trailing Spaces | Visual Studio Marketplace [Official]

リポジトリ：

shardulm94/vscode-trailingspaces: A VSCode Extension that Allows You to Highlight Trailing Spaces and Delete Them in a Flash! – GitHub

Vibrancy

入手：

Vibrancy | Visual Studio Marketplace [Official]

リポジトリ：

EYHN/vscode-vibrancy: Enable Acrylic/Glass effect for your VS Code – GitHub

参考：

Mouse dragging lag and solution · Discussion #80 · EYHN/vscode-vibrancy – GitHub

Resize to smallest window bug in VS Code 1.57 · Issue #109 · EYHN/vscode-vibrancy – GitHub

try remove / electron.screen.getDisplayMatching(basisBounds).scaleFactor (Shir0ha) – Issue #109 · EYHN/vscode-vibrancy

VSCode Icons

入手：

VSCode Icons | Visual Studio Marketplace [Official]

リポジトリ：

vscode-icons/vscode-icons: Icons for Visual Studio Code – GitHub

Whitespace+

コマンドパレットから「Whitespace+ Config」を選択すると、設定ファイルの編集が行える。

入手：

Whitespace+ | Visual Studio Marketplace [Official]

参考：

VSCode でドキュメントの空白文字を見やすくしてみる – Qiita

VSCode で半角スペースでも全角スペースでもないスペースを可視化する – Qiita

Zenkaku

全角スペースを可視化する。

入手：

Zenkaku | Visual Studio Marketplace [Official]

参考：

VSCode の拡張機能 Zenkaku を起動時から適用 | 戯れ言葉

Zenkaku-Hankaku

入手：

Zenkaku-Hankaku | Visual Studio Marketplace [Official]

リポジトリ：

mo-san/Zenkaku-Hankaku: 全角と半角を変換する拡張機能 – GitHub

参考：

全角と半角を変換する操作方法 | 超初心者ホームページ作成ナビ

タスク管理

参考：

おすすめ Todo / FixMe 系拡張機能 | Useful Edge

まとめ

オススメ拡張機能 24選と Tips をいくつか – Qiita

必ず入れておきたい拡張機能 – Qiita

僕が思うとても便利なプラグインたち – Qiita

VSCode を使いこなせ！フロントエンジニア必須の拡張機能 7選 | ICS MEDIA

拡張機能まとめ 25選!! | Masumi Morishige

使ってる拡張機能のまとめ | catnose

Unity プログラミングしてる僕が入れてる拡張機能 – Qiita

おすすめ拡張機能 #1 – Qiita

おすすめ拡張機能 | PY BLOG

おすすめ拡張機能 | OKSHOG

おすすめ拡張機能をジャンル別に紹介 | Web-Guided

おすすめ拡張機能まとめ | ホムペディア

絶対にオススメできる拡張機能 10連発 | kannart WEB HACKS

HTML 書くときに VSCode で使っているあれやこれ – Qiita

警告表示のための拡張機能を使って学びの速度を上げよう | ultra code

おすすめ拡張機能 #4 | Baapuro Project

記事をシェアする：