拡張機能
公式サイト：
Extensions for Visual Studio Family of Products | Visual Studio Marketplace [Official]
目次
- 1 使い方
- 2 インストール場所
- 3 一覧を作成する
- 4 アンインストール
- 5 Audio Preview
- 6 autoDocstring
- 7 Blockman
- 8 Bracket Pair Colorizer 2
- 9 code-eol
- 10 Code Spell Checker
- 11 Color Highlight
- 12 Color Info
- 13 Color Picker
- 14 Compare Folders
- 15 Custom CSS and JS Loader
- 16 Debug Visualizer
- 17 Diff Folders
- 18 Error Lens
- 19 Fix VSCode Checksums
- 20 Git Diff and Merge Tool
- 21 Git History
- 22 gitignore
- 23 GitLens
- 24 GlassIt-VSC
- 25 hexdump for VSCode
- 26 Hex Editor
- 27 Highlight Matching Tag
- 28 JS & CSS Minifier
- 29 Markdown All in One
- 30 Markdown Preview Enhanced
- 31 merge-n-paste
- 32 MPEG-4 Preview
- 33 One Dark Pro
- 34 Open in Application
- 35 Path Intellisense
- 36 Prettier
- 37 Python
- 38 Relative Path
- 39 Remote WSL
- 40 REST Client
- 41 Vibrancy
- 42 vscode-icons
- 43 Whitespace+
- 44 zenkaku
- 45 まとめ
使い方
参考：
拡張機能をインストール／削除する方法と、有効／無効を切り替える方法 | BLOG AND DESTROY
Install Extension | Visual Studio Code Documentation
インストール場所
拡張機能は特に指定しなかった場合、ユーザーディレクトリの下の .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 が楽しい
Blockman
入手：
Blockman – Highlight Nested Code Blocks | Visual Studio Marketplace [Official]
リポジトリ：
leodevbro/vscode-blockman: VSCode Extension to Highlight Nested Code Blocks – GitHub
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
code-eol
入手：
code-eol | Visual Studio Marketplace [Official]
Code Spell Checker
入手：
Code Spell Checker | Visual Studio Marketplace [Official]
参考：
VSCode に Code Spell Checker を導入して typo と戦う – Qiita
VSCode に 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
入手：
Custom CSS and JS Loader | Visual Studio Marketplace [Official]
リポジトリ：
be5invis/vscode-custom-css: Custom CSS Plugin for Visual Studio Code – GitHub
参考：
VSCode のファイルエクスプローラーの tree を見やすくする – Qiita
SynthWave ’84 – ネオンサイン風テーマで VScode を彩る – Qiita
複数ファイルを開いている時にタブを多段表示する方法 | Masuyama
VSCode のエクスプローラペインのフォントを変える | Neo’s World
VSCode を”萌え仕様”にする！ | ミニマムオプスの小屋
VSCode を開発しやすいようにカスタマイズ | Narumium Blog
Extension loads and does nothing · Issue #138 · be5invis/vscode-custom-css – GitHub
visual studio code import custom css and js extension – Stack Overflow
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]
参考：
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 – Git supercharged | Visual Studio Marketplace [Official]
参考：
VSCode-GitLens はいいぞ、という話 | Wyton
git の commit 間の diff をいい感じに見れる。そう、gitlens ならね | ねののお庭。
GlassIt-VSC
入手：
GlassIt-VSC | Visual Studio Marketplace [Official]
リポジトリ：
hikarin522/GlassIt-VSC: VS Code 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 for VSCode
入手：
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]
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
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
MPEG-4 Preview
※音声は非対応
入手：
MPEG-4 Preview | Visual Studio Marketplace [Official]
One Dark Pro
公式サイト：
入手：
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]
リポジトリ：
参考：
how to make local file link open default program – Stack Overflow
Path Intellisense
入手：
Path Intellisense | Visual Studio Marketplace [Official]
リポジトリ：
ChristianKohler/PathIntellisense: Visual Studio Code Plugin that Autocompletes Filenames – GitHub
Prettier
入手：
Prettier – Code Formatter | Visual Studio Marketplace [Official]
リポジトリ：
prettier/prettier-vscode: Visual Studio Code extension for Prettier – GitHub
参考：
VSCode に Prettier 入れてますか？ | サーバーワークスエンジニアブログ
VSCode の拡張機能 Prettier でソースコードを整形する | bnote
Prettier の使い方 & おすすめ設定を紹介 | 株式会社マーベリックス
Prettier 拡張機能を使ってコードを自動フォーマット | SMART
保存時に Prettier の自動フォーマットが効かなくなった件 | かもメモ
Visual Studio Code で Prettier のフォーマット機能を言語単位で無効にする | DevelopersIO
Prettier をアップデートしたら言語単位でのフォーマット無効設定が動作しなくなったので対処した話 | DevelopersIO
Python
入手：
Python | Visual Studio Marketplace [Official]
ドキュメント：
Get Started Tutorial for Python | Documentation for Visual Studio Code [Official]
参考：
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
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
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 を起動時から適用 | 戯れ言葉
まとめ
参考：
VSCode のオススメ拡張機能 24選と Tips をいくつか – Qiita
僕が思うとても便利な VSCode プラグインたち – Qiita
VSCode を使いこなせ！フロントエンジニア必須の拡張機能 7選 | ICS MEDIA
拡張機能まとめ 25選!! | Masumi Morishige
使ってる VSCode の拡張機能のまとめ | catnose
VSCode で Unity プログラミングしてる僕が入れてる拡張機能 – Qiita
VSCode のおすすめ拡張機能をジャンル別に紹介 | Web-Guided
言語別おすすめ拡張機能 19選！ 拡張機能でストレスフリーなエディターを作ろう！ | Skillhub
絶対にオススメできる Visual Studio Code 拡張機能 10連発 | kannart WEB HACKS