拡張機能

ストア:

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

使い方

参考:

拡張機能をインストール/削除する方法と、有効/無効を切り替える方法 | 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 が楽しい

Background Cover

入手:

Background Cover | Visual Studio Marketplace [Official]

リポジトリ:

AShujiao/vscode-background-cover – GitHub

参考:

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

Blockman

入手:

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

リポジトリ:

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

Bookmarks

入手:

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++

入手:

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

リポジトリ:

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

ドキュメント:

C++ Programming | Visual Studio Code [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

Color Picker

Alt + CPカラーピッカーダイアログを開く

入手:

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

参考:

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

Customize UI

入手:

Customize UI | Visual Studio Marketplace [Official]

リポジトリ:

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

参考:

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

VSCode の UI を CSS で修正する | smallStall

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 – 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]

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

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]

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 – 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

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

まとめ

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

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

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

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

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

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

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

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

おすすめ拡張機能 | PY BLOG

おすすめ拡張機能 | OKSHOG

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

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

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

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

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

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

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA