How do I configure VSCode to offer vitest auto imports?

Question

In VSCode, I have a very small project with vite and vitest installed. With vitest, unlike with jasmine or jest, you need to explicitly import symbols like describe, it, expect etc.

Unfortunately, VS Code does not even offer auto-import (cmd + .):

I have Vitest extension installed if that matters (VSCode is not my primary IDE, so I might be missing something).

How do I configure my environment so that I can easily import those functions?

Scowl

In my case it offers autocomplete from vitest package. Is it not enough for you or it doesn't work? – Hedrick

@RomanBatsenko As you see, it doesn't work: "No code actions available" – Scowl

Answer 1

Setting up automatic imports for Vitest may help. Try to do the following

• Open VSCode settings
• Search for "Auto Import" in the search bar
• Scroll down to the "JavaScript › Auto Import: Custom" section and click on the "Edit in settings.json".
• Add the following config:

"javascript.suggest.autoImports": true,
"javascript.preferences.importModuleSpecifier": "relative", "javascript.preferences.importModuleSpecifiers": { "@vitest": "./node_modules/vitest/src" }

• Save and restart vscode

Rann

Thanks. I did it for typescript actually, the last setting importModuleSpecifiers doesn't seem to be recognized (1.76.2), but it does work anyway. :) – Scowl

Answer 2

First, no VS Code changes are necessary.

Here's a reference to their documentation. Vitest Config Globals

I'll provide an example with a minor custom vite configuration with TypeScript.

// vite.config.ts
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'

export default defineConfig({
  plugins: [tsconfigPaths()],
})

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import config from './vite.config';

export default defineConfig({
  ...config,
  test: {
    globals: true,
  }
});

// tsconfig.json
{
  "compilerOptions": {
    "types": ["vitest/globals"],
  }
}

Cyte