Open10
Vue.js / Nuxt (Vue3 / Nuxt3 or later)で利用したいESLint Rulesを調べる
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Vue / Nuxt で利用したい / 利用することが好ましいESLint rulesを調べる。
Note
最終的に記事化する
Todo
- Vue / Nuxt関連のESLint rulesを調査
- 記事にする
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Nuxt ESLint
Nuxtを利用するならばとりあえずこれ使っておけば良い。
articles
@nuxt/eslint-config
Nuxtアプリで利用されるESLint Config
articles
のスクラップで調査して記事化する。
@nuxt/eslint-plugin
Nuxt固有ルールがまとめられたESLint plugin。現在整備中っぽい
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
style
ブロック
eslint-plugin-vue-scoped-css
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
a11y対応
eslint-plugin-vuejs-accessibility
メンテされている方。
articles
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
JSDoc
eslint-plugin-jsdoc
Note
@nuxt/eslint-config
はデフォルトで追加済みである。そのため、Nuxtユーザーの追加設定は不要
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Monorepo構成
pnpm workspaceを用いたmonorepo構成を組むことが多い。そのため、eslint-plugin-import-accessは有効
eslint-plugin-import-access
articles
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Storybook
eslint-plugin-storybook
Official
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Vitest
eslint-plugin-vitest
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
Draft: CSS-in-JS
survey: Tailwind CSS、Panda CSS、etc.
Nuxt UIを利用する場合はTailwind CSSだけで良いか。
![GANGAN](https://res.cloudinary.com/zenn/image/fetch/s--LcSiR7O2--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/f364d5bfdd.jpeg)
とりあえずどれ使えばええの?
そうなった場合は下記ルール等を利用すれば良い。これが1番簡単