Skip to content

Instantly share code, notes, and snippets.

@fuzunspm
Created June 13, 2019 07:47
Show Gist options
  • Save fuzunspm/c5b78b662cd8cd45368b9a55361ce3ef to your computer and use it in GitHub Desktop.
Save fuzunspm/c5b78b662cd8cd45368b9a55361ce3ef to your computer and use it in GitHub Desktop.
Emacs Typescript Setup for ReactJS, NextJS or NestJS
;;; typescript.el --- typescript support
;;; Commentary:
;;; Code:
(use-package flycheck
:ensure t
:config
(add-hook 'typescript-mode-hook 'flycheck-mode))
(defun setup-tide-mode ()
(interactive)
(tide-setup)
(flycheck-mode +1)
(setq flycheck-check-syntax-automatically '(save mode-enabled))
(eldoc-mode +1)
(tide-hl-identifier-mode +1)
(company-mode +1))
(use-package company
:ensure t
:config
(setq company-show-numbers t)
(setq company-tooltip-align-annotations t)
(setq company-tooltip-flip-when-above t)
(global-company-mode))
(use-package company-quickhelp
:ensure t
:init
(company-quickhelp-mode 1)
(use-package pos-tip
:ensure t))
(use-package web-mode
:ensure t
:mode (("\\.html?\\'" . web-mode)
("\\.tsx\\'" . web-mode)
("\\.jsx\\'" . web-mode))
:config
(setq web-mode-markup-indent-offset 2
web-mode-css-indent-offset 2
web-mode-code-indent-offset 2
web-mode-block-padding 2
web-mode-comment-style 2
web-mode-enable-css-colorization t
web-mode-enable-auto-pairing t
web-mode-enable-comment-keywords t
web-mode-enable-current-element-highlight t
)
(add-hook 'web-mode-hook
(lambda ()
(when (string-equal "tsx" (file-name-extension buffer-file-name))
(setup-tide-mode))))
(flycheck-add-mode 'typescript-tslint 'web-mode))
(use-package typescript-mode
:ensure t
:config
(setq typescript-indent-level 2)
(add-hook 'typescript-mode #'subword-mode))
(use-package tide
:init
:ensure t
:after (typescript-mode company flycheck)
:hook ((typescript-mode . tide-setup)
(typescript-mode . tide-hl-identifier-mode)
(before-save . tide-format-before-save)))
(provide 'typescript)
;;; typescript.el ends here
@matejsarlija
Copy link

Thank you for this, dumb question, how do I use it, is it auto when I enter .tsx files?

@fuzunspm
Copy link
Author

fuzunspm commented Mar 7, 2021

Yes use above code in your init.el or config.el and then open a tsx/js file

@meistens
Copy link

meistens commented Jan 8, 2023

You saved me the trouble of setting a ts environment. For some reason, eglot was glitching bad on my end

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment