reddit / emacs

Anyone have multiple language syntax highlighting with treesitter working?

zQpNB · 2022-10-13 21:10
I can't find much information on it. I have javascript and/or typescript files that have html in them. This is pretty common now, using tagged templates to make html. let header = (title) => html`<h1>${title}</h1>`; I had this working, kind of, with mmm mode a long time ago. That was before tree-sitter and lsp. &#x200B; some examples: [https://lit.dev/docs/v1/lit-html/concepts/#template-creation](https://lit.dev/docs/v1/lit-html/concepts/#template-creation) [https://github.com/WebReflection/uhtml](https://github.com/WebReflection/uhtml) [https://github.com/developit/htm](https://github.com/developit/htm) [https://marketplace.visualstudio.com/items?itemName=bierner.lit-html](https://marketplace.visualstudio.com/items?itemName=bierner.lit-html) [https://github.com/MaxMEllon/vim-jsx-pretty](https://github.com/MaxMEllon/vim-jsx-pretty)
orzechod · 2022-10-14 00:36
it's not a general-purpose multi-language solution, but [tsx-mode](https://github.com/orzechowskid/tsx-mode.el) (disclaimer: I'm the author) tries to support TSX plus a few flavors of CSS-in-JS. I use it every day at work and I'd be curious to know if it suits your needs.
zQpNB · 2022-10-14 02:02
Awesome! It doesn't do what exactly what I need, but it's an example of how to do it. I think.
zQpNB · 2022-10-14 02:23
Would you want a html-in-js feature in your repo? :) This will be torture for me to get good enough at emacs lisp to port. haha. Do the imported graphql mode and css mode use treesitter? It doesn't look like it maybe.
orzechod · 2022-10-14 13:35
tree-sitter is used for indentation and syntax highlighting of the JS/TS buffer, as well as for CSS-in-JS but not for GQL-in-JS. a bunch of magic is also done by copying the contents of your template strings into hidden buffers and doing stuff like autocompletion there. adding support for HTML-in-JS to the current version of that major mode would probably involve defining a few tree-sitter queries to identify relevant template strings, and then basically copying what's being done for GQL in terms of hidden buffers, fontification, etc. it should be pretty straightforward. but tbh the whole thing can be rewritten to be a lot cleaner now that [treesit is to be shipped with the next major version of emacs](https://lists.gnu.org/archive/html/emacs-devel/2022-10/msg00707.html). I've already started that work and it's going well and I don't see any roadblocks to adding HTML-in-JS support to it (not something I've used at work and so hadn't considered adding support for). thanks for the suggestion!
zQpNB · 2022-10-14 15:17
whoa this is all great news
ExistentialTowel · 2022-10-26 22:12
I'd love to know how you ultimately solve this. I use the Lit framework at work and have had to resort to using WebStorm to do dev work (or pull the html template strings into a buffer with html-mode). I'll say that today I found out you can use lsp-mode + ts-ls lang server and it'll at least make it bearable. Without it you don't even get matching pairs or indentation, but with ts-ls you get that plus some basic code-completion/defintions and even a little bit of error checking.
zQpNB · 2022-10-26 22:22
Haven't done anything yet. Can only spend so much time futzing with emacs. tsx-mode looks great but i haven't even tried that yet, and I use jsx at work. &#x200B; Let us know if you find or do anything similar.