拡張機能 (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

参考：

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 の使い方

入手：

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 の使い方

入手：

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

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

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

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

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

記事をシェアする：

拡張機能

使い方

インストール場所

一覧を作成する

アンインストール

Audio Preview

autoDocstring

Background Cover

Blockman

Bookmarks

Bracket Pair Colorizer 2

C / C++

code-eol

Code Spell Checker

Color Highlight

Color Info

Color Picker

Compare Folders

Custom CSS and JS Loader

設定

Customize UI

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

i18n Ally

JS & CSS Minifier

Markdown All in One

Markdown Preview Enhanced

Merge-n-Paste

Monkey Patch

MPEG-4 Preview

One Dark Pro

Open in Application

Partial Diff

Path Intellisense

Prettier

Python

Relative Path

Remote WSL

REST Client

Trailing Spaces

Vibrancy

VSCode Icons

Whitespace+

Zenkaku

まとめ

関連記事

デバッガーの使い方 [Visual Studio]

Tips [Visual Studio]

Photon

基本的な操作 [Visual Studio]

日本語化／翻訳 [VSCode]

テンセント (Tencent)

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

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