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

2022/7/31 3:142023/3/7 9:43

Home > TECH BLOG > HTML + Tailwind CSS開発おすすめのVSCode拡張機能

📖

1. 記事概要 2. VSCode拡張機能 Tailwind CSS IntelliSense PostCSS Language Support Japanese Language Pack for VS Code Auto Rename Tag indent-rainbow IntelliSense for CSS class names in HTML Live Server material-icon-theme Path Intellisense Prettier - Code formatter 関連ブログ

公開日：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名を自動で補完できるようになります。

Tailwind CSS IntelliSense - Visual Studio Marketplace

Extension for Visual Studio Code - Intelligent Tailwind CSS tooling for VS Code

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

PostCSS Language Support

Tailwind CSSに必須の拡張機能です。

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

PostCSS Language Support - Visual Studio Marketplace

PostCSS Language Support adds support for modern and experimental CSS within Visual Studio Code. This extension is applied to .css, .pcss and .postcss files. It also applies to the following contexts: HTML elements. Markdown css and pcss code blocks. Marko style blocks when paired with the Marko Syntax Highlighting extension.

https://marketplace.visualstudio.com/items?itemName=csstools.postcss

Japanese Language Pack for VS Code

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

Japanese Language Pack for Visual Studio Code - Visual Studio Marketplace

Japanese Language Pack は VS Code にローカライズされた UI を提供します。既定の UI 言語をオーバーライドするには、 Configure Display Language コマンドを使用して、VS Code の表示言語を明示的に設定します。 Ctrl+Shift+P を押して "コマンドパレット" を表示し、 display と入力して Configure Display Language コマンドをフィルターして表示します。 Enter キーを押すと、インストールされている言語の一覧がロケールごとに表示され、現在のロケールが強調表示されます。UI 言語を切り替えるには、別の "ロケール" を選択してください。詳細については Docs を参照してください。翻訳改善のためのフィードバックについては、 vscode-loc リポジトリにイシューを作成してください。その翻訳文字列は Microsoft Localization Platform で管理されています。変更は Microsoft Localization Platform でのみ行うことができ、その後 vscode-loc リポジトリにエクスポートします。そのため、pull request は vscode loc リポジトリでは受け入れられません。 The source code and strings are licensed under the MIT license.

https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

Auto Rename Tag

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

Auto Rename Tag - Visual Studio Marketplace

Extension for Visual Studio Code - Auto rename paired HTML/XML tag

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

indent-rainbow

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

indent-rainbow - Visual Studio Marketplace

If you use this plugin a lot, please consider a donation: This extension colorizes the indentation in front of your text, alternating four different colors on each step. Some may find it helpful in writing code for Python, Nim, Yaml, and probably even filetypes that are not indentation dependent.

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

IntelliSense for CSS class names in HTML

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

IntelliSense for CSS class names in HTML - Visual Studio Marketplace

Extension for Visual Studio Code - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

https://marketplace.visualstudio.com/items?itemName=natecorkish.html-css-class-completion

Live Server

ライブリロード（ホットリロード）が利用できるようになります。

ライブリロードとは、ファイル修正を素早くブラウザに反映する機能です。

Live Server - Visual Studio Marketplace

Live Server loves 💘 your multi-root workspace Live Server for server side pages like PHP. Check Here Launch a local development server with live reload feature for static & dynamic pages. [NOTE: In case if you don't have any .html or .htm file in your workspace then you have to follow method no 4 & 5 to start server.]

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

material-icon-theme

ファイルの種類に応じてアイコンを設定してくれます。

例えば、tailwind.confg.jsは、tailwindの設定ファイルなので、ロゴがiconとして設定されています。

Material Icon Theme - Visual Studio Marketplace

Get the Material Design icons into your VS Code.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

Path Intellisense

ファイルパスを自動で補完してくれる拡張機能です。

imgタグのsrcでファイルを探す時にファイルを自動検索できるようになります。

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Prettier - Code formatter

HTMLコードなどをきれいにFormat（コード整形）できるようになります。

インストール後、VSCodeに以下設定します。

保存時にコード自動整形するように設定する

format on save で検索する。
ONにする

Default FormatterをPrettierに設定する

default formatter で検索する。
ONにする

Prettier - Code formatter - Visual Studio Marketplace

Extension for Visual Studio Code - Code formatter using prettier

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode