Nuxt UI環境にNuxt ESLint、 eslint-plugin-tailwindcss を導入する

はじめに

こんにちは、がんがんです。
前回の記事では Nuxt UI の紹介を行いました。

https://zenn.dev/comm_vue_nuxt/articles/setup-nuxt-ui-and-nuxt-ui-pro

本記事でも紹介した通り Nuxt UI はTailwind CSSをベースに実装されています。
そのため、ユーザー定義のコンポーネントは Tailwind CSS の記法でスタイルを当てることができます。

そこで本記事では Nuxt ESLint 環境および eslint-plugin-tailwindcssの設定を行なっていきます。

Nuxt ESLint とは

Nuxt ESLint とは Nuxt 公式が提供する ESLint モジュールです。モジュール、Nuxt で推奨される Config、Nuxt 用の Rule が提供されています。

https://eslint.nuxt.com/

Nuxt ESLint の詳細については下記記事で触れていますのでそちらをご覧ください。

https://zenn.dev/comm_vue_nuxt/articles/setup-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 のインストールを行います。

terminal

npx nuxi@latest module add eslint

続いてeslint-plugin-tailwindcssをインストールします。

terminal

pnpm add -D eslint-plugin-tailwindcss

setup eslint.config, nuxt.config

Nuxt Config および ESLint Config の設定を行います。ESLint Stylistic の設定は任意で大丈夫です。

ESLint Stylistic の詳細設定については ESLint Stylistic のconfigを確認してください。

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['@nuxt/eslint'],
  eslint: {
    config: {
      stylistic: {
        semi: true
      }
    }
  }
});

eslint.config.mjs

// @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を用いてセットアップを行います。

terminal

pnpm add -D @nuxt/eslint-config@latest eslint-plugin-tailwindcss

もし ESLint 未インストールの場合は合わせて追加してください。

terminal

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で実施しているのが前項と異なる点です。

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。

terminal

pnpm lint

何個か表示されたワーニングを列挙してみます。

enforces-shorthand

terminal

warning  Classnames 'w-12, h-12' could be replaced by the 'size-12' shorthand!               tailwindcss/enforces-shorthand

これは短縮系に置き換えられるよーというものです。w-full h-fullが設定されている場合にsize-fullを提案してきます。

https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/c05d17c3849d347981a9f397d0141daac7f5fbee/docs/rules/enforces-shorthand.md

migration-from-tailwind-2

terminal

warning  Classname 'flex-shrink-0' should be updated to 'shrink-0' in Tailwind CSS v3!       tailwindcss/migration-from-tailwind-2

これはマイグレーションに関するものです。v2 時代の書き方を指摘するものです。

https://github.com/francoismassart/eslint-plugin-tailwindcss/blob/c05d17c3849d347981a9f397d0141daac7f5fbee/docs/rules/migration-from-tailwind-2.md

おわりに

今回は Nuxt UI 環境に対してNuxt ESLint、eslint-plugin-tailwindcssを導入してみました。

ESLint の対応は早い段階で入れておかないと後でエラー・ワーニング潰しが面倒でしんどかったりしますね。
ESLint のエラー・ワーニング潰しは一種の修行ですがそのライブラリ、言語を理解する上ではかなり力のつく作業だと思っています。
普段お使いのライブラリ・モジュールの ESLint Flat Config 対応が終わっていないようであれば是非コントリビュートしてみませんか？

2~3 つくらいのモジュールでマイグレーション作業を実施しているので、もし興味があってチャレンジしてみたい方はお気軽にご相談ください〜
お力になれることがあるかもしれないです 💪