https://github.com/nberlette/vscode-webidl
WebIDL Language Support for VSCode, featuring the most accurate syntax highlighter available for *.webidl and *.idl files, and linting/formatting powered by webidl2!
https://github.com/nberlette/vscode-webidl
formatter idl linter syntax-highlighting tmlanguage vscode vscode-extension vsix webidl webidl-lang webidl2
Last synced: 4 days ago
JSON representation
WebIDL Language Support for VSCode, featuring the most accurate syntax highlighter available for *.webidl and *.idl files, and linting/formatting powered by webidl2!
- Host: GitHub
- URL: https://github.com/nberlette/vscode-webidl
- Owner: nberlette
- License: mit
- Created: 2026-05-20T03:01:25.000Z (24 days ago)
- Default Branch: main
- Last Pushed: 2026-06-02T15:43:11.000Z (11 days ago)
- Last Synced: 2026-06-02T17:11:34.560Z (11 days ago)
- Topics: formatter, idl, linter, syntax-highlighting, tmlanguage, vscode, vscode-extension, vsix, webidl, webidl-lang, webidl2
- Language: TypeScript
- Homepage: https://marketplace.visualstudio.com/items?itemName=nberlette.webidl
- Size: 125 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# WebIDL for VSCode
[](https://marketplace.visualstudio.com/items?itemName=nberlette.webidl2)
[](https://github.com/nberlette/vscode-webidl/issues)
[](https://github.com/nberlette/vscode-webidl/stargazers)
[](https://github.com/nberlette/vscode-webidl/blob/main/LICENSE)
This extension brings a complete editing experience for
[Web IDL](https://www.w3.org/TR/WebIDL/) to VSCode and compatible editors, on
both desktop and web. It provides syntax highlighting, on‑the‑fly validation,
semantic linting, formatting and simple commands to help you work with WebIDL
definitions more productively.
## Features
The extension uses the [webidl2](https://github.com/w3c/webidl2.js/) library
under the hood to parse, validate, and format your IDL.
- **Syntax highlighting:** A comprehensive TextMate grammar describes WebIDL
syntax so that keywords, literals, identifiers and punctuation are colored
correctly.
- **Automatic diagnostics:** Whenever you open or edit a WebIDL file the
extension parses it and runs semantic validation. Diagnostics are shown inline
in the editor with error or warning severity depending on the issue. The
validation logic is powered by `webidl2.validate()`. Syntax and semantic
problems are reported with concise messages, rule names where available, and
precise token ranges when the parser exposes them.
- **Document formatting:** You can reformat a WebIDL document using either the
`WebIDL: Format Document` command or the built‑in _Format Document_ action.
Formatting parses the document, applies any available autofixes and
regenerates canonical output using `webidl2.write()`. Autofixes are applied
transparently to your buffer.
- **Manual validation:** Use the `WebIDL: Validate Document` command to run
validation on demand. When no problems are found an informational notification
appears.
### Commands
| Command ID | Description |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| `webidl.format` | Formats the current WebIDL document in place using `webidl2.write()` and any available autofixes. |
| `webidl.validate` | Parses and validates the active WebIDL document using `webidl2.parse()` and `webidl2.validate()`. Diagnostics are published to the editor. |
## Usage
1. Install the extension from the VS Code Marketplace or by side‑loading the
`.vsix` created from this repository.
2. Open a file with a `.webidl` or `.idl` extension. The extension activates
automatically on the first WebIDL file.
3. Edit your WebIDL as usual. Syntax errors are highlighted immediately.
Semantic warnings (for example, using a `sequence` type on an attribute)
appear as you type.
4. Run **WebIDL: Format Document** from the command palette
(`⇧⌘P`/`Ctrl+Shift+P`) to reflow your definitions. The formatter parses the
AST with `webidl2.parse()`, applies autofixes exposed by `webidl2.validate()`
and then writes the result with `webidl2.write()`.
5. Run **WebIDL: Validate Document** to manually re‑evaluate the current file
and see a summary in the notifications area.
### Example
The following IDL contains a semantic error: an attribute may not have a
sequence type. When the file is opened or edited, the extension adds a
diagnostic to the offending token.
```webidl
interface Example {
attribute sequence data;
};
```
The validation API in `webidl2` returns an array of problem objects whose
`message`, `line`, `level`, token and rule fields describe the issue. The
extension enriches those tokens with source ranges, converts the results into
VS Code diagnostics and displays them inline. Formatting the example would leave
the semantic error intact but tidy up whitespace and braces.
### Configuration
The extension relies only on the built‑in VS Code settings. There are no custom
configuration options at this time, but you can control editor behavior through
standard settings such as `editor.formatOnSave` to automatically format WebIDL
files on save.
---
## Contributing
Contributions to this project are warmly welcomed! If you have an idea for a new
feature, a bug fix, or an improvement to the documentation, please open an
issue, and if appropriate, feel free to open a pull request on GitHub.
Opening an issue first is always a good idea to discuss your proposed changes
and get feedback from the maintainers/community before investing time in a PR.
> [!TIP]
>
> Please refer to the [contributing guidelines](.github/CONTRIBUTING.md) for
> more details on how to contribute effectively to this project.
---
[MIT] © [Nicholas Berlette]. All rights reserved.
[MIT]: https://nick.mit-license.org "MIT © Nicholas Berlette"
[Nicholas Berlette]: https://github.com/nberlette "Follow Nicholas Berlette on GitHub"
[github]: https://github.com/nberlette/vscode-webidl "Give the vscode-webidl extension a star on GitHub! ⭐"
[issues]: https://github.com/nberlette/vscode-webidl/issues "Report issues on GitHub"
[webidl2]: https://github.com/w3c/webidl2.js/#readme "The webidl2.js library on GitHub"
[webidl2.ts]: https://github.com/nberlette/webidl2.ts "A TypeScript port of webidl2.js on GitHub"