🐡
【Tailwind CSS】VSCodeで保存時にクラス名を自動で並び替えする【Next.js】
はじめに
Next.js + Tailwind CSS、便利ですよね。
ただTailwind CSSを使っているとクラスを多く使うため、クラス名の順番がバラバラになるという問題が発生します。
これをESLintで順番が揃っていないとエラーが出るように強制し、なおかつVSCodeで保存時に修正する方法を紹介します。
前提条件
- Next.jsから次のコマンドで作成し、Tailwind CSSが導入されたプロジェクト。
$ npx create-next-app@latest
導入するnpmパッケージ
やり方
eslint-plugin-tailwindcssをインストール
インストール
$ npm i -D eslint-plugin-tailwindcss
ESLintの設定ファイルを修正
.eslintrc.json
{
- "extends": "next/core-web-vitals",
+ "extends": "next/core-web-vitals",
+ "rules": { "tailwindcss/classnames-order": "error" },
+ "plugins": ["tailwindcss"]
}
そうするとVSCodeからめちゃくちゃ怒られるようになっている。
クラス名の順番ごときでゴタゴタ言ってくるようになります😢
怒られるだけじゃ癪なので
VSCodeのコード保存時にTailwind CSSのクラス名を自動で並び替えするようにする。
.vscode/settings.json
+{
+ "editor.codeActionsOnSave": {
+ "source.fixAll.eslint": "explicit"
+ }
+}
結果
なんということでしょう！！
クラス名が自動で並び替えされるようになりました！！！🥳
Discussion