N
Nuxt•7mo ago
KM

@nuxt/eslint & ESLint Flat File Config

Hey, I'm really struggling to work out the new flat file format for ES Lint. Ideally I want to use Prettier for formatting, Vue-eslint-parser for handling Vue. Also Tailwind CSS linting with the es lint plugin and type checking for typescript. Here's my eslint.config.mjs file, anything commented out just started breaking - 
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindCSS: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginPrettierRecommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindCSS: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginPrettierRecommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)
How do I actually configure this, I'm very confused so to what the proper format is now.
7 Replies
fogx
fogx•6mo ago
Have the same issue. Need some usable template to work with 😢 Particularly on how to import the plugins, like eslint:recommended, typescript-eslint/recommended and vue recommended/essentials Atleast for semi i can tell you: if you structure it like this itll work: 'semi': ['error', 'always'], And for eslint:recommended: import eslint from '@eslint/js'; ...eslint.configs.recommended, with a new way to install it according to typescript-eslint https://typescript-eslint.io/users/configs/
Smef
Smef•6mo ago
Hey! I just se this up today! Here's my .eslint.config.mjs 
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
import eslintConfigPrettier from "eslint-config-prettier";

// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
const nuxtConfig = createConfigForNuxt({
  features: {
    // Rules for module authors
    tooling: true,
    // Rules for formatting
    stylistic: true,
  },
  dirs: {
    src: [
      './playground',
    ],
  },
})

export default [nuxtConfig.toConfigs(), eslintConfigPrettier]
// @ts-check
import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
import eslintConfigPrettier from "eslint-config-prettier";

// Run `npx @eslint/config-inspector` to inspect the resolved config interactively
const nuxtConfig = createConfigForNuxt({
  features: {
    // Rules for module authors
    tooling: true,
    // Rules for formatting
    stylistic: true,
  },
  dirs: {
    src: [
      './playground',
    ],
  },
})

export default [nuxtConfig.toConfigs(), eslintConfigPrettier]
And then my prettier config: 
module.exports = {
  plugins: [import('prettier-plugin-tailwindcss')],
  printWidth: 120,
}
module.exports = {
  plugins: [import('prettier-plugin-tailwindcss')],
  printWidth: 120,
}
I think this wasn't working properly. I think the thing that needs to happen is that stylistic needs to be disabled even with this export, it doesn't override stylistic properly 
export default [ ...await nuxtConfig, eslintConfigPrettier ];
export default [ ...await nuxtConfig, eslintConfigPrettier ];
It looks like you have to disable the stylistic plugin by setting stylistic: false and then it'll run
fogx
fogx•6mo ago
anyone using the tseslint or vue plugins? can't get that to work...
Smef
Smef•6mo ago
I think the Nuxt config should handle Vue as well It's a flat file, so you can echo out the config that gets generated if you want to look at it
fogx
fogx•6mo ago
how do i do that?
Smef
Smef•6mo ago
const nuxtConfig = createConfigForNuxt({
  features: {
    // Rules for module authors
    tooling: true,
    // Rules for formatting
    stylistic: true,
  },
  dirs: {
    src: [
      './playground',
    ],
  },
})

console.log('nuxtConfig', nuxtConfig);
const nuxtConfig = createConfigForNuxt({
  features: {
    // Rules for module authors
    tooling: true,
    // Rules for formatting
    stylistic: true,
  },
  dirs: {
    src: [
      './playground',
    ],
  },
})

console.log('nuxtConfig', nuxtConfig);
Sorry, echo was the wrong term there too many programming languages!
Ryän
Ryän•6mo ago
try tailwindcss: eslintPluginTailwindCSS, ...eslintPluginTailwindCSS.configs.recommended.rules, 
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindcss: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginTailwindCSS.configs.recommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)
// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'
// import vueESLintParser from 'vue-eslint-parser'
// @ts-ignore
import eslintConfigPrettier from 'eslint-config-prettier'
import prettierPlugin from 'eslint-plugin-prettier'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
import eslintPluginTailwindCSS from 'eslint-plugin-tailwindcss'

export default withNuxt(
  {
    // languageOptions.parser: {
    // parser: vueESLintParser,
    // }
    // extends: [
    //   'eslint:recommended',
    //   '@nuxt/eslint-config',
    //   'plugin:prettier/recommended',
    // ],

    plugins: {
      prettier: prettierPlugin,
      tailwindcss: eslintPluginTailwindCSS,
    },
    rules: {
      ...prettierPlugin.configs.recommended.rules,
      ...eslintConfigPrettier.rules,
      ...eslintPluginTailwindCSS.configs.recommended.rules,
      // ...eslintPluginTailwindCSS.rules,
      // semi: false,
      // quotes: [2, 'single', { avoidEscape: true }],
    },
  },

  {
    ignores: [
      'v1/*',
      'v1/*/**',
      '.nuxt/*',
      '.nuxt/*/**',
      '.vscode/*',
      '.vscode/*/**',
      '.output/*',
      '.ouput/*/**',
      'node_modules',
    ],
  }
)
Want results from more Discord servers?
Add your server