Enabling typescript-eslint typed linting

[Ingramz]

Describe the feature

Currently, @nuxt/eslint only enables rules of non-typechecked configs (recommended / strict) from typescript-eslint. In addition to these, typescript-eslint also provides advanced rules that depend on TypeScript's type checking API-s which are available via recommended-type-checked and strict-type-checked configs (see https://typescript-eslint.io/getting-started/typed-linting and https://typescript-eslint.io/rules/?=typeInformation).

There are some performance concerns when it comes to naively enabling these configs, namely specifying project or projectService in parserOptions, a prerequisite, can slow down linting speed of a medium sized project from few seconds to several minutes. It is uncertain at the moment whether these slowdowns are unique to this project, Vue or caused by something else.

I think the main question I have is whether @nuxt/eslint would be willing to adopt these configs by default provided that the linting performance bottlenecks are identified. If they deem unsolvable to a satisfactory level, could optionally opting into them made easier for cases such as a CI step, where we can typically afford to spend more time?

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[UfukUstali]

There are some performance concerns when it comes to naively enabling these configs

While i do agree that due to performance reasons this feature can/maybe should remain disabled by default, having the option to enable it is essential, especially so when even something like this:

"@typescript-eslint/strict-boolean-expressions": [
  "warn",
  {
    allowString: false,
    allowNumber: false,
    allowNullableObject: false,
  },
]

requires it.

I couldn't find a way to enable it currently so if there is, i would appreciate it.

[sumomo015]

I was able to manually enable typed linting with the following configuration:

// @ts-check
import eslint from '@eslint/js'
import pluginTs from '@typescript-eslint/eslint-plugin'
import parserTs from '@typescript-eslint/parser'
import vueParser from 'vue-eslint-parser'
import tseslint from 'typescript-eslint'

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt()
  // @ts-ignore
  .replace('nuxt/typescript/setup', {
    name: 'nuxt/typescript/setup',
    plugins: { '@typescript-eslint': pluginTs },
  })
  .replace('nuxt/typescript/rules', {
    name: 'nuxt/typescript/rules',
    files: ['**/*.ts', '**/*.mts', '**/*.cts', '**/*.vue'],
    languageOptions: {
      parser: vueParser,
      parserOptions: {
        parser: parserTs,
        sourceType: 'module',
        extraFileExtensions: ['.vue'],
        projectService: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      ...tseslint.config(eslint.configs.recommended, tseslint.configs.strictTypeChecked, tseslint.configs.stylisticTypeChecked)
        .map(c => c.rules).reduce((a, b) => ({ ...a, ...b }), {}),
      // add your custom rules here
      'no-console': 'warn',
      '@typescript-eslint/consistent-type-imports': ['error', {
        disallowTypeAnnotations: false,
        prefer: 'type-imports',
      }],
      '@typescript-eslint/no-import-type-side-effects': 'error',
    },
  })

I hope this helps anyone looking to enable typed linting manually.

[zachnicoll]

@sumomo015 do you know how to enable parsing of jsx withing script tags as well with your configuration?

[sumomo015]

@sumomo015 do you know how to enable parsing of jsx withing script tags as well with your configuration?

Hi @zachnicoll, I'm not very familiar with using JSX, so I'm not quite sure how to enable parsing within script tags. However, this configuration might be useful: https://eslint.vuejs.org/user-guide/#using-jsx

[aparajita]

@sumomo015 There is a much simpler way. You can use @vue/eslint-config-typescript in conjunction with withNuxt. Something like this:

import {
  defineConfigWithVueTs,
  vueTsConfigs,
} from '@vue/eslint-config-typescript'
import { withNuxt } from './.nuxt/eslint.config.mjs'

const config = defineConfigWithVueTs([
  // Any other config
  vueTsConfigs.recommendedTypeChecked,
])

export default withNuxt().prepend(...config)

[colinmollenhour]

@aparajita Thanks for the example!

UPDATE: Figured it out.. Needed to have this in nuxt.config.ts:

  eslint: {
    config: {
      standalone: false,

However, this has the unfortunate side effect of disabling much of what @nuxt/eslint does, so the technique used by @sumomo015 works better, at least for me.

---

---

I used it exactly, but I'm getting an error (using the latest 1.3.0):

Oops! Something went wrong! :(

ESLint: 9.24.0

Error: ESLintFlatConfigUtils: Different instances of plugin "@typescript-eslint" found in multiple configs: typescript-eslint/base, nuxt/typescript/setup. It's likely you misconfigured the merge of these configs.
    at FlatConfigComposer._verifyPluginsConflicts (./node_modules/.pnpm/[email protected]/node_modules/eslint-flat-config-utils/dist/index.mjs:390:15)

I don't have typescript-eslint installed as direct dependency, just "@nuxt/eslint": "^1.3.0" and "@vue/eslint-config-typescript": "^14.5.0".

Any ideas?