Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Unable to use plugins with @nuxt/eslint and the new flat config #387

Closed
XStarlink opened this issue Apr 8, 2024 · 1 comment
Closed

Comments

@XStarlink
Copy link

XStarlink commented Apr 8, 2024

Environment

  • Operating System: Darwin
  • Node Version: v21.7.2
  • Nuxt Version: 3.11.2
  • CLI Version: 3.11.1
  • Nitro Version: 2.9.6
  • Package Manager: npm@10.5.0
  • Builder: -
  • User Config: ssr, telemetry, css, typescript, build, vite, routeRules, nitro, extends, modules, app, site, ogImage, sitemap, robots, seoExperiments, schemaOrg, linkChecker, ui, colorMode, googleFonts, i18n, vueEmail, supabase, devtools, runtimeConfig
  • Runtime Modules: @nuxt/eslint@0.3.1, @nuxtjs/i18n@8.3.0, @nuxt/content@2.12.1, @nuxt/image@1.5.0, @nuxt/ui@2.15.1, @nuxtjs/seo@2.0.0-rc.10, @nuxtjs/supabase@1.2.0, @nuxtjs/google-fonts@3.2.0, @pinia/nuxt@0.5.1, @vueuse/nuxt@10.9.0, @vue-email/nuxt@0.8.19, ()
  • Build Modules: -

Package

@nuxt/eslint

Reproduction

https://stackblitz.com/edit/github-6rwuyx?file=app.vue

Describe the bug

Hello,
I've been using an .eslintrc file with the prettier plugin for a long time to format code in my Nuxt projects,

I've decided to switch to the new flat config with the @nuxt/eslint module,
(I've seen Antfu's massive work on this project over the last few weeks and I'd like to thank him.)
but I didn't succeed to use the Prettier plugin with this new way of doing things.
I've read a lot about the new ESLint flat config, but I didn't succeed to use plugins with the new withNuxt() method.

I get the error:

ConfigError: Config (unnamed): Key "plugins": Cannot redefine plugin "".

With this 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
  }
})

I've logged the return value of withNuxt() and I think I can see that there's a plugins object with no name at the end and it's probably making the error for ESLint but really not sure.

Here is the returned content of withNuxt()
[
  {
    name: 'nuxt/vue/single-root',
    files: [
      'layouts/**/*.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/layouts/**/*.{js,ts,jsx,tsx,vue}',
      'pages/**/*.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/pages/**/*.{js,ts,jsx,tsx,vue}'
    ],
    rules: { 'vue/no-multiple-template-root': 'error' }
  },
  {
    name: 'nuxt/rules',
    plugins: { nuxt: [Object] },
    rules: { 'nuxt/prefer-import-meta': 'error' }
  },
  {
    name: 'nuxt/stylistic',
    plugins: { '@stylistic': [Object] },
    rules: {
      '@stylistic/array-bracket-spacing': [Array],
      '@stylistic/arrow-parens': [Array],
      '@stylistic/arrow-spacing': [Array],
      '@stylistic/block-spacing': [Array],
      '@stylistic/brace-style': [Array],
      '@stylistic/comma-dangle': [Array],
      '@stylistic/comma-spacing': [Array],
      '@stylistic/comma-style': [Array],
      '@stylistic/computed-property-spacing': [Array],
      '@stylistic/dot-location': [Array],
      '@stylistic/eol-last': 'error',
      '@stylistic/indent': [Array],
      '@stylistic/indent-binary-ops': [Array],
      '@stylistic/key-spacing': [Array],
      '@stylistic/keyword-spacing': [Array],
      '@stylistic/lines-between-class-members': [Array],
      '@stylistic/max-statements-per-line': [Array],
      '@stylistic/member-delimiter-style': [Array],
      '@stylistic/multiline-ternary': [Array],
      '@stylistic/new-parens': 'error',
      '@stylistic/no-extra-parens': [Array],
      '@stylistic/no-floating-decimal': 'error',
      '@stylistic/no-mixed-operators': [Array],
      '@stylistic/no-mixed-spaces-and-tabs': 'error',
      '@stylistic/no-multi-spaces': 'error',
      '@stylistic/no-multiple-empty-lines': [Array],
      '@stylistic/no-tabs': 'error',
      '@stylistic/no-trailing-spaces': 'error',
      '@stylistic/no-whitespace-before-property': 'error',
      '@stylistic/object-curly-spacing': [Array],
      '@stylistic/operator-linebreak': [Array],
      '@stylistic/padded-blocks': [Array],
      '@stylistic/quote-props': [Array],
      '@stylistic/quotes': [Array],
      '@stylistic/rest-spread-spacing': [Array],
      '@stylistic/semi': [Array],
      '@stylistic/semi-spacing': [Array],
      '@stylistic/space-before-blocks': [Array],
      '@stylistic/space-before-function-paren': [Array],
      '@stylistic/space-in-parens': [Array],
      '@stylistic/space-infix-ops': 'error',
      '@stylistic/space-unary-ops': [Array],
      '@stylistic/spaced-comment': [Array],
      '@stylistic/template-curly-spacing': 'error',
      '@stylistic/template-tag-spacing': [Array],
      '@stylistic/type-annotation-spacing': [Array],
      '@stylistic/type-generic-spacing': 'error',
      '@stylistic/type-named-tuple-spacing': 'error',
      '@stylistic/wrap-iife': [Array],
      '@stylistic/yield-star-spacing': [Array],
      '@stylistic/jsx-closing-bracket-location': 'error',
      '@stylistic/jsx-closing-tag-location': 'error',
      '@stylistic/jsx-curly-brace-presence': [Array],
      '@stylistic/jsx-curly-newline': 'error',
      '@stylistic/jsx-curly-spacing': [Array],
      '@stylistic/jsx-equals-spacing': 'error',
      '@stylistic/jsx-first-prop-new-line': 'error',
      '@stylistic/jsx-indent': [Array],
      '@stylistic/jsx-indent-props': [Array],
      '@stylistic/jsx-max-props-per-line': [Array],
      '@stylistic/jsx-one-expression-per-line': [Array],
      '@stylistic/jsx-quotes': 'error',
      '@stylistic/jsx-tag-spacing': [Array],
      '@stylistic/jsx-wrap-multilines': [Array]
    }
  },
  {
    name: 'nuxt/disables/routes',
    files: [
      'app.{js,ts,jsx,tsx,vue}',
      'error.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/app.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/error.{js,ts,jsx,tsx,vue}',
      'layouts/**/*.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/layouts/**/*.{js,ts,jsx,tsx,vue}',
      'pages/**/*.{js,ts,jsx,tsx,vue}',
      'node_modules/@nuxt/ui-pro/pages/**/*.{js,ts,jsx,tsx,vue}',
      'components/*/**/*.{js,ts,jsx,tsx,vue}'
    ],
    rules: { 'vue/multi-word-component-names': 'off' }
  },
  {
    name: 'nuxt/import-globals',
    languageOptions: { globals: [Object] }
  },
  { plugins: { '': [Object] } }     <<====== HERE
]

Can anyone give me some advice on how to load prettier with this new module?
Thanks in advance!

Additional context

No response

Logs

No response

@XStarlink
Copy link
Author

@antfu Thanks a lot, it works perfectly now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant