はじめに
こんにちは、がんがんです。
前回の記事では Nuxt UI の紹介を行いました。
本記事でも紹介した通り Nuxt UI はTailwind CSSをベースに実装されています。
そのため、ユーザー定義のコンポーネントは Tailwind CSS の記法でスタイルを当てることができます。
そこで本記事では Nuxt ESLint 環境および eslint-plugin-tailwindcssの設定を行なっていきます。
Nuxt ESLint とは
Nuxt ESLint とは Nuxt 公式が提供する ESLint モジュールです。モジュール、Nuxt で推奨される Config、Nuxt 用の Rule が提供されています。
Nuxt ESLint の詳細については下記記事で触れていますのでそちらをご覧ください。
Setup ESLint
ESLint の設定方法は 2 種類あります。Nuxt ESLint モジュールを使う方法と利用せずに@nuxt/eslint-configを利用する方法です。
本記事ではそれぞれ記載いたします。
case1: use Nuxt ESLint module
install Nuxt ESLit and eslint-plugin-tailwindcss
まずは Nuxt ESLint のインストールを行います。
npx nuxi@latest module add eslint
続いてeslint-plugin-tailwindcssをインストールします。
pnpm add -D eslint-plugin-tailwindcss
setup eslint.config, nuxt.config
Nuxt Config および ESLint Config の設定を行います。ESLint Stylistic の設定は任意で大丈夫です。
ESLint Stylistic の詳細設定については ESLint Stylistic のconfigを確認してください。
export default defineNuxtConfig({
modules: ['@nuxt/eslint'],
eslint: {
config: {
stylistic: {
semi: true
}
}
}
});
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs';
import pluginTailwindCss from 'eslint-plugin-tailwindcss';
export default withNuxt({
// your custom configs
}).append(
pluginTailwindCss.configs["flat/recommended"]
);
これで設定は完了です。
case2: use @nuxt/eslint-config
install @nuxt/eslint-config and eslint-plugin-tailwindcss
@nuxt/eslint-configを用いてセットアップを行います。
pnpm add -D @nuxt/eslint-config@latest eslint-plugin-tailwindcss
もし ESLint 未インストールの場合は合わせて追加してください。
pnpm add -D @nuxt/eslint-config@latest eslint-plugin-tailwindcss eslint@latest
setup eslint.config
ESLint Config の設定を行います。ESLint Stylistic の設定をnuxt.config.tsではなくeslint.config.mjsで実施しているのが前項と異なる点です。
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
import pluginTailwindCss from 'eslint-plugin-tailwindcss';
export default createConfigForNuxt({
features: {
stylistic: true
}
}).append(
pluginTailwindCss.configs['flat/recommended']
);
こちらもこれで完了です。
実際に ESLint のエラーを吐かせてみる
実際に ESLint で Error / Warning を吐かせてみましょう。
今回はNuxt UI Pro / SaaS templateを実験対象にしてみましょう。
上記のセットアップを実施しいざlint。
pnpm lint
何個か表示されたワーニングを列挙してみます。
enforces-shorthand
warning Classnames 'w-12, h-12' could be replaced by the 'size-12' shorthand! tailwindcss/enforces-shorthand
これは短縮系に置き換えられるよーというものです。w-full h-fullが設定されている場合にsize-fullを提案してきます。
migration-from-tailwind-2
warning Classname 'flex-shrink-0' should be updated to 'shrink-0' in Tailwind CSS v3! tailwindcss/migration-from-tailwind-2
これはマイグレーションに関するものです。v2 時代の書き方を指摘するものです。
おわりに
今回は Nuxt UI 環境に対してNuxt ESLint、eslint-plugin-tailwindcssを導入してみました。
ESLint の対応は早い段階で入れておかないと後でエラー・ワーニング潰しが面倒でしんどかったりしますね。
ESLint のエラー・ワーニング潰しは一種の修行ですがそのライブラリ、言語を理解する上ではかなり力のつく作業だと思っています。
普段お使いのライブラリ・モジュールの ESLint Flat Config 対応が終わっていないようであれば是非コントリビュートしてみませんか？
2~3 つくらいのモジュールでマイグレーション作業を実施しているので、もし興味があってチャレンジしてみたい方はお気軽にご相談ください〜
お力になれることがあるかもしれないです 💪
Discussion