Very slow with typescript-eslint parser and `project`

[rndmerle]

Hi!
Since we've added the project: './tsconfig.json' option to parserOptions (to allow @typescript-eslint/prefer-nullish-coalescing rule for instance) the parsing is really really slow. On our project it went from 30s to 11min.
If we exclude .vue files or remove the project option then it's fast again.

Anyone else went into this issue?
Indeed I ran into typescript-eslint/typescript-eslint#389 but the performance on our project when excluding .vue files is ok, so it's really the parsing of <script> SFCs imho.

Our eslint parsing options:

parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2018,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
    extraFileExtensions: ['.vue'],
  }

[lukaVarga]

Yep, I also noticed a significant slowdown after adding tsconfig (although perhaps not as drastic)

[rndmerle]

If anyone interested, we're now using Eslint nested overrides so vue-eslint-parser runs only on .vue files. It speeds things up a bit (down to 4-5' from 11').

const { configureWebpack } = require('./vue.config.js')
const extensions = ['.js', '.ts', '.vue', '.json']
const webpackConfig = { ...configureWebpack, resolve: { ...configureWebpack.resolve, extensions } }

const babelParseConfig = {
  ecmaVersion: 2020,
  sourceType: 'module',
}

module.exports = {
  env: {
    es6: true,
    browser: true,
    node: true,
  },
  globals: {
    NotificationPermission: true, // because it's not embedded in es6 or browser env apparently
  },
  settings: {
    'import/extensions': extensions,
    'import/resolver': {
      // eslint-import-resolver-webpack
      webpack: {
        config: webpackConfig,
      },
    },
  },

  /* *********** BASE CONFIG (parser for JS and JSON files) *********** */
  parser: 'babel-eslint',
  parserOptions: {
    ...babelParseConfig,
  },
  plugins: ['import', 'unused-imports', 'json'],
  extends: [
    'standard',
    'prettier', // disable code formatting related rules
    'prettier/standard',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:import/typescript',
  ],
  rules: {
    // common rules
  },

  /* ********************* FOR TS and VUE FILES ********************* */
  overrides: [
    {
      files: ['**/*.ts', '**/*.vue'], // must include nested overrides' patterns
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ...babelParseConfig,
        project: './tsconfig.json',
        warnOnUnsupportedTypeScriptVersion: false,
      },
      plugins: ['@typescript-eslint'],
      extends: ['plugin:@typescript-eslint/recommended', 'prettier/@typescript-eslint'],
      rules: {
        // @typescript-eslint/* rules
      },

      /* ********************* FOR VUE FILES ********************* */
      overrides: [
        {
          files: ['**/*.vue'],
          parser: 'vue-eslint-parser',
          parserOptions: {
            ...babelParseConfig,
            parser: '@typescript-eslint/parser',
            project: './tsconfig.json',
            extraFileExtensions: ['.vue'],
            warnOnUnsupportedTypeScriptVersion: false,
          },
          plugins: ['vue'],
          extends: ['plugin:vue/recommended', 'prettier/vue'],
          rules: {
            // vue/* rules
          },
        },
      ],
    },
  ],
}

[ota-meshi]

It doesn't slow down in my development environment. Is it possible to find out the problems of the program in your environment?

[rndmerle]

I don't know much what to test in order to help.
I ran eslint only on .vue files with TIMING env but it doesn't help much :

• the timings list is limited to 10 entries and it's not the 10 lengthiest
• even if I disable the lengthiest rules (import/* and vue/* apparently), the overall linting is not faster (because it's caused by the parsing itself)

Currently, it runs in almost 5 minutes, on a 2019 MacBook Pro, on 539 .vue files.

[ota-meshi]

If you can't find the cause, your problem may not be resolved.
Could you share your repository that reproduces the problem and wait for someone to find a solution?

[rndmerle]

It's the private repository of our company's product so I can't share it :(
I understand that without further details you can't do much.
If other ppl don't have this issue feel free to close the issue.
Because we don't lint on git hook or anything real-time we can live with 4-5mins linting once in a while.

[yoyo930021]

The reason is in #104.

[MayaRainer]

I'm fairly certain this is due to the issue #62 aims to fix. I run a fork with that PR applied and it completely fixed my performance issues.
Without it, typescript-eslint has to parse the entire project for every Vue expression, which really adds up.

[yoyo930021]

I'm fairly certain this is due to the issue #62 aims to fix. I run a fork with that PR applied and it completely fixed my performance issues.
Without it, typescript-eslint has to parse the entire project for every Vue expression, which really adds up.

If i am not mistaken,
Template expression allow TypeScript type in vue 3?

[MayaRainer]

Not as far as I have seen. I looked it up and didn't find any mention of that, either. I think you would need to use TSX for that.

[yoyo930021]

Try this #104 (comment)

[rndmerle]

Working great ! Down from 4-5' to 15"
Thanks.
I've to mention that we had to keep our config with "overrides". When I tried to merge everything under 'vue-eslint-parser' it would complain about missing project parameter (even tho it was defined and all .vue files had a <script lang="ts"> tag)

[yusuf-khamis]

Is anyone else experiencing this issue even after trying out the overrides, in my case am using nuxt with typescript and airbnb eslint extension, one vue file takes more than 2 minutes but if i just lint typescript files, it takes about 5 seconds, here is my config:

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    project: './tsconfig.json',
    createDefaultProgram: true,
    ecmaFeatures: {
      jsx: false,
      globalReturn: false,
      impliedStrict: false,
    },
  },
  env: {
    browser: true,
    node: true,
    es6: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'airbnb-typescript/base',
  ],
  plugins: [],
  settings: {
    'import/resolver': {
      typescript: {},
    },
  },
};

Help would be appreciated here, a whole project lint takes more than 20 minutes, which is absurd, and surprising thing, its the first am encountering even though I sometimes copy paste the config between different projects

ENV: node v16.15.1 (npm v8.11.0)