Nuxt•9mo ago

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?

6 Replies

Alejandro Mery•9mo 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.

SanfordOP•9mo ago

@Alejandro Mery ty, i was mixing the legacy config format with the flat config format

Quentin•8mo 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•8mo ago

I dropped prettier in favour of stylistic 😕 path of least resistance

Quentin•8mo 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•8mo ago

antfu is amazing

Gaming

Programming

Nuxt eslint module help