Zenn
🍉

TailwindCSSを使う際に導入しておきたいPrettier, ESLint, VSCodeのプラグイン

2022/09/14に公開1件
HTML
VS Code
ESLint
Tailwind CSS
Prettier
tech

こちらの記事ではTailwindCSSで開発する際に導入しておくと便利なPrettier, ESLint, VScodeのプラグインをご紹介します。

  • prettier-plugin-tailwindcss (Prettierプラグイン)
  • eslint-plugin-tailwindcss (ESLintプラグイン)
  • Tailwind CSS IntelliSense (VSCode拡張機能)

prettier-plugin-tailwindcss

Github: https://github.com/tailwindlabs/prettier-plugin-tailwindcss

こちらは2022年の1月にTailwind公式がリリースしたPrettierのプラグインです。
https://tailwindcss.com/blog/automatic-class-sorting-with-prettier
classに渡された文字列からTailwindCSSクラスを含む属性を探して、推奨されるクラスの順序に従ってそれらを自動的に並べ替えてくれます。

Before

<button className="bg-blue-600 text-xs font-medium inline-block px-6 py-2.5  leading-tight rounded">

After

<button className="inline-block rounded bg-blue-600 px-6  py-2.5 text-xs  font-medium leading-tight">

複数人で開発する場合など、classの順番がバラバラになりがちでレビューしづらかったりと色々問題になるのですが、このプラグインがあれば解決してくれます。

導入方法

インストール

npm install -D prettier prettier-plugin-tailwindcss

設定ファイルに記述

// prettierrc.js
module.exports = {
  ...
  plugins: [require('prettier-plugin-tailwindcss')],
}

eslint-plugin-tailwindcss

Github: https://github.com/francoismassart/eslint-plugin-tailwindcss

ESLintのTailwind用のプラグインです。
デフォルトの設定では以下のようにclassのコンフリクト、tailwindにサポートされていないクラスの使用、冗長な記述などを指摘してくれます。
Githubの公式リポジトリに各ルールが記載されているのでそちらを参照しましょう。

<button className="block inline-block unknownclass px-8 py-8 ">

Warning: Classnames 'px-8, py-8' could be replaced by the 'p-8' shorthand!  tailwindcss/enforces-shorthand
Warning: Classname 'unknownclass' is not a Tailwind CSS class!  tailwindcss/no-custom-classname
Error: Classnames block, inline-block are conflicting!  tailwindcss/no-contradicting-classname

導入方法

インストール

npm -D install eslint-plugin-tailwind

設定ファイルに記述

// eslintrc.js
module.exports = {
  extends: [
    ...
    'plugin:tailwindcss/recommended',
  ],
  ...
  plugins: ['tailwindcss'],
  ...
}

Tailwind CSS IntelliSense

Github: https://github.com/tailwindlabs/tailwindcss-intellisense

VSCodeの拡張機能になります。
主な機能としては、ホバー時のCSSプレビュー、class名の自動保管などがあります。
特に自動保管が魅力的で、Tailwindをコーディングする際にありがちな"タイポ"を圧倒的に減らすことができるのでお勧めです。

導入方法

インストール
VSCode Extention: Tailwind CSS IntelliSense

最後に

以上TailwindCSSで開発する際に導入しておくと便利なプラグインをご紹介させていただきました。
これらを導入することでTailwindでの開発体験が圧倒的に向上するのでぜひ導入を検討してみてください！

Discussion

からさきからさき

npm -D install eslint-plugin-tailwind
ではエラーが発生して
npm -D install eslint-plugin-tailwindcss
では正常にインストールされました