N
Nuxt3mo ago
Sanford

Nuxt eslint module help

I'm joining a new nuxt project that have vue3 eslint plugin, does the Nuxt Eslint Module replace the eslint-plugin-vue or I need both in the project?
No description
6 Replies
Alejandro Mery
Alejandro Mery3mo ago
I'm also fighting this module. look at https://eslint.nuxt.com/packages/module for details about the current way to do it
Nuxt ESLint
ESLint Module - Nuxt ESLint
All-in-one ESLint integration for Nuxt. It generates a project-aware ESLint flat config and provides the ability to optionally run ESLint check along side the dev server.
Sanford
Sanford3mo ago
@Alejandro Mery ty, i was mixing the legacy config format with the flat config format
Quentin
Quentin3mo ago
Hey, @Sanford @Alejandro Mery how did you manage to use prettier plugin with the new eslint module ? I didn't succeed to import a plugins in eslint.config.mjs... I tried to import the same thing as in my .eslintrc but when I look in vscode's eslint output I get errors that say: "Error: Key "plugins": Key "0": Expected an object." My eslint.config.mjs:
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
plugins: ['prettier'],
extends: ['prettier', 'plugin:prettier/recommended'],
rules: {
'@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
'@stylistic/brace-style': ['error', '1tbs'],
'@stylistic/operator-linebreak': ['error', 'before'],
}
})
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
plugins: ['prettier'],
extends: ['prettier', 'plugin:prettier/recommended'],
rules: {
'@stylistic/quotes': ['error', 'single', { avoidEscape: true }],
'@stylistic/brace-style': ['error', '1tbs'],
'@stylistic/operator-linebreak': ['error', 'before'],
}
})
If I comment on plugins and extends the module works but prettier just uses VsCode settings and not ESlint rules.
Alejandro Mery
Alejandro Mery3mo ago
I dropped prettier in favour of stylistic 😕 path of least resistance
Quentin
Quentin3mo ago
@Alejandro Mery @Sanford I succeeded just now !! I had succeeded with a small hack, but I had opened an issue here(https://github.com/nuxt/eslint/issues/387), and Antfu solved it just as quickly, So now it works !!! Here is my eslint.config.mjs:
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
plugins: {
prettier: prettierPlugin
},
rules: {
// ...prettierPlugin.configs.recommended.rules,
...eslintConfigPrettier.rules,
...eslintPluginPrettierRecommended.rules
}
})
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
plugins: {
prettier: prettierPlugin
},
rules: {
// ...prettierPlugin.configs.recommended.rules,
...eslintConfigPrettier.rules,
...eslintPluginPrettierRecommended.rules
}
})
You need to install: npm i -D eslint-config-prettier eslint-plugin-prettier @nuxt/eslint then of course add '@nuxt/eslint' inside nuxt.modules array And, now all the errors are handled with Prettier !!
GitHub
Issues · nuxt/eslint
Collection of ESLint-related packages for Nuxt. Contribute to nuxt/eslint development by creating an account on GitHub.
Alejandro Mery
Alejandro Mery3mo ago
antfu is amazing