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

Home > TECH BLOG > HTML + Tailwind CSS開発おすすめのVSCode拡張機能
公開日:2022年7月31日 更新日:2022年8月5日

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として設定されています。
material-icon-themeが適用された画面
material-icon-themeが適用された画面

Path Intellisense

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

Prettier - Code formatter

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

関連ブログ

ブログ一覧