あると便利なVSCodeの拡張機能6選【Web系】

VScodeであると便利な拡張機能を知りたいですか？

本記事では、僕が使っている便利なWeb系開発向けVSCodeの拡張機能を6つ紹介します。

開発がかなりスムーズに進められるようになるので、ぜひご覧ください。

あると便利なVSCodeの拡張機能6選

Live Server

オートリロードしてくれる拡張機能です。

Web系の開発やっている方ならぜひ使いたいやつ。

特にデュアルディスプレイとか使ってると、いちいちF5押しに行かなくていいという点でかなりパフォーマンスがいい。

この拡張と、一個下のSassコンパイラと組み合わせると最強。

Live Sass Compiler

とても便利なSassのコンパイラ。

機能としては、

• CSSの圧縮
• ベンダープレフィックスの自動付与
• 常時監視

などを持っています。

この常時監視と、上のLive Serverとを組み合わせると、scssを変えてすぐに変更が反映されるためとても便利です。

また、圧縮やベンダープレフィックスも自動でやってくれるかなり優れた拡張機能です。

Web系やってる方はほんとにおすすめです。

Japanese Language Pack

日本語化の拡張機能です。

Colonize

まあまあ便利な拡張です。

行末へのセミコロンの自動挿入と改行を同時に行ってくれます。

これに関してはWeb系だけでなく、幅広い言語に対応できます。

使い方は、

• Shift + Enter → 行末にセミコロン、改行しない
• Alt + Enter → 行末セミコロンと改行
• Ctrl + Alt + Enter → その場にセミコロン

Bracket Pair Colorizer 2

括弧の対応が見やすくなる拡張です。

括弧の色が変わります。

結構見やすくなるので、便利です。

Auto Rename Tag

これがかなり便利です。

タグを変更すると、終了タグまで自動で同じ文字に変更してくれるという優れものです。

これを知るまで、開始タグを変更した後終了タグを手動で変えてましたが、圧倒的に時間ロスでした。

HTML使う人は絶対入れるべきですね。

まとめ

僕が使っているVSCodeの拡張機能をまとめました。

便利なものばかりなので、ぜひ使ってみてくださいね。