VS Code showing eslint error but vitest is working. 'vi' is not defined

Question

I have the following tsconfig configuration:

{
  "include": ["tests/**/*.ts"],
  "exclude": [],
  "compilerOptions": {
    "composite": true,
    "lib": [],
    "skipLibCheck": true,
    "outDir": "lib",
    "types": ["vitest/globals"]
  }
}

As I have defined types for vitest/globals so yarn vitest cmd is working fine and executing the tests cases as well.

But in VS Code its showing me the following error:

How I can fix or silence this issue in vs-code?

Thruway

Answer 1

I had to add the following to my .eslintrc.json file to fix this issue in a test setup module:

"globals": {
  "vi": true
},

If you're using TypeScript, you should also add the following to your compilerOptions in your tsconfig.json. (You already had this, but I'm mentioning it anyway in case it helps someone else):

"types": ["vitest/globals"]

Ryals

Answer 2

My solution for this problem was to increase the ecmaVersion in the .eslintrc.js file from 2020 to 2022 like this:

"parserOptions": {
  "ecmaVersion": 2022,
}

Since you are using TypeScript, you could also try setting the target to 2022 like this:

"compilerOptions": {
  "target": "ES2022"
}

Bop

Answer 3

Note that the plugin eslint-vitest-plugin was renamed to @vitest/eslint-plugin because the author lost access to his npm account.

In the new package:

• With the eslint legacy config (.eslintrc.*), this is how to use it:

{
    env: {
        '@vitest/env': true
    },
    extends: ['plugin:@vitest/legacy-recommended'],
    plugins: ['@vitest']
}

• With the eslint new flat config (eslint.config.js), this is the way:

import vitest from '@vitest/eslint-plugin';
...
{
    files: '**/__tests__/**/*.whatever.[jt]s',
    plugins: {
        vitest
    },
    languageOptions: {
        globals: {
            ...vitest.environments.env.globals
        }
    },
    rules: {
        ...vitest.configs.recommended.rules
    }
}

Calcareous