This extension gives VSCode support for tree-sitter syntax coloring. Examples with tree-sitter coloring on the right:
If you are using a color theme other than Light+
, Dark+
, or High contrast
, the colors applied to functions, fields, and types by tree-sitter will not match the colors of your theme. This is because it is currently not possible to access VSCode syntax colors programatically. As a workaround, you can add a section to your user settings that looks like:
{
"workbench.colorCustomizations": {
"treeSitter.field": "#ff0000",
"treeSitter.function": "#ff0000",
"treeSitter.type": "#ff0000"
}
}
replacing "#ff0000"
with colors that match your theme.
If you see something getting colored wrong, or something that should be colored but isn't, please make a PR to fix it! Colorization is performed by the various colorLanguage(x, editor)
functions at the top of extension.ts. When working on the colorization rules, please keep in mind two core principles:
- Good colorization is consistent. It's better to not color at all than to color inconsistently.
- Good colorization is selective. The fewer things that we color, the more emphasis the color gives.
It's straightforward to add any language with a tree-sitter grammar.
- Add a dependency on the npm package for that language:
npm install tree-sitter-yourlang
. - Add the language and color function to the dictionary in ./lib/extension.ts.
- Add a simplified TextMate grammar to
./src/yourlang.tmLanguage.json
. The job of this textmate grammar is just to color keywords and literals. - Add a reference to the grammar to the contributes.grammars section of package.json.
yourlang
must be a VSCode language identifier. - Add a reference to
onLanguage:yourlang
to the activationEvents section of package.json.yourlang
must be a VSCode language identifier. - Add an example to
examples/yourlang
. - Hit
F5
in VSCode, with this project open, to test your changes. - Take a screenshot comparing before-and-after and add it to the above list.
- Submit a PR!