docs: improve typescript setup explaination, close #1019 (#1020)

docs/config/index.md

@@ -10,6 +10,21 @@
 
 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](https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html#-reference-types-) at the top of your config file, if you are importing `defineConfig` from `vite` itself.
 
+using `defineConfig` from `vite` you should follow this:
+
+```ts
+/// <reference types="vitest" />
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  test: {
+    // ...
+  },
+})
+```
+
+using `defineConfig` from `vitest/config` you should follow this:
+
 ```ts
 import { defineConfig } from 'vitest/config'
 
@@ -206,6 +221,7 @@ Project root
 - **Default:** `'default'`
 
 Custom reporters for output. Reporters can be [a Reporter instance](https://github.com/vitest-dev/vitest/blob/main/packages/vitest/src/types/reporter.ts) or a string to select built in reporters:
+
   - `'default'` - collapse suites when they pass
   - `'verbose'` - keep the full task tree visible
   - `'dot'` -  show each task as a single dot