feat: redesign additional extensions, VitePress, PetiteVue support

[johnsoncodehk]

close #4251, close #3472

Motivation

In the past, the behavior of configuring additional extensions, VitePress and PetiteVue was inconsistent between IDEs and vue-tsc is inconsistent.

For example, when "vue.server.additionalExtensions": ["nvue"] is configured, but vueCompilerOptions is set to default:

• .nvue files become project files for the Vue language server.
• .nvue files do not become project files for vue-tsc.
• The Vue language server can monitor .nvue files.

When vueCompilerOptions: { "extensions": [".vue", ".nvue"] } is configured, but vue.server.additionalExtensions is set to default:

• .nvue files become project files for the Vue language server.
• .nvue files become project files for vue-tsc.
• The Vue language server cannot monitor .nvue files.

This PR is to address this inconsistency. vue.server.additionalExtensions is actually not needed, and we can achieve the above 3 points by only configuring vueCompilerOptions: { "extensions": [".vue", ".nvue"] }.

Changes

• Removed editor settings:
  • vue.server.additionalExtensions
  • vue.server.petiteVue.supportHtmlFile
  • vue.server.vitePress.supportMdFile
• Added editor setting:
  • vue.server.includeLanguages
• Added vueCompilerOptions:
  • vitePressExtensions
  • petiteVueExtensions

Usage

Custom Vue Extensions Support

Using .nvue extension in uni-app as an example.

1. Add .nvue to the tsconfig/jsconfig include and vueCompilerOptions.extensions options:

   // tsconfig.json/jsconfig.json
   {
       "include": [
      	 "src/**/*.ts",
      	 "src/**/*.vue",
   +    "src/**/*.nvue",
       ],
       "vueCompilerOptions": {
   +    "extensions": [".vue", ".nvue"],
       },
   }

2. For VSCode support, add .nvue to the VSCode files.associations setting:

   // .vscode/settings.json
   {
       "files.associations": {
   +    "*.nvue": "vue"
       },
   }

VitePress Support

1. Add .md to the tsconfig/jsconfig include and vueCompilerOptions.vitePressExtensions options:

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

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

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

PetiteVue Support

1. Add .html to the tsconfig/jsconfig include and vueCompilerOptions.petiteVueExtensions options:

   // tsconfig.json/jsconfig.json
   {
       "include": [
      	 "src/**/*.ts",
      	 "src/**/*.vue",
   +    "src/**/*.html",
       ],
       "vueCompilerOptions": {
   +    "petiteVueExtensions": [".html"],
       },
   }

2. For VSCode support, add html to the VSCode vue.server.includeLanguages setting:

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

Notes

Vue language server is currently unable to watch additional extensions, we need to wait for the next release of @volar/language-server to expose the API for dynamically registering file watchers. (Fixed by 31c9148)