vue-eslint-parser icon indicating copy to clipboard operation
vue-eslint-parser copied to clipboard

Very slow with typescript-eslint parser and `project`

Open rndmerle opened this issue 6 years ago • 14 comments

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 https://github.com/typescript-eslint/typescript-eslint/issues/389 but the performance on our project when excluding .vue files is ok, so it's really the parsing of

Our eslint parsing options:

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

rndmerle avatar Feb 22 '20 18:02 rndmerle

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

lukaVarga avatar Feb 26 '20 08:02 lukaVarga

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
          },
        },
      ],
    },
  ],
}

rndmerle avatar Jun 15 '20 10:06 rndmerle

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

ota-meshi avatar Dec 03 '20 05:12 ota-meshi

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.

rndmerle avatar Dec 11 '20 17:12 rndmerle

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?

ota-meshi avatar Dec 12 '20 03:12 ota-meshi

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.

rndmerle avatar Dec 12 '20 10:12 rndmerle

The reason is in https://github.com/vuejs/vue-eslint-parser/issues/104.

yoyo930021 avatar Mar 05 '21 12:03 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.

MayaRainer avatar Mar 09 '21 13:03 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.

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

yoyo930021 avatar Mar 09 '21 14:03 yoyo930021

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.

MayaRainer avatar Mar 09 '21 14:03 MayaRainer

Try this https://github.com/vuejs/vue-eslint-parser/issues/104#issuecomment-875149361

yoyo930021 avatar Aug 24 '21 10:08 yoyo930021

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

rndmerle avatar Sep 02 '21 15:09 rndmerle

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)

yusuf-khamis avatar Aug 13 '22 15:08 yusuf-khamis

@yusuf-khamis have you found something? I have a similar issue but cannot resolve it by using the overwrite. Here's some of the research I've done. Would be nice if you could check this out if it yields to your problem as well: https://github.com/nuxt/nuxt/discussions/25257

SimonSimCity avatar Jan 26 '24 10:01 SimonSimCity