[Emacs] Add TypeScript config, update Javascript config

Also move around CSS heading

org/config/emacs.org

@@ -5421,65 +5421,6 @@ development. First, let’s install the most important package,
    "z"  #'web-mode-fold-or-unfold))
 #+end_src
 
-***** Javascript
-:PROPERTIES:
-:CUSTOM_ID: Packages-Configuration-Programming-languages-General-Programming-Languages-Web-programming-Javascript-8k5arup085j0
-:END:
-#+begin_src emacs-lisp
-(use-package rjsx-mode
-  :defer t
-  :straight (:build t)
-  :mode "\\.[mc]?js\\'"
-  :mode "\\.es6\\'"
-  :mode "\\.pac\\'"
-  :interpreter "node"
-  :hook (rjsx-mode . rainbow-delimiters-mode)
-  :init
-  (add-to-list 'compilation-error-regexp-alist 'node)
-  (add-to-list 'compilation-error-regexp-alist-alist
-               '(node "^[[:blank:]]*at \\(.*(\\|\\)\\(.+?\\):\\([[:digit:]]+\\):\\([[:digit:]]+\\)"
-                      2 3 4))
-  :config
-  (setq js-chain-indent                  t
-        js2-basic-offset                 2
-        ;; ignore shebangs
-        js2-skip-preprocessor-directives t
-        ;; Flycheck handles this already
-        js2-mode-show-parse-errors       nil
-        js2-mode-show-strict-warnings    nil
-        ;; conflicting with eslint, Flycheck already handles this
-        js2-strict-missing-semi-warning  nil
-        js2-highlight-level              3
-        js2-idle-timer-delay             0.15))
-#+end_src
-
-#+begin_src emacs-lisp
-(use-package js2-refactor
-  :defer t
-  :straight (:build t)
-  :after (js2-mode rjsx-mode)
-  :hook (js2-mode . js2-refactor-mode)
-  :hoo k (rjsx-mode . js2-refactor-mode))
-#+end_src
-
-#+begin_src emacs-lisp
-(use-package npm-mode
-  :defer t
-  :straight (:build t)
-  :hook (js-mode . npm-mode)
-  :general
-  (phundrak/major-leader-key
-    :packages '(npm-mode rjsx-mode)
-    :keymaps 'rjsx-mode-map
-    "n" '(:keymap npm-mode-command-keymap :which-key "npm")))
-#+end_src
-
-#+begin_src emacs-lisp
-(use-package prettier-js
-  :defer t
-  :straight (:build t))
-#+end_src
-
 ***** CSS
 :PROPERTIES:
 :CUSTOM_ID: Packages-Configuration-Programming-languages-General-Programming-Languages-Web-programming-CSS-que40po085j0
@@ -5528,6 +5469,119 @@ development. First, let’s install the most important package,
             "gh" #'counsel-css)))
 #+end_src
 
+***** Javascript
+:PROPERTIES:
+:CUSTOM_ID: Packages-Configuration-Programming-languages-General-Programming-Languages-Web-programming-Javascript-8k5arup085j0
+:END:
+#+begin_src emacs-lisp
+(use-package rjsx-mode
+  :defer t
+  :straight (:build t)
+  :mode "\\.[mc]?js\\'"
+  :mode "\\.es6\\'"
+  :mode "\\.pac\\'"
+  :interpreter "node"
+  :hook (rjsx-mode . rainbow-delimiters-mode)
+  :hook (rjsx-mode . lsp-deferred)
+  :init
+  (add-to-list 'compilation-error-regexp-alist 'node)
+  (add-to-list 'compilation-error-regexp-alist-alist
+               '(node "^[[:blank:]]*at \\(.*(\\|\\)\\(.+?\\):\\([[:digit:]]+\\):\\([[:digit:]]+\\)"
+                      2 3 4))
+  :general
+  (phundrak/major-leader-key
+    :keymaps 'rjsx-mode-map
+    :infix "a"
+    ""  '(:keymap lsp-command-map :which-key "lsp")
+    "=" '(:ignore :wk "format")
+    "a" '(:ignore :which-key "actions"))
+  :config
+  (setq js-chain-indent                  t
+        js2-basic-offset                 2
+        ;; ignore shebangs
+        js2-skip-preprocessor-directives t
+        ;; Flycheck handles this already
+        js2-mode-show-parse-errors       nil
+        js2-mode-show-strict-warnings    nil
+        ;; conflicting with eslint, Flycheck already handles this
+        js2-strict-missing-semi-warning  nil
+        js2-highlight-level              3
+        js2-idle-timer-delay             0.15))
+#+end_src
+
+#+begin_src emacs-lisp
+(use-package js2-refactor
+  :defer t
+  :straight (:build t)
+  :after (js2-mode rjsx-mode)
+  :hook (js2-mode . js2-refactor-mode)
+  :hook (rjsx-mode . js2-refactor-mode))
+#+end_src
+
+#+begin_src emacs-lisp
+(use-package npm-mode
+  :defer t
+  :straight (:build t)
+  :hook (js-mode . npm-mode)
+  :general
+  (phundrak/major-leader-key
+    :packages '(npm-mode rjsx-mode)
+    :keymaps 'rjsx-mode-map
+    "n" '(:keymap npm-mode-command-keymap :which-key "npm")))
+#+end_src
+
+#+begin_src emacs-lisp
+(use-package prettier-js
+  :defer t
+  :straight (:build t))
+#+end_src
+
+***** Typescript
+:PROPERTIES:
+:CUSTOM_ID: Packages-Configuration-Programming-languages-General-Programming-Languages-Web-programming-Typescript-o0e8nh30z9j0
+:END:
+#+begin_src emacs-lisp
+(use-package typescript-mode
+  :defer t
+  :straight (:build t)
+  :hook (typescript-mode . rainbow-delimiters-mode)
+  :hook (typescript-tsx-mode . rainbow-delimiters-mode)
+  :commands typescript-tsx-mode
+  :init
+  (add-to-list 'auto-mode-alist '("\\.tsx\\'" . #'typescript-tsx-mode))
+  :config
+  (after! flycheck
+    (flycheck-add-mode 'javascript-eslint 'web-mode)
+    (flycheck-add-mode 'javascript-eslint 'typescript-mode)
+    (flycheck-add-mode 'javascript-eslint 'typescript-tsx-mode)
+    (flycheck-add-mode 'typescript-tslint 'typescript-tsx-mode))
+  (when (fboundp 'web-mode)
+    (define-derived-mode typescript-tsx-mode web-mode "TypeScript-TSX"))
+  (autoload 'js2-line-break "js2-mode" nil t))
+#+end_src
+
+#+begin_src emacs-lisp
+(use-package tide
+  :defer t
+  :straight (:build t)
+  :hook (tide-mode . tide-hl-identifier-mode)
+  :config
+  (setq tide-completion-detailed              t
+        tide-always-show-documentation        t
+        tide-server-may-response-length       524288
+        tide-completion-setup-company-backend nil)
+
+  (advice-add #'tide-setup :after #'eldoc-mode)
+
+  :general
+  (phundrak/major-leader-key
+    :keymaps 'tide-mode-map
+    "R"   #'tide-restart-server
+    "f"   #'tide-format
+    "rrs" #'tide-rename-symbol
+    "roi" #'tide-organize-imports))
+#+end_src
+
 ** Visual Configuration
 :PROPERTIES:
 :CUSTOM_ID: Packages-Configuration-Visual-Configurationxr86fl6184j0