How to use Nuxt + Eslint in a monorepo? #420
Replies: 1 comment
-
@BenJackGill We currently do it similar as mentioned here: eslint/eslint#16960 (comment) We use pnpm workspaces and have a separate "package" that defines basic presets, plugins and custom rules. We export two config arrays. One is just an array of presets etc that is used with the special The other export uses All workspace packages have our linting package installed as a dev dependency. Each package has its own This works great for us. Here is some code. Hope it helps. linting package{
"name": "@company/lint",
"version": "3.0.0",
"private": true,
"description": "",
"type": "module",
"exports": {
"./eslint": {
"import": "./src/eslint/index.mjs"
},
"./lint-staged": {
"import": "./src/lint-staged/index.mjs"
},
"./stylelint": {
"import": "./src/stylelint/index.mjs"
}
},
"scripts": {
"--------------- LINT ---------------": "",
"lint:js": "eslint --cache .",
"lint:js:quiet": "pnpm lint:js --quiet",
"lint:js:fix": "pnpm lint:js --fix",
"lint": "pnpm lint:js",
"lint:quiet": "pnpm lint:js:quiet",
"lintfix": "pnpm lint:js:fix"
},
"dependencies": {
"@nuxt/eslint": "0.3.12",
"@unocss/eslint-config": "0.60.2",
"eslint": "9.2.0",
"eslint-config-flat-gitignore": "0.1.5",
"eslint-config-prettier": "9.1.0",
"eslint-config-turbo": "1.13.3",
"eslint-import-resolver-custom-alias": "1.3.2",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-vuejs-accessibility": "2.3.0",
"prettier": "3.2.5",
"vite-plugin-eslint2": "4.4.0"
},
"devDependencies": {
"typescript": "5.4.5"
}
} packages/lint/src/eslint/index.mjs// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat';
// https://github.com/prettier/eslint-plugin-prettier?tab=readme-ov-file#configuration-new-eslintconfigjs
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
import pluginUnicorn from 'eslint-plugin-unicorn';
/**
* company ESLint rules
*
* @type {import('eslint').Linter.FlatConfig}
*/
export const companyEslintRules = {
name: 'company/eslint-rules',
plugins: {
/**@type {any} missing types */
unicorn: pluginUnicorn,
},
rules: {
'vue/attribute-hyphenation': 'off',
// ...
},
};
/**
* company dirs and files to ignore
*
* @type {import('eslint').Linter.FlatConfig}
*/
export const companyIgnores = {
// NOTE: no "name" else, it wouldn't work; maybe a bug in ESLint
ignores: ['**/node_modules', '**/public', '**/vendor', '**/dist', '**/.nuxt'],
};
/**
* For usage within a Nuxt context
*
* The helper `withNuxt()` from auto-generated `.nuxt/eslint.config.mjs` can be used to append
* these rules after the config tailored to the Nuxt-app where the eslint config is being used.
* @see https://eslint.nuxt.com/packages/module
*
* It will also add all best-practices rules for js/ts/vue from `@nuxt/eslint-config`.
* @see https://eslint.nuxt.com/packages/config
*/
export const companyEslintConfigNuxt = [eslintPluginPrettierRecommended, companyEslintRules, companyIgnores];
/**
* For standalone usage in packages without Nuxt context.
*
* `createConfigForNuxt()` will create all best-practices rules for js/ts/vue from `@nuxt/eslint-config`.
* @see https://eslint.nuxt.com/packages/config
*
* The activated `tooling` feature enables rules with unicorn and jsdoc.
* @see https://eslint.nuxt.com/packages/config#module-authors
*/
export const companyEslintConfigStandalone = createConfigForNuxt({ features: { tooling: true } }).append(
eslintPluginPrettierRecommended,
companyEslintRules,
companyIgnores,
); packages/utils/eslint.config.jsimport { companyEslintConfigStandalone } from '@company/lint/eslint';
export default companyEslintConfigStandalone; apps/my-nuxt-app/eslint.config.jsimport { companyEslintConfigNuxt } from '@company/lint/eslint';
import withNuxt from './.nuxt/eslint.config.mjs';
export default withNuxt(companyEslintConfigNuxt); |
Beta Was this translation helpful? Give feedback.
-
I have a monorepo that looks like this:
I want to have one
eslint.config.mjs
file at my monorepo root which handles the entire codebase. This type of Eslint setup was discussed here on the Eslint repo as the best solution for Eslint in a monorepo. But I also want to use the Nuxt Eslint rules as a base starting point.How should I go about doing that?
I first tried to use the recommended Nuxt Eslint Module in the monorepo root but I couldn't figure out how to set it up at the monorepo root (outside of a Nuxt app). I think it is designed only to be used inside a nuxt app? Is that correct?
So instead I tried to use @nuxt/eslint-config with
@nuxt/eslint-config
andeslint
packages installed at the monorepo root along with aeslint.config.mjs
file at the monorepo root like this:But I am getting this error on
layouts/default.vue
inside my Nuxt web apps, which I thought would be handled:So I think I'm still doing something wrong.
Can you please give some guidance on the correct way to use Nuxt + Eslint in a monorepo?
Beta Was this translation helpful? Give feedback.
All reactions