Im trying to create a simple language extension for visual studio code. I used the "yo code" to generate a language support extension. After adding my Language name, id, extension and etc, I keep getting this message "no grammar provided for < source. arc" when running the tm scope inspector in the extension debugging host even though vscode recognized the language.
Not sure what i can try at this point since the sample should work right off the bat
archsim.tmLanguage.json:
{
"name": "ArchsimC",
"scopeName": "source.arc",
"patterns": [
{
"include": "#keywords"
},
{
"include": "#strings"
}
],
"repository": {
"keywords": {
"patterns": [
{
"name": "keyword.control.archsimc",
"match": "\\b(if|while|for|return)\\b"
},
]
},
"strings": {
"name": "string.quoted.double.archsimc",
"begin": "\"",
"end": "\"",
"patterns": [
{
"name": "constant.character.escape.archsimc",
"match": "\\\\."
}
]
}
}
}
package.json:
{
"name": "languagetest",
"displayName": "LanguageTest",
"description": "language server test",
"version": "0.0.1",
"engines": {
"vscode": "^1.29.0"
},
"categories": [
"Programming Languages"
],
"contributes": {
"languages": [
{
"id": "archsimc",
"aliases": [
"ArchsimC",
"archsimc"
],
"extensions": [
".arc"
],
"configuration": "./language-configuration.json"
}
],
"grammars": [
{
"language": "archsimc",
"scopeName": "source.arc",
"path": "./syntaxes/archsimc.tmLanguage.json"
}
]
}
}
test.arc
if(something)
{
return;
}
by running inspect TM scope on the "if" should point to the tmLanguage file based on what i have seen in vscode documentation.
Any ideas on what is the issue here and if im doing something wrong?
Related
I am trying to develop a VScode extension to adapt my own language.
VScode has already captured the comments and the keywords, as the picture shows, but only the color of comments is automatically changed, while that of keywords are not.
This is the syntaxes .json
"scopeName": "source.rosita",
"fileTypes": ["rosita"],
"name": "rosita",
"patterns": [
{ "include": "#comments" },
{ "include": "#keywords" }
],
"repository": {
"comments": {
"comment": "% comment",
"patterns": [
{
"name" : "comment.rosita",
"match": "%.*"
}
]
},
"keywords": {
"patterns": [
{
"name" : "keywords.general.rosita",
"match": "\\b(?:GIDIR|GODIR|GTDIR)\\b"
}
]
}
}
Could somebody explain what's going on?
I want to support embedding OCaml code inside HTML.
The embedded OCaml starts with the tag <% and closes with %>.
Inside these tags, we want everything to use the syntax of source.ocaml.
To do this, we use the following rules:
"patterns": [
{
"begin": "(^|\\G)\\s*(<!--)",
"captures": {
"1": {
"name": "punctuation.definition.comment.html"
},
"2": {
"name": "punctuation.definition.comment.html"
}
},
"end": "(-->)",
"name": "comment.block.html"
},
{
"begin": "(?i)(^|\\G)\\s*(?=<(script|style|pre)(\\s|$|>)(?!.*?</(script|style|pre)>))",
"end": "(?i)(.*)((</)(script|style|pre)(>))",
"endCaptures": {
"1": {
"patterns": [
{
"include": "text.html.derivative"
}
]
},
"2": {
"name": "meta.tag.structure.$4.end.html"
},
"3": {
"name": "punctuation.definition.tag.begin.html"
},
"4": {
"name": "entity.name.tag.html"
},
"5": {
"name": "punctuation.definition.tag.end.html"
}
},
"patterns": [
{
"begin": "(\\s*|$)",
"patterns": [
{
"include": "text.html.derivative"
}
],
"while": "(?i)^(?!.*</(script|style|pre)>)"
}
]
},
{
"begin": "(?i)(^|\\G)\\s*(?=</?[a-zA-Z]+[^\\s/>]*(\\s|$|/?>))",
"patterns": [
{
"include": "text.ocaml"
}
{
"include": "text.html.derivative"
}
],
"while": "^(?!\\s*$)"
},
{
"begin": "(^|\\G)\\s*(?=(<[a-zA-Z0-9\\-](/?>|\\s.*?>)|</[a-zA-Z0-9\\-]>)\\s*$)",
"patterns": [
{
"include": "text.ocaml"
},
{
"include": "text.html.derivative"
}
],
"while": "^(?!\\s*$)"
}
]
}
Where text.ocaml looks likes this:
{
"name": "Embedded Ocaml",
"patterns": [
{
"name": "source.ocaml.embedded",
"match": "(?<=<%)(.+)?(?=%>)",
"captures": {
"0": {
"name": "source.ocaml",
"patterns": [
{
"include": "source.ocaml"
}
]
}
}
}
],
"scopeName": "text.ocaml"
}
This works fine if the tags are in between HTML tags, however, if the embedding tags are inside of an HTML string attribute, the embedded code inherits both the OCaml and HTML syntax highlighting.
So tokens that have a rule in the OCaml syntax are highlighted properly, but all the others are highlighted as HTML strings.
Is there a way to make the embedded scope NOT inherit the HTML syntax highlighting?Here's a screenshot of what it currently looks like
I have a few questions about VSCode Syntax Highlighting tmLanguage.json that I haven't been able to find easily so far in browsing google and the VSCode docs (and textmate docs). All of these apply to building your own language extension (I used yo code to generate the project). Most of them are about my specific use case.
How do you specify custom settings that the user can then override? I would like to specify word wrapping as a togglable option for my script.
How do you pick some scope so the colors are what you'd like?
How do I get the parentheses to be styled properly?
Here is what I have.
The styles are:
{
"$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
"name": "MyScript",
"patterns": [
{
"include": "#terms"
},
{
"include": "#punctuations"
},
{
"include": "#strings"
},
{
"include": "#numbers"
}
],
"repository": {
"terms": {
"patterns": [
{
"name": "entity.name.type.language.myscript",
"match": "([a-z][a-z0-9]*(?:-[a-z0-9]+)*)"
},
{
"name": "entity.name.type.language.parens.myscript",
"begin": "([a-z][a-z0-9]*(?:-[a-z0-9]+)*)\\(",
"end": "\\)",
"patterns": [
{
"includes": "#terms"
},
{
"includes": "#strings"
},
{
"includes": "#numbers"
}
]
}
]
},
"numbers": {
"patterns": [
{
"name": "constant.numeric.integer.myscript",
"match": "\\b(\\d+)\\b"
},
{
"name": "constant.numeric.decimal.myscript",
"match": "\\b(\\d+\\.\\d+)\\b"
}
]
},
"punctuations": {
"patterns": [
{
"name": "punctuation.separator.parameter.myscript",
"match": ","
},
{
"name": "punctuation.curly.open.myscript",
"match": "\\{"
},
{
"name": "punctuation.curly.close.myscript",
"match": "\\}"
}
]
},
"strings": {
"name": "string.myscript",
"begin": "\\<",
"end": "\\>",
"patterns": [
{
"name": "constant.character.escape.myscript",
"match": "\\\\."
},
{
"name": "punctuation.term.myscript",
"begin": "\\{",
"beginCaptures": {
"0": {
"name": "meta.brace.curly.myscript"
}
},
"end": "\\}",
"endCaptures": {
"0": {
"name": "meta.brace.curly.myscript"
}
},
"patterns": [
{
"include": "#terms"
},
{
"include": "#numbers"
},
{
"include": "#strings"
}
]
}
]
}
},
"scopeName": "source.myscript"
}
I got that turquoise color by picking entity.name.type, given my default GitHub theme. I don't expect to customize the theme, I just want it to map to a given set of colors within a theme. I would like:
black for the "entities" (terms)
blue for the "strings"
green for the "numbers"
gray for the punctuation
I have been tinkering for a while trying to get the <text {term}> curly brackets to not be red, but I haven't been able to figure it out. Also the parentheses around another(123), they should be gray too.
I am not able to tell how the other languages defined their styles, like JSON (the blue I want):
Or other JSON:
The comma in the red should also be gray as well.
To specify custom configuration, use this in package.json:
"contributes": {
"configurationDefaults": {
"[markdown]": {
"editor.wordWrap": "on",
"editor.quickSuggestions": false
}
},
I create custom langauge abc, from tutorial https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide, hence my files contains:
package.json:
{
"contributes": {
"languages": [
{
"id": "abc",
"extensions": [".abc"]
}
],
"grammars": [
{
"language": "abc",
"scopeName": "source.abc",
"path": "./syntaxes/abc.tmGrammar.json"
}
]
}
}
abc.tmGrammar.json:
{
"scopeName": "source.abc",
"patterns": [{ "include": "#expression" }],
"repository": {
"expression": {
"patterns": [{ "include": "#letter" }, { "include": "#paren-expression" }]
},
"letter": {
"match": "a|b|c",
"name": "keyword.letter"
},
"paren-expression": {
"begin": "\\(",
"end": "\\)",
"beginCaptures": {
"0": { "name": "punctuation.paren.open" }
},
"endCaptures": {
"0": { "name": "punctuation.paren.close" }
},
"name": "expression.group",
"patterns": [{ "include": "#expression" }]
}
}
}
And this works, because when I open VSC I can see and can pick abc language. Now how to color expression.group token to #ff0000? Where define color for it? In package.json in colors contribution point?
You can only set your own theme styling, or set color in user setting.
https://github.com/microsoft/vscode/issues/66729
you can see the scope in command developer inspect editor tokens and scopes
"editor.tokenColorCustomizations": {
"textMateRules": [
// JavaScript
{
"scope": "source.js keyword",
"settings": {
"foreground": "#FF0000"
}
},
// TypeScript
{
"scope": "source.ts keyword",
"settings": {
"foreground": "#0000ff"
}
},
]
}
I am following this example for a simple grammar injection in markdown.
{
"fileTypes": [],
"injectionSelector": "L:markup.fenced_code.block.markdown",
"patterns": [
{
"include": "#superjs-code-block"
}
],
"repository": {
"superjs-code-block": {
"begin": "superjs",
"end": "(^|\\G)(?=\\s*[`~]{3,}\\s*$)",
"contentName": "meta.embedded.block.superjs",
"patterns": [
{
"include": "source.js"
}
]
}
},
"scopeName": "markdown.superjs.codeblock"
}
There is a small problem with the above code - As long as there is a string superjs appear in the fenced code block, the remaining would always be rendered as superjs, which would break fenced code block syntax highlighting for other embedded languages.
{
"foo": "superjs"
}
I would like to fix it by following markdown.tmLanguage.json.
{
"fileTypes": [],
"injectionSelector": "text.html.markdown",
"patterns": [
{
"include": "#fenced_code_block_superjs"
}
],
"repository": {
"fenced_code_block_superjs": {
"begin": "(^|\\G)(\\s*)(`{3,}|~{3,})\\s*(?i:(superjs)(\\s+[^`~]*)?$)",
"beginCaptures": {
"3": {
"name": "punctuation.definition.markdown"
},
"5": {
"name": "fenced_code.block.language"
},
"6": {
"name": "fenced_code.block.language.attributes"
}
},
"end": "(^|\\G)(\\2|\\s{0,3})(\\3)\\s*$",
"endCaptures": {
"3": {
"name": "punctuation.definition.markdown"
}
},
"name": "markup.fenced_code.block.markdown",
"patterns": [
{
"begin": "(^|\\G)(\\s*)(.*)",
"contentName": "meta.embedded.block.superjs",
"patterns": [
{
"include": "source.js"
}
],
"while": "(^|\\G)(?!\\s*([`~]{3,})\\s*$)"
}
]
}
},
"scopeName": "markdown.superjs.codeblock"
}
However it doesn't work, and I don't know how to debug it either.
It is a rule priority issue.
I have to use the L: prefix in "injectionSelector": "L:text.html.markdown" instead as documented here:
The L: in the injection selector means that the injection is added to the left of existing grammar rules. This basically means that our injected grammar's rules will be applied before any existing grammar rules.