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. で検索する。
    2. ONにする
    3. 保存時にコードを自動整形する設定
      保存時にコードを自動整形する設定
  1. Default FormatterをPrettierに設定する
    1. で検索する。
    2. ONにする
    3. Default FormatterをPrettierにする設定
      Default FormatterをPrettierにする設定

[宣伝] GASプログラミング入門の教材 - Udemy

  • 2023年11月時点で、約3,000人の受講生を獲得し、「Udemy Business」に選定されてます。
    • 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
    • Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
    • その「Udemy Business」で、このGAS講座は採用されております。
  • 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
    • 以下のバナーから購入すると、通常、定価27,800円が1,500円に割引される特別クーポンが適用されます!
    • 有効期限は、です。

関連ブログ