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として設定されています。
Path Intellisense
ファイルパスを自動で補完してくれる拡張機能です。
imgタグのsrcでファイルを探す時にファイルを自動検索できるようになります。
Prettier - Code formatter
HTMLコードなどをきれいにFormat（コード整形）できるようになります。
インストール後、VSCodeに以下設定します。
- 保存時にコード自動整形するように設定する
- で検索する。
- ONにする
- Default FormatterをPrettierに設定する
- で検索する。
- ONにする
[宣伝] GASプログラミング入門の教材 - Udemy
- 2025年3月時点で、約3,400人の受講生を獲得し、「Udemy Business」に選定されてます。
- 「Udemy Business」とは、Udemyが「企業研修」向けに提供しているサービスのことです。
- Udemyで販売している全ての講座の中から、「企業研修」に提供できる高品質な講座をレビューや内容を加味して厳選していることが特徴のサービスです。
- その「Udemy Business」で、このGAS講座は採用されております。
- 教材の詳細は、以下のUdemyに記載しておりますので内容ご確認ください
- 以下のバナーから購入すると、通常、定価27,800円が1,800円に割引される特別クーポンが適用されます！
- 有効期限は、です。