制作ツール PR

現役コーダーがオススメするVSCode拡張機能紹介

VS code
記事内に商品プロモーションを含む場合があります

VSCodeのオススメ拡張機能紹介

最近、SublimeTextからVSCodeを使い始めたので、現在使用しているオススメ拡張機能を紹介します。
SassもGulpとか使わずコンパイルできたりするので、便利だね、VSCode!

Auto Close Tag

タグを自動で閉じてくれる拡張機能。
開始タグを書き終わると同時に、終了タグが自動補完してくれます。

Auto Rename Tag

タグを変更する際に開始タグを編集するととじタグも自動で編集してくれる拡張機能。

CSSTree validator

CSSの構文チェックを行ってくれる拡張機能。

HTML Preview

HTMLをリアルタイムプレビューしてくれます。
Dwであるやつです!

HTMLHint

HTMLのデバッ具を行う拡張機能。

IntelliSense for CSS class names in HTML

入力候補の表示やかっこの自動挿入をしてくれる拡張機能。

Japanese Language Pack for Visual Studio Code

vscodeの日本語化するための拡張機能。

Live Sass Compiler

Sassをコンパイルするための拡張機能。
簡単にSassをコンパイルできる。

Live Server

VS Codeに簡易ローカルサーバを立てることができる拡張機能。

Path Autocomplete

ファイルパスを入力する際に候補となるファイル名が一覧で表示する拡張機能。

Prettier – Code formatter

HTMLやJSなどルールに従って整形することができる。

vscode-icons

アイコンがついて見やすくなる。

Insert <br> Tag

「Shift + Enter」で改行タブを挿入できるプラグイン。
地味に便利!
改行入れるのにわざわざ入力するのがめんどくさかったから入れておくと便利です。
Dwのデフォルトのあの機能!!

EJS language support

EJSを使っているユーザーは必須!
VSCodeはデフォルトでEJSをサポートしていないので、対応させる。

また面白そうな拡張機能があれば紹介します。
オススメがあれば是非教えてください!

ABOUT ME
シラツキ
Web制作会社で働くフロントエンドエンジニア(コーダー)。 ココナラでもお仕事募集しております。 HTML,CSS,JS,WordPress,EC-CUBE,Next.jsなど制作に役立つ情報を発信していきます。 webサイトの運営、修正、制作などお仕事も募集中! お気軽にご相談ください。