docs: Need clearer description about triple slash command

[alexzhang1030]

Clear and concise description of the problem

In the vitest documentation, i think we should clearer description about triple slash command,

👇 This is the description of aaa in the documentation

To configure vitest itself, add test property in your Vite config. You'll also need to add a reference to Vitest types using a triple slash command at the top of your config file, if you are importing defineConfig from vite itself.

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // ...
  },
})

Suggested solution

should we update the doc to this ? 👇

To configure vitest itself, add test property in your Vite config. You'll also need to add a reference to Vitest types using a triple slash command at the top of your config file, if you are importing defineConfig from vite itself.

using defineConfig from vite you should follow this:

/// <reference types="vitest" />
import { defineConfig } from 'vite'

export default defineConfig({
  test: {
    // ...
  },
})

using defineConfig from vitest/config you should follow this:

import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    // ...
  },
})

Alternative

No response

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[meshantz]

I couldn't get this to work following the instructions as documented. The thing that was missing from my understanding was that 'vitest' needed to be imported for the reference to work. Could we add that into the docs as well?

ie:

import 'vitest'
/// <reference types="vitest" />
import { defineConfig } from 'vite'

[nmay231]

@meshantz I had the exact same issue. I don't know what the problem was exactly, but I nuked my lock file and reinstalled and that did the trick.

rm yarn.lock
yarn install

Note: you can either 1) use the triple reference in your vite.config.ts (you don't need to import vitest), or 2) you can add "vitest/globals" to "types" in your tsconfig.json.

{
  "compilerOptions": {
    "types": ["vitest/globals"]
  }
}

It might have been because I had multiple versions of vite installed unintentionally (try running yarn why vite. It said I had 4.1.2 and 4.0.4 installed), but it might have been some other random reason.