Skip to content

Conversation

@johnsoncodehk
Copy link
Contributor

@johnsoncodehk johnsoncodehk commented Jan 17, 2023

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

@johnsoncodehk johnsoncodehk changed the title feat: migrated to @volar/language-server Adopt embedded language framework for HTML extension Jan 17, 2023
@aeschli
Copy link
Contributor

aeschli commented Jan 18, 2023

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.

@johnsoncodehk johnsoncodehk mentioned this pull request Feb 8, 2024
42 tasks
@johnsoncodehk johnsoncodehk changed the title Adopt embedded language framework for HTML extension Integrate Volar for HTML Extension Feb 9, 2024
@johnsoncodehk johnsoncodehk changed the title Integrate Volar for HTML Extension Integrate Volar for the built-in HTML Extension Feb 9, 2024
@laundmo
Copy link

laundmo commented Oct 25, 2024

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

@johnsoncodehk
Copy link
Contributor Author

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

@dbarbeau
Copy link

dbarbeau commented Oct 1, 2025

👋🏽 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?
image

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
Copy link
Contributor Author

johnsoncodehk commented Oct 2, 2025

@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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment