Vscode html language features

Custom Data Format: Evolving HTML and CSS language features

The web evolves and so do its languages. New entities continue to land in HTML and CSS specifications. Custom Elements and Houdini allow users to extend HTML and CSS semantics. Many developers today use programming languages that embed HTML and CSS. Although HTML and CSS see increasingly flexible usage, editor support for new features often lags behind.

To modernize the HTML and CSS language support in Visual Studio Code, we designed the Custom Data Format, a declarative JSON format for describing HTML and CSS entities. VS Code’s HTML and CSS language servers can read data defined in this format and provide language support for the newly defined HTML and CSS entities.

In this blog post, we explain the data format and how users and extension authors can take advantage of it.

Using Custom Data Format

VS Code provides information about HTML/CSS entities in auto-completion and hovers information:

With the Custom Data Format, users can easily define new HTML/CSS entities and get auto-completions, hover information, and other language features.

To get started, users can write a JSON file html.html-data.json :

 "version": 1.1, "tags": [   "name": "my-button", "description": "My button. You should use it as in ` `.", "references": [   "name": "Bootstrap buttons", "url": "https://getbootstrap.com/docs/4.0/components/buttons/"  >  ]  >  ] > 

Then define a html.customData value in your user or workspace settings pointing to that data file:

 "html.customData": ["./html.html-data.json"] > 

You then get language features for the defined entities:

You can try this feature by opening the preconfigured Custom Data hello world sample with VS Code. You can edit the HTML/CSS custom data files in order to add, remove, or refine the definitions of custom entities and fine-tune the language features.

The html.customData and css.customData settings serve as a good starting point for using Custom Data. However, there are other ways to take advantage of Custom Data as well. In the following sections, we describe how extension authors can share curated sets of Custom Data or leverage Custom Data to build language support.

Sharing Custom Data through extensions

Today, many web frameworks are built on top of HTML. For example, the Mavo project extends HTML syntax with various mv- attributes. Custom Data makes it easy to support such web frameworks:

• Generate Custom Data for all Mavo attributes.
• Point to the Custom Data file in the contributes.html.customData extension Contribution Point.
• Publish the extension to help others use the Mavo framework in VS Code.

By downloading the Mavo extension, users get auto-completion and hover information for all Mavo attributes in HTML files:

The extension’s source code is at the vscode-mavo repository. We hope the project serves as a starting point for implementing web framework or language support in VS Code. You can find more information about the contributes.html.customData and contributes.css.customData Contribution Points at vscode-custom-data.

Using Custom Data for language servers

The vscode-html-languageservice and vscode-css-languageservice libraries allow extension authors to easily implement language servers for languages that extend or embed HTML and CSS. Recently, we added an API for loading custom data:

import  getLanguageService > from 'vscode-html-languageservice' getLanguageService( customDataProviders: [. ] >) 

Our built-in HTML language server utilizes this API to load a curated set of Custom Data that we have collected from various sources:

• W3C specifications of HTML, CSS, and WAI-ARIA
• Mozilla Developer Network
• Mozilla’s mdn-data and mdn-browser-compat-data packages
• Chrome’s ranking of CSS properties usage

We have published this set of data to NPM. You can find the data on GitHub as well. Language server authors might use this dataset in combination with our HTML/CSS language services to implement support for their languages that extend or embed HTML/CSS, or they could use this data to implement support for languages that transpile to HTML/CSS, such as Pug or Stylus. Finally, we will continue to curate this dataset to provide up-to-date language support for HTML/CSS in VS Code.

Summary

The VS Code team is committed to providing a good editing experience for web languages. Through the Custom Data Format, we stay close to the latest HTML and CSS language features and offer a simple interface for users and extension authors to customize their HTML and CSS editing experience.

You can read more about the Custom Data Format in the vscode-custom-data repository, where you can open issues and feature requests.

Pine Wu, VS Code Team member @octref

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

SimonSiefke/vscode-html-language-features

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

HTML Language Features for VSCode

Important: The following features have been moved into a separate extension

Note: for this to work, you need to disable:

You can specify custom data inside your vscode settings. Make sure to specify categories for custom tags, otherwise they won’t show up.

< "html.customData": < "tags": < "my-button": < "description": "Custom button element", "categories": ["flow content", "phrasing content", "palpable content"] > > > >

This project is based on vscode-html-language-service and vscode-html-language-features The descriptions for tags and attributes are taken from MDN and Whatwg

Источник

VS Code — You don’t need a formatting extension (Prettier and friends)

In a previous post, VS Code: You don’t need that extension part 2, I discussed how you may not need an extension for (prettily) formatting your code (see item 5). You can use the built-in formatters for a number of languages. However, at that time, the advice I gave came with some caveats.

VS Code has builtin formatters for HTML, JavaScript, TypeScript, and JSON. This is a decent basis for frontend developers and JavaScript-oriented backend developers. However, there was nothing for CSS and CSS-like syntaxes. A big omission in my opinion!

This has been rectified in v1.66 (March 2022). The built-in CSS extension now ships with a formatter. The formatter works with CSS, LESS, and SCSS. It is implemented using the JS Beautify library. 🌟

Settings for languages with builtin formatters

To use the builtin formatters, you can add the following settings to your Settings.json:

"[html]":  
"editor.defaultFormatter": "vscode.html-language-features"
>,
"[javascript][javascriptreact][typescript]":  
"editor.defaultFormatter": "vscode.typescript-language-features"
>,
"[json][jsonc]":  
"editor.defaultFormatter": "vscode.json-language-features"
>,
"[css][scss][less]":  
"editor.defaultFormatter": "vscode.css-language-features"
>

Since VS Code uses the JS Beautify library under the hood, which is also used by the Beautify extension, you can expect similar results to that extension. This may or may not to your taste, but it does a solid job.

Your mileage may vary for the formating of JSONC, it is asking the JSON Language Features extension to deal with “illegal” comments, but it appears to manage without issues. I don’t use React, so I can’t comment how well React code is formatted.

Settings added to control the formatting of CSS, LESS, and SCSS

You configure how the formatting is done with the following settings:

• css.format.enable — Enable/disable default CSS formatter.
• css.format.newlineBetweenRules — Separate rulesets by a blank line.
• css.format.newlineBetweenSelectors — Separate selectors with a new line.
• css.format.spaceAroundSelectorSeparator — Ensure a space character around selector separators ‘>’, ‘+’, ‘~’ (for example, a > b ).

The same settings also exist for Less and SCSS. Maybe more of JSBeautify’s configuration options will be exposed later on. We will see, I guess!

Final word

For frontend developers and JavaScript-oriented backend developers, the builtin formatters should have you covered now. As long as you happy with the output, then you may not need another formatting extension.

And since, many language support extensions are also formatters e.g. Python, Language Support for Java by Red Hat, Ruby, YAML, XML Tools, Vetur for Vue, and Svelte for VS Code. Now, it is easier than ever to forgo using a dedicated formatter extension! 🆒

Rob O’Leary

You made it to the bottom! If any of my articles, demos, or open source projects have helped you, consider supporting me.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Language services for HTML

License

microsoft/vscode-html-languageservice

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

HTML language service extracted from VSCode to be reused, e.g in the Monaco editor.

The vscode-html-languageservice contains the language smarts behind the HTML editing experience of Visual Studio Code and the Monaco editor.

• doComplete / doComplete2 (async) provide completion proposals for a given location.
• setCompletionParticipants allows participant to provide suggestions for specific tokens.
• doHover provides hover information at a given location.
• format formats the code at the given range.
• findDocumentLinks finds all links in the document.
• findDocumentSymbols finds all the symbols in the document.
• getFoldingRanges return folding ranges for the given document.
• getSelectionRanges return the selection ranges for the given document. .

npm install --save vscode-html-languageservice 

How can I run and debug the service?

• open the folder in VSCode.
• set breakpoints, e.g. in htmlCompletion.ts
• run the Unit tests from the run viewlet and wait until a breakpoint is hit:

How can I run and debug the service inside an instance of VSCode?

• run VSCode out of sources setup as described here: https://github.com/Microsoft/vscode/wiki/How-to-Contribute
• link the folder of the vscode-html-languageservice repo to vscode/extensions/html-language-features/server to run VSCode with the latest changes from that folder:
  • cd vscode-html-languageservice , yarn link
  • cd vscode/extensions/html-language-features/server , yarn link vscode-html-languageservice
• run VSCode out of source ( vscode/scripts/code.sh|bat ) and open a .html file
• in VSCode window that is open on the vscode-html-languageservice sources, run command Debug: Attach to Node process and pick the code-oss process with the html-language-features path
• set breakpoints, e.g. in htmlCompletion.ts
• in the instance run from sources, invoke code completion in the .html file

Copyright 2016-2020, Microsoft

With the exceptions of data/*.json , which is built upon content from Mozilla Developer Network and distributed under CC BY-SA 2.5.

Источник