New to Emacs having problems with Treesitter reddit / emacs ---------------------------------------------------------------------- regexPattern · 2022-06-10 01:36 As the title says, I'm new to Emacs (coming from Neovim). I'm trying to configure treesitter highlights but for some reason it seems like it struggles with JSX. In Neovim (using treesitter as well) this is highlighted correctly. Right now my setup includes only typescript- mode, tree-sitter and tree-sitter-langs. And I activate them manually, first typescript-mode and then the tree-sitter ones. I notice treesitter highlight it's active, but still don't know why the parser seems to stuggle when it doesn't in Neovim, aren't those the same parsers anyways? ​ [Notice the different \ \<\/div\> highlights](https://preview.re dd.it/ib1kfwxpfp491.png?width=211&format=png&auto=webp&s=3bb96d236beb4 803a7892ecf41710f6af5611f63) As I said I'm new to Emacs so sorry if I'm missing something: This is what I have to config this: (use-package typescript-mode) (use-package tree-sitter) (use-package tree-sitter-langs) (global-tree-sitter-mode) Then I activate the modes as I mentioned earlier. Any help is welcomed. ​ [The same code but in Neovim \(also with tree-sitter\)](https://previe w.redd.it/9jt92e9tfp491.png?width=200&format=png&auto=webp&s=adeec9cff e519e8ca52468730b48058ce476e52d) Pd.: I've tried multiple themes. Update: Changed example images to simpler ones. ---------------------------------------------------------------------- takeonrules · 2022-06-10 02:23 I am wondering if this has to do with your theme? ---------------------------------------------------------------------- regexPattern · 2022-06-10 02:25 I thought the same, but I've tried many themes and it's still inconsistent between tags. ---------------------------------------------------------------------- takeonrules · 2022-06-10 02:59 I have the following: (use-package tree-sitter :straight (tree-sitter :host github :repo "emacs-tree- sitter/elisp-tree-sitter") :diminish 'tree-sitter-mode :config (add-to-list 'tree-sitter-major-mode-language-alist '(enh- ruby-mode . ruby))) (global-tree-sitter-mode) (add-hook 'tree-sitter-after-on-hook #'tree-sitter-hl-mode) (use-package tree-sitter-langs :straight t) I looked at some JSX files and they don't look off. But I don't do much JSX work so really I couldn't tell you if they looked right. Things appeared to match. ---------------------------------------------------------------------- cpbotha · 2022-06-10 06:43 I see the same phenomenon in my basic tree-sitter setup with TSX: closing tag gets a different colour from the opening tag. treesitter integration in Emacs is still very new, it's going to be a while for the out-of-box experience to improve. UPDATE I see the problem: tree-sitter is parsing the tsx file with its typescript parser, when there is a tsx parser available. This is solved in /u/orzechod's setup linked below (which you should look into regardless) because they provide a dedicated tsx-mode which is mapped to the treesitter tsx parser, but you can get your basic setup also working by doing: ```emacs-lisp (add-to-list 'tree-sitter-major-mode-language-alist '(typescript-mode . tsx)) ``` For much better typescript / TSX support, please see /u/orzechod 's work with tsi.el (for indentation), [tsx.el (special tsx- mode)](https://github.com/orzechowskid/tsx-mode.el) and friends discussed in this thread: [https://www.reddit.com/r/emacs/comments/sbx jer/really\_sick\_of\_the\_shoddy\_jsxtsx\_handlingwould/](https://www .reddit.com/r/emacs/comments/sbxjer/really_sick_of_the_shoddy_jsxtsx_h andlingwould/) ---------------------------------------------------------------------- cpbotha · 2022-06-10 07:39 I spent a few more minutes with my config, now I have correct TSX highlighting with tree-sitter, as well as full eglot LSP support for navigation, code fixes, and so on. Here are the relevant sections of my config: ```lisp ;; we choose this name instead of tsx-mode so that eglot can automatically figure out language for server ;; see https://github.com/joaotavora/eglot/issues/624 and https://github.com/joaotavora/eglot#handling-quirky-servers (define-derived-mode typescriptreact-mode typescript-mode "TypeScript TSX") (add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescriptreact-mode)) (use-package eglot :ensure t) (use-package tree-sitter :ensure t :config (global-tree-sitter-mode) (add-hook 'tree-sitter-after-on-hook #'tree-sitter-hl-mode) ;; by default, typescript-mode is mapped to the treesitter typescript parser ;; use our derived mode to map .tsx -> typescriptreact-mode -> treesitter tsx (add-to-list 'tree-sitter-major-mode-language-alist '(typescriptreact-mode . tsx)) ;; if you want to look into better tsx and ts intendation support, consider ;; https://github.com/orzechowskid/tsx-mode.el ;; https://github.com/orzechowskid/tsi.el ) ``` ---------------------------------------------------------------------- regexPattern · 2022-06-10 09:39 Thank you, I’ll give it a try. It makes perfect sense that this is using a standard ts parser. I still have to figure out which modes to use in each file. I was trying a package called web-mode before but that was even worse for highlighting (think I miss understood what that mode was made for). ---------------------------------------------------------------------- cpbotha · 2022-06-10 09:51 tree-sitter, although the integration in emacs is still evolving, already gives the best resuts for TSX. (web-mode used to be the right answer, but I think tree-sitter is now better for TSX) In the meantime, I also got tsi working so no we have tree-sitter based indentation. In addition to that, I use apheleia for format-on-save. The experience is getting close to vscode ;) Below is my updated config, which includes tsi installed via quelpa (I should probably make a small blog post with this to help other folks): ```lisp (use-package typescript-mode :after tree-sitter :config ;; we choose this instead of tsx-mode so that eglot can automatically figure out language for server ;; see https://github.com/joaotavora/eglot/issues/624 and https://github.com/joaotavora/eglot#handling-quirky-servers (define-derived-mode typescriptreact-mode typescript-mode "TypeScript TSX") ;; use our derived mode for tsx files (add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescriptreact-mode)) ;; by default, typescript-mode is mapped to the treesitter typescript parser ;; use our derived mode to map .tsx -> typescriptreact-mode -> treesitter tsx (add-to-list 'tree-sitter-major-mode-language-alist '(typescriptreact-mode . tsx)) ;; https://github.com/orzechowskid/tsi.el/ ;; great tree-sitter-based indentation for typescript/tsx, css, json (quelpa '(tsi :fetcher github :repo "orzechowskid/tsi.el")) (add-hook 'typescript-mode-hook (lambda () (tsi-typescript-mode 1)))) ``` ---------------------------------------------------------------------- regexPattern · 2022-06-10 12:53 Got a question. Seems like you use emacs for web development on a regular basis, is that right? If that’s the case, can I ask for you help to resolve an LSP issue with the ts-ls server (it’s about the hover action)?