Editor uses VSCode and sees JS syntax highlighting and validation in on-change/on-open

[rjcorwin]

No description provided.

[rjcorwin]

I've posted a question on stackoverflow how to this in a more sustainable way, but for the time being you can hack your VSCode installation by doing the following...

On Mac: Open the html.tmLanguage.json file in your Visual Studio Code's app folder.

code /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/html/syntaxes/html.tmLanguage.json

Then search for "hashchange" and add |-change|-open right after it. The result will look like...

Now restart VS Code and voila!

In the future I hope it's an option that added when describing to VSCode the attributes of your custom elements. That way we could just have folks install the tangy-form plugin to add syntax highlighting. See discussion around VSCode support for custom elements here and docs for adding support for your custom elements here.

[mfinholt]

recommend that you add "|-change|-open|-submit" so that it also catches the on-submit functions

[rjcorwin]

@mfinholt Good call! There are even more. Here are some updated directions.

Step 1

Open Visual Studio configuration file.

code /Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/html/syntaxes/html.tmLanguage.json

Step 2

Find on(s(c and replace with on-open|on-change|on-submit|skip-if|hide-if|dont-skip-if|disable-if|valid-if|discrepancy-if|warn-if|on(s(c.

Step 3

Restart Visual Studio.

[rjcorwin]

Closing this as I've migrated these docs to our docs site https://docs.tangerinecentral.org/editor/advanced-form-programming/local-content-development/#set-up-vs-code-with-syntax-highlighting-for-on-open-on-change-etc