Markdown files don't have IntelliSense out of the box

[salazarr-js]

Describe the bug

Markdown files in VitePress projects don't have IntelliSense support for Vue features by default when using the official Vue Volar plugin in VS Code.

Reproduction

1. Create a new vitepress project using the setup wizard

npx vitepress init 

2. Install the last version of the official vs code - vue plugin
   https://marketplace.visualstudio.com/items?itemName=Vue.volar

3. Use any Vue features inside a markdown file
   https://vitepress.dev/guide/using-vue#using-vue-in-markdown

index.md

---
hello: world
---

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

## Markdown Content

The count is: {{ count }}

<button :class="$style.button" @click="count++">Increment</button>

<style module>
.button {
  color: red;
  font-weight: bold;
}
</style>

Expected behavior

We can expect Vitepress and Volar to work seamlessly and provide IntelliSense feature out of the box on .md files, but according to this vue language tool merged PR, to achieve this, we have to follow a few steps.

VitePress Support

1. Add .md to the tsconfig include option:

// tsconfig.json
{
    "include": [
   	 "src/**/*.ts",
   	 "src/**/*.vue",
        "src/**/*.md",
    ],
}

2. Add .md to the tsconfig vueCompilerOptions.vitePressExtensions option:

// tsconfig.json
{
    "include": [
   	 "src/**/*.ts",
   	 "src/**/*.vue",
   	 "src/**/*.md",
    ],
    "vueCompilerOptions": {
      "vitePressExtensions": [".md"],
    },
}

3. For VSCode support, add markdown to the VSCode vue.server.includeLanguages setting:

// .vscode/settings.json
{
    "vue.server.includeLanguages": ["vue", "markdown"]
}

These steps aren't mentioned on the vitepress documentation, I'd like to add those steps to the documentation but wanna be sure first if this has been taken into consideration

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 5800X 8-Core Processor
    Memory: 16.88 GB / 31.91 GB
  Binaries:
    Node: 20.17.0 - ~\AppData\Local\fnm_multishells\5536_1729010351260\node.EXE
    npm: 10.8.2 - ~\AppData\Local\fnm_multishells\5536_1729010351260\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.86)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    vitepress: ^1.4.1 => 1.4.1
  VsCode Plugins
    vue.volar v2.1.6

Additional context

There is an open discussion at vuejs/eslint-plugin-vue repository to Add support for recognizing Vue components in .md files with the idea of improving the developer experience using Vitepress

Validations

• Check if you're on the latest VitePress version.
• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

That support is bit broken post v1.8 of volar. We still have to test it out to make sure it works. Last I checked the source-line mapping was messed up.

[salazarr-js]

@brc-dd that what you mention is related to this bug?

[brc-dd]

Ah, huh maybe. Have you tried on the latest version? Did you see any issues or was it working fine? Check import completion once too 👀 I'm still on 2.0.26. If it's working fine we can add it to the docs. Maybe a new page "Typescript Support"?

[salazarr-js]

I did a quick test and looks good to me

I'm not sure about the Typescript Support page since the IntelliSense should work on both typescript and javascript scripts via tsconfig.json or jsconfig.json

We can add an IntelliSense support section at the end of the Using Vue in Markdown page.

[brc-dd]

ok yeah sure 👍

[salazarr-js]

I'm going to create the PR but it will be my first contribution, there is something I must take into consideration besides the contributing guidelines?

[brc-dd]

Ah, no. I'll adjust it if necessary. Just update the English docs or the Spanish ones if you're familiar.