拡張機能 (Extensions) [VSCode]

Extensions

参考：

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

拡張機能をインストールする

参考：

Install Extension | Visual Studio Code Documentation (vscode-docs.readthedocs.io)

インストールされる場所

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

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

%USERPROFILE% は通常、C:\Users\[User Name] ディレクトリが割り当てられている。

参考：

Where are extensions installed? | Documentation for 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

Code Compare

参考：

Code Compare – File Diff & File Merge Tool, Folder Compare Tool [Official]

Code Compare | Visual Studio Marketplace [Official]

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

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

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 – Git supercharged | Visual Studio Marketplace [Official]

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

GitLens | 開発覚書はてな版 (kakkoyakakko2.hatenablog.com)

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

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

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

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

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

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

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 に HexEditor が追加された | 閑古鳥

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

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]

Introduction | Markdown Preview Enhanced (shd101wyy.github.io)

shd101wyy/markdown-preview-enhanced: One of the ‘BEST’ markdown preview extensions for Atom editor! – GitHub

merge-n-paste

参考：

merge-n-paste | Visual Studio Marketplace [Official]

比較・マージして貼り付ける拡張機能 merge-n-paste – Qiita

One Dark Pro

参考：

One Dark Pro | Visual Studio Marketplace [Official]

One Dark Pro for VS Code (binaryify.github.io)

Binaryify/OneDark-Pro: Atom’s iconic One Dark theme for Visual Studio Code – 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]

VS code で python3 の実行 – Qiita

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

Python Docstring Generator (autoDocstring)

参考：

Python Docstring Generator | Visual Studio Marketplace [Official]

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

Remote WSL

参考：

Remote WSL | Visual Studio Marketplace [Official]

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

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

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

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

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

REST Client

参考：

REST Client | Visual Studio Marketplace [Official]

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

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]

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

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

zenkaku

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

参考：

zenkaku | Visual Studio Marketplace [Official]

VSCode の拡張機能 zenkaku を起動時から適用 | 戯れ言葉 (blgid1974.blog.fc2.com)

まとめ

参考：

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

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

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

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

VSCode のおすすめ拡張機能 その1 – Qiita

おすすめ拡張機能 | OKSHOG

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

言語別、おすすめ拡張機能 19選！拡張機能でストレスフリーなエディターを作ろう！| Skillhub

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

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

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

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