Typescript tsx improvements

layers/+lang/typescript/README.org

@@ -15,6 +15,7 @@
   - [[#tide][Tide]]
     - [[#notes][Notes]]
   - [[#language-server-protocol][Language Server Protocol]]
+- [[#tsx-mode][TSX Mode]]
 - [[#key-bindings][Key bindings]]
   - [[#typescript-major-mode][Typescript Major Mode]]
   - [[#reference-major-mode][Reference Major Mode]]
@@ -72,6 +73,9 @@ You can choose either tslint (default) or eslint for linting:
                 typescript-linter 'tslint)))
 #+END_SRC
 
+Please be advised that tslint is now deprecated, and should only be used for
+legacy projects. [[https://github.com/palantir/tslint#tslint][See TSLint Repo for more]].
+
 ** Pre-requisites
 You will need =node.js v0.12.0= or greater.
 
@@ -165,6 +169,19 @@ then set the variable =typescript-lsp-linter= to =nil=.
                 typescript-lsp-linter nil)))
 #+END_SRC
 
+* TSX Mode
+This layer also defines a layer for working with .tsx files called
+=typescript-tsx-mode=. This mode is derived from web-mode and as such, will
+inherit the faces and behavior of web-mode. If you are using using tree-sitter
+for syntax highlighting, you may choose to switch to using tree-sitter for tsx
+by setting the =typescript-use-treesitter-for-tsx= to non-nil.
+
+#+BEGIN_SRC emacs-lisp
+  (setq-default dotspacemacs-configuration-layers '(
+    (typescript :variables
+                typescript-use-treesitter-for-tsx 1)))
+#+END_SRC
+
 * Key bindings
 ** Typescript Major Mode
 

layers/+lang/typescript/config.el

@@ -38,6 +38,10 @@ If `nil' then `tide' is the default backend unless `lsp' layer is used.")
 (defvar typescript-linter 'tslint
   "The linter to use for typescript. Possible values are `tslint' `eslint'")
 
+(defvar typescript-use-treesitter-for-tsx nil
+  "If non-nil, then use tree-sitter rather than web-mode for tsx
+file syntax highlighting.")
+
 (defvar typescript-lsp-linter t
   "If the backend is `lsp', and this variable is non-nil, then
 use lsp as the linter, otherwise let flycheck choose the best

layers/+lang/typescript/funcs.el

@@ -155,3 +155,9 @@
             "==" 'spacemacs/typescript-format))
     ('tide (spacemacs/set-leader-keys-for-major-mode mode
              "=" 'spacemacs/typescript-format))))
+
+;; Workaround to fix tsx highlighting error.
+;; Disable web-modes font-lock syntax highlighting for tsx files.
+;; See: https://github.com/emacs-tree-sitter/tree-sitter-langs/issues/23#issuecomment-832815710
+(defun spacemacs//typescript-tsx-mode-fix-tree-sitter()
+  (setq-local tree-sitter-hl-use-font-lock-keywords nil))

layers/+lang/typescript/packages.el

@@ -101,7 +101,12 @@
 (defun typescript/post-init-web-mode ()
   (define-derived-mode typescript-tsx-mode web-mode "TypeScript-tsx")
   (add-to-list 'auto-mode-alist '("\\.tsx\\'" . typescript-tsx-mode))
-  (spacemacs/typescript-mode-config 'typescript-tsx-mode))
+  (spacemacs/typescript-mode-config 'typescript-tsx-mode)
+  (when typescript-use-treesitter-for-tsx
+    (with-eval-after-load 'tree-sitter
+      (tree-sitter-require 'tsx)
+      (add-hook 'typescript-tsx-mode-hook #'spacemacs//typescript-tsx-mode-fix-tree-sitter)
+      (add-to-list 'tree-sitter-major-mode-language-alist '(typescript-tsx-mode . tsx)))))
 
 (defun typescript/init-typescript-mode ()
   (use-package typescript-mode

layers/+tools/lsp/packages.el

@@ -49,6 +49,8 @@
           (spacemacs/lsp-bind-upstream-keys)
         (spacemacs/lsp-bind-keys))
       (setq lsp-prefer-capf t)
+      ;; This sets the lsp indentation for all modes derived from web-mode.
+      (setf (alist-get 'web-mode lsp--formatting-indent-alist) 'web-mode-markup-indent-offset)
       (add-hook 'lsp-after-open-hook (lambda ()
                                        "Setup xref jump handler"
                                        (spacemacs//setup-lsp-jump-handler))))))