Integrate Volar for the built-in HTML Extension

[johnsoncodehk]

This PR tries to implement html-language-features with Volar.js, which is the framework used by Vue - Official, MDX, Astro behind the scenes. Compared with the original implementation, supporting embedded documents should be much simpler.

Preview Extension: johnsoncodehk#1

Features / Bug Fixes

• Support auto-complete of TS directive comments (@ts-ignore, @ts-expecte-error...)
• Support path completion in script tag import statement
• Support built-in types/jquery types definition jump
• Localized TS diagnostic message
• Fixes [html] Javascript intellisense in inline scripts from external references #26338
• Fixes [html] support 'import' in <script type=module> tags #29315
• Fixes [html] provide rename for embedded JavaScript #31141 (Cross file renaming)
• Fixes [html] JSON edit support inside HTML document / script tag with type="application/json" #36280
• Fixes [html] Support SCSS in HTML with <style type="text/scss"> #57469
• Fixes [html] support less syntax in html file #59445
• Fixes [html] don't let '/' trigger a suggest in embedded JavaScript #97949
• Fixes [html] Unecessary warning when script contains quotes on the same line as an onFoo attribute using the same quotes #109092
• Fixes [html] support imports in embedded JavaScript #114115
• Fixes [html] Unexpected "Declaration or statement expected" in HTML code #135849
• Fixes [html] "Cannot redeclare block-scoped variable" in script type module #169117
  • Fixes Invalid error message: "Cannot redeclare block-scoped variable" vscode-html-languageservice#133
• Fixes [html] Format does not work if script tag parameters do not have quotes #210303
• Fixes [html] Formatting Breaks with Space Between Commented Lines in Script Tag #213628
• Fixes [html] Vscode detect wrong scope for script with type=module #229357
• Fixes CSS Lint Unknown Properties doesn't ignore warnings #241481
• Fixes Global library type declarations not recognized in inline <script> tags #250216

[aeschli]

That's really cool, well architectured.
It would be great if we could switch to such a setup and profit from your work. The main challenge is of course that we would rely on a code base that is all owned by volar. I'll bring it up for discussion with the team here and we see what can be done.

[laundmo]

This would be great to have - was there any decision by the team?

[johnsoncodehk]

If anyone wants to test this, you can find the preview extension here: johnsoncodehk#1

[dbarbeau]

👋🏽 Hello and thank you for this work. I've been using it for a few weeks and it is a nice improvement over the existing builtin.

One issue I've stumbled upon is with this type of construct, in a ./templates/a_component.html file:

<script>
     import {mySymbol} from "myLib";
     // ....
</script>

Where myLib is declared as an alias in tsconfig.json .

VSCode gives me this output

Cannot find module 'myLib'. Did you mean to set the 'moduleResolution' option to 'nodenext', or to add aliases to the 'paths' option?

My ./tsconfig.json looks like:

{
    "compilerOptions": {
        "baseUrl": "./",
        "allowJs": true,
        "checkJs": true,
        "paths": {
            "myLib": [
                "./assets/js/mylib.js"
            ]
        },
        "noEmit": true
    },
    "exclude": [
        "**/*node_modules"
    ]
}

The extension doesn't seem to pick up the tsconfig.json. I've read through the diff and the issue seems to be that the compiler options are hard-coded (here).

Do you think it could be possible to merge that config with a tsconfig.json found in the current file's directories ancestors?

Again, thanks for this work, it make working with good old plain HTML a nice experience.

[johnsoncodehk]

@dbarbeau Identifying the tsconfig file might break past expected behavior. It's better to first open an issue to ensure this behavior is acceptable.

On the other hand, in the old implementation, TS2792 was hardcoded to be ignored, and we need to replicate this in the new implementation: https://github.com/microsoft/vscode/pull/171547/files#diff-59eb51223528724f029725ed9e90b92046cde69ea26e07e8059fd4f349a320e5L102-L105