拡張機能 (Extensions) [VSCode]

{
    // ...
    "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]

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]

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

入手：

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

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 を起動時から適用 | 戯れ言葉

タスク管理

参考：

おすすめ 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

記事をシェアする：

拡張機能

使い方

インストール場所

一覧を作成する

アンインストール

Audio Preview

autoDocstring

AutoHotkey Plus Plus

AutoHotkey v2 Language Support

Background Cover

Better Comments

Blockman

Bookmarks

Bracket Pair Colorizer 2

C / C++

Extension Pack

C / C++ Themes

CMake Tools

Code-EOL

Code Spell Checker

Color Highlight

Color Info

Color Picker

Compare Folders

Custom CSS and JS Loader

設定

Customize UI

CharacterCount

Debug Visualizer

Diff Folders

Error Lens

Fix VSCode Checksums

Git Diff and Merge Tool

Git History

gitignore

GitLens

GlassIt

HexDump

Hex Editor

Highlight Matching Tag

Import Cost

IntelliCode

i18n Ally

JS & CSS Minifier

Macros

Markdown All in One

Markdown Preview Enhanced

Merge-n-Paste

Monkey Patch

MPEG-4 Preview

Novel Writer

One Dark Pro

Open in Application

Partial Diff

Path Intellisense

Prettier

Python

Relative Path

Remote WSL

REST Client

Rubberduck

Search Editor Apply Changes

Todo Plus

Todo Tree

Trailing Spaces

Vibrancy

VSCode Icons

Whitespace+

Zenkaku

タスク管理

まとめ

関連記事

デバッグする方法 [VSCode]

VSCodium

Language Server Protocol

タスクの使い方 [VSCode]

API の使い方 [VSCode]

チュートリアル [Visual Studio Code]

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル