Web frameworks
The language servers, highlighting and new-file templates the app brings for HTML, CSS, SCSS, React, Vue, Svelte and Astro projects.
Web projects get their language servers, highlighting and file templates from the app's built-in language manifests, like every other language. As with any language server, the app installs each server from the package registry after asking, the first time a file of its language opens.
Languages
| Language | Files | Language server | Highlighting |
|---|---|---|---|
| HTML | .html, .htm | html-lsp (vscode-html-language-server), with formatting and embedded CSS and JavaScript | Yes |
| CSS | .css | css-lsp (vscode-css-language-server), with formatting | Yes |
| SCSS | .scss | css-lsp | Yes |
| TypeScript | .ts, .mts, .cts, .tsx | vtsls | Yes |
| JavaScript | .js, .jsx, .mjs, .cjs | vtsls | Yes |
| Svelte | .svelte | svelte-language-server (svelteserver) | Yes |
| Vue | .vue | None | Yes, with the HTML grammar |
| Astro | .astro | None | Yes |
Vue and Astro files are highlighted but have no language server yet, so they get no diagnostics, completion or go to definition.
New-file templates
Creating a file in the file tree opens New, with a Name field and the templates that fit the folder. Templates for web components are offered only in a project with a package.json in the folder or one of its parents, up to the root of the file tree.
| Template | Group | Creates | Also needs |
|---|---|---|---|
| React component | TypeScript | <name>.tsx, a function component named after the file | A package.json or tsconfig.json |
| React component | JavaScript | <name>.jsx | |
| Vue component | Vue | <name>.vue with <script setup lang="ts">, a template and a scoped style | |
| Svelte component | Svelte | <name>.svelte with a TypeScript script, markup and a style | |
| Astro component | Astro | <name>.astro with its frontmatter fence, markup and a style | |
| Module, Test | TypeScript, JavaScript | <name>.ts or .js, and <name>.test.ts or .test.js with a describe block |
The new file opens with the cursor where you start writing. A name that already exists is refused, and Empty file, under Other, is always offered.
export function Button() {
return <div></div>;
}<script lang="ts">
</script>
<div></div>
<style>
</style>Project tasks
The package.json scripts of a web project run from the command palette, with the package manager its lockfile names. See Project search and tasks.
Languages, servers and templates are data in manifests. An extension can add more without a new app release.