VS Code 導入を考えるべき12のエクステンション

Pnyompen
@pnyompen

12 VS Code Extensions you should consider using
元ネタここです

知らないエクステンションもいっぱいあったのでみなさんもぜひ

Visual Studio CodeはWEBエンジニアにとって最も選択される開発統合環境の1つとなりました。
VS Codeでは数千にも及ぶエクステンションを1クリックで導入できます。

この記事は、私が特に便利と感じた12のエクステンションについて紹介します。

もしあなたがまだVS Codeに乗り換えていないなら今が乗り換えどきですよ
ここからダウンロードして無料で乗り換えてくださいね
https://code.visualstudio.com/

Material Theme

有名テーマでAtom,Sublimeなどでも展開されています。
下がテーマを適応したスクリーンショットなのでぜひ比較してみてください

image image

image image

上が標準のレイアウト、下がMaterial Theme

インストールはここから
https://material-theme.site/
Iconもあるからついでにインストールして
https://github.com/PKief/vscode-material-icon-theme

Indent Rainbow

image image

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

Bracket Pair Colorizer

image image

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Highlight Matching Tag

image image

https://github.com/vincaslt/vscode-highlight-matching-tag

Better Comments

image image

* for highlighting
? for questions
! for warnings
TODO for todos
//// for line-through comments
https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

Git Lens

image image

https://github.com/eamodio/vscode-gitlens

WakaTime

image image

https://wakatime.com/
https://github.com/wakatime/vscode-wakatime

Import Cost

image image

https://github.com/wix/import-cost

ESLint & Airbnb JavaScript Style Guide

https://github.com/Microsoft/vscode-eslint
https://github.com/airbnb/javascript

Prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Debugger for Chrome

image image

VS Code Chrome
Debugger and Webpack by Michael Main.

Turbo Console Log

image image

https://github.com/Chakroun-Anas/turbo-console-log

ToDo

  • 気が向いたらちゃんと書く
WRITER
Pnyompen
@pnyompen
SERIES
この記事に連載はありません。
READ NEXT
COMMENTS
コメント機能は開発中です。実装完了まで今しばらくお待ちください。