eslint v9 takes 45-60 seconds to lint ~150 files (vue + ts)

[Lilja]

eslint.config.js

// @ts-check

import globals from "globals";
import path from 'path';
import { fileURLToPath } from 'url';
import { FlatCompat } from '@eslint/eslintrc';
import eslint from "@eslint/js";
import tseslint from 'typescript-eslint';
import vueEslintParser from "vue-eslint-parser";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

const eslintrc = new FlatCompat({
    baseDirectory: __dirname
})

export default tseslint.config(
  {
      ignores: ["node_modules", "coverage", ".nyc_output", "dist", "**/.*"],
  },
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  ...eslintrc.plugins('vue'),
  ...eslintrc.extends('plugin:vue/vue3-recommended'),
  {
    languageOptions: {
      parserOptions: {
        tsconfigRootDir: __dirname,
        project: ['./tsconfig.json'],
        extraFileExtensions: ['.vue'],
        parser: tseslint.parser,
        sourceType: "module",
      },
      ecmaVersion: 2022,
      sourceType: "module",
      globals: {
        ...globals.browser,
      },
      parser: vueEslintParser,
    },
    files: ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"],
    rules: {
      "vue/multi-word-component-names": [
        "error",
        {
          ignores: ["Button", "Footer", "User"],
        },
      ],
      "@typescript-eslint/no-unused-vars": [
        "warn",
        {
          argsIgnorePattern: "^_",
          varsIgnorePattern: "^_",
          caughtErrorsIgnorePattern: "^_",
        },
      ],
    },
  },
);

package.json

"eslint": "9.0.0-beta.1",
"eslint-plugin-vue": "^9.22.0",
"typescript": "^5.3.3",
"typescript-eslint": "^7.1.0",

tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "module": "NodeNext",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "skipLibCheck": true,

    "moduleResolution": "NodeNext",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve",

    "strict": true,
    "strictNullChecks": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

File summary, grouped by file extension

$ # All files listed grouped by extensions, counted
$ ls -l src/**/*.ts src/**/*.vue tests/**/*.ts | grep -o '\.\(ts\|vue\)' | sort | uniq -c
     54 .ts
     95 .vue

$ # All files with its file size sumarized
$ ls -l src/**/*.ts src/**/*.vue tests/**/*.ts | awk '{ total += $5 }; END { print total }'
600237
^ 600 kilobytes

When I run eslint on my machine:

  System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 13.15 GB / 15.59 GB
    Container: Yes
    Shell: 3.6.1 - /bin/fish
    Virtualized with windows WSL

Results:

$ time yarn lint
yarn run v1.22.4
$ ESLINT_USE_FLAT_CONFIG=true yarn eslint
$ /home/lilja/code/gantt-experiment/app/node_modules/.bin/eslint

/home/lilja/code/gantt-experiment/app/src/App.vue
   2:45  warning  'watch' is defined but never used. Allowed unused vars must match /^_/u        @typescript-eslint/no-unused-vars
  50:7   warning  'qc' is assigned a value but never used. Allowed unused vars must match /^_/u  @typescript-eslint/no-unused-vars

/home/lilja/code/gantt-experiment/app/src/Layout.vue
  1:1  error  Component name "Layout" should always be multi-word  vue/multi-word-component-names

<omitted>

✖ 172 problems (55 errors, 117 warnings)

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

________________________________________________________
Executed in   32.00 secs    fish           external
   usr time   48.26 secs   45.00 micros   48.26 secs
   sys time    2.93 secs  281.00 micros    2.93 secs

It somehow takes almost a full minute to run through... I could try to run it on a mac but surely it should not take a full minute in a virtualized environment?

[Lilja]

Ignoring vue decreases time severely:

- ignores: ["node_modules", "coverage", ".nyc_output", "dist", "**/.*"],
+ ignores: ["node_modules", "coverage", ".nyc_output", "dist", "**/.*", "**/*.vue"],

- files: ["src/**/*.ts", "src/**/*.vue", "tests/**/*.ts"],
+ files: ["src/**/*.ts", "tests/**/*.ts"],

lilja in ~/c/g/app on master λ time yarn lint
yarn run v1.22.4
$ ESLINT_USE_FLAT_CONFIG=true yarn eslint
$ /home/lilja/code/gantt-experiment/app/node_modules/.bin/eslint

/home/lilja/code/gantt-experiment/app/src/activity/adjust/dependant.ts
    1:20  warning  'relativeSDate' is defined but never used. Allowed unused vars must match /^_/u           @typescript-eslint/no-unused-vars
<omitted>

/home/lilja/code/gantt-experiment/app/src/query.ts
  276:7  warning  'sleep' is assigned a value but never used. Allowed unused vars must match /^_/u   @typescript-eslint/no-unused-vars
<omitted>

✖ 9 problems (0 errors, 9 warnings)

Done in 4.63s.

________________________________________________________
Executed in    4.82 secs    fish           external
   usr time    8.20 secs   56.00 micros    8.20 secs
   sys time    0.53 secs  271.00 micros    0.53 secs

[Lilja]

About the same time from my initial post by doing the reverse, ignoring all typescript files and just doing vue things:

$ time yarn lint
yarn run v1.22.4
$ ESLINT_USE_FLAT_CONFIG=true yarn eslint
$ /home/lilja/code/gantt-experiment/app/node_modules/.bin/eslint

<omitted>
________________________________________________________
Executed in   31.79 secs    fish           external
   usr time   46.64 secs   57.00 micros   46.64 secs
   sys time    2.66 secs  271.00 micros    2.66 secs

Edit: found TIMING=1:

Rule                                | Time (ms) | Relative
:-----------------------------------|----------:|--------:
vue/no-child-content                |   225.458 |    29.7%
@typescript-eslint/no-unused-vars   |    97.340 |    12.8%
no-redeclare                        |    63.705 |     8.4%
vue/html-indent                     |    24.169 |     3.2%
vue/html-closing-bracket-newline    |    15.253 |     2.0%
vue/multi-word-component-names      |    13.636 |     1.8%
vue/component-tags-order            |    12.321 |     1.6%
vue/no-reserved-component-names     |    11.622 |     1.5%
vue/no-async-in-computed-properties |    10.736 |     1.4%
vue/valid-define-props              |    10.692 |     1.4%

[Lilja]

I managed to replicate something...

I created 150 vue files based on a vue file I created. See bootstrap.js for how the files are created.

Go to the stackblitz, and run time TIMING=all ESLINT_USE_FLAT_CONFIG=true yarn run eslint

It took 21 seconds for 150 vue files to be linted. Is that an expected amount of time?

[Lilja]

I managed to reduce a lot of overhead with this workaround

[Rec0iL99]

Hi @Lilja, since the rules are coming from eslint-plugin-vue, I think the best path forward here is to contact the maintainers there for help.