Injection grammar for VSCode

[keller-mark]

If anyone is knowledgeable about VSCode extensions and injection grammars, it would be awesome to have an injection grammar for JS-inside-Python-multiline-strings when developing widgets. While using a .js file is an option, I like the simplicity of writing the JS in a string, and also when prototyping widgets in a notebook.

Resources

• https://code.visualstudio.com/api/get-started/your-first-extension
• https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#injection-grammars
• https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide#scope-inspector
• https://code.visualstudio.com/api/references/contribution-points#contributes.grammars
• JS syntaxes https://github.com/microsoft/vscode/tree/e8b96858ab9fbef2bf5b43a9bd60ac210c44a928/extensions/javascript/syntaxes
• Python syntaxes https://github.com/microsoft/vscode/tree/e8b96858ab9fbef2bf5b43a9bd60ac210c44a928/extensions/python/syntaxes
• Graphql inside strings https://github.com/kumarharsh/graphql-for-vscode/blob/b6f0433c6393c27766cfc96897fa31190cb1dcc4/package.json#L154

[manzt]

Thanks mark! Think we are on the same wavelength. I set up a custom treesitter extensions for my editor (neovim), but have been meaning to look into the same mechanism for VS Code. I think VS Code is based on TextMate (sp?), so I don't think the same mechansim can be reused. Sharing for other treesitter users. https://github.com/manzt/dotfiles/blob/main/.config/nvim/queries/python/injections.scm

[manzt]

In JS, it's nice that multi-line comments can comment/uncomment within a line, which allows for catching syntactic nodes easier. For example, I've seen this extension used a lot to highlight HTML strings in JS via:

let html = /* html */ `<h1>Hello, world</h1>`;

Which is nice because you capture the comment in the AST and look for a string assignment. We couldn't do the same in Python because the whole thing becomes a comment:

_esm = # js """
export default { render() {} };
"""

but depending on the syntax tree, it might be possible to look for sibling comment/variable.

# js
_esm = """
export default { render() {} };
"""

[keller-mark]

True! It looks like there is this extension for SQL-in-Python that looks for a comment within the string, which could also work

_esm = """
/* js */
export default { render() {} };

[keller-mark]

I think that one is actually very close, could require only a minor change for JS-in-Python

[manzt]

That would be awesome!

[manzt]

It looks like that repo has HTML-in-Python as well. I wonder if they would be open to a PR for JS/CSS.

[manzt]

Cross-posting on Discord, in case anyone there is up for the challenge!