HTML + Tailwind CSS開発おすすめのVSCode拡張機能

Home > TECH BLOG > HTML + Tailwind CSS開発おすすめのVSCode拡張機能
公開日:2022年7月31日 更新日:2022年8月5日
著者:藤澤 勇樹(FUJISAWA Yuki)

1. 記事概要


Tailwind CSS開発にあたって必要なVisual Studio Code(以下、VS Code)の拡張機能(プラグイン)をまとめた記事です。これからTailwind CSSをVS Codeで開発する方のお役に立てれば幸いです。

2. VSCode拡張機能


Tailwind CSS IntelliSense

Tailwind CSSに必須の拡張機能です。
Tailwind CSSのClass名を自動で補完できるようになります。

PostCSS Language Support

Tailwind CSSに必須の拡張機能です
@tailwind、@apply、@screenのようなカスタムCSSを使おうとすると、VSCodeでエラーが発生します。その問題解決としてこの拡張機能をインストールします。

Japanese Language Pack for VS Code

VSCodeメニューなどを日本語化する拡張機能です。

Auto Rename Tag

HTMLの開始タグを修正すると閉じタグも修正できるようになります。

indent-rainbow

インデントごとに違う色がついてインデントが見やすくなります。

IntelliSense for CSS class names in HTML

CSSファイルにあるクラス定義からHTMLのクラスを入力する際に、自動補完してくれる拡張機能です。

Live Server

ライブリロード(ホットリロード)が利用できるようになります。
ライブリロードとは、ファイル修正を素早くブラウザに反映する機能です。

material-icon-theme

ファイルの種類に応じてアイコンを設定してくれます。
例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。

Path Intellisense

ファイルパスを自動で補完してくれる拡張機能です。
imgタグのsrcでファイルを探す時にファイルを自動検索できるようになります。

Prettier - Code formatter

HTMLコードなどをきれいにFormat(コード整形)できるようになります。
インストール後、VSCodeに以下設定します。
  1. 保存時にコード自動整形するように設定する
    1. format on save で検索する。
    2. ONにする
  1. Default FormatterをPrettierに設定する
    1. default formatter で検索する。
    2. ONにする