Support Typescript

I had previously only worked with Facebook's Flow. Typescript support in Emacs
is excellent!
This commit is contained in:
William Carroll 2019-12-22 21:28:01 +00:00
parent 3a204cec24
commit 998646995f

View file

@ -2,7 +2,9 @@
;; Author: William Carroll <wpcarro@gmail.com> ;; Author: William Carroll <wpcarro@gmail.com>
;;; Commentary: ;;; Commentary:
;; This module hosts my Javascript tooling preferences ;; This module hosts my Javascript tooling preferences. This also includes
;; tooling for TypeScript and other frontend tooling. Perhaps this module will
;; change names to more accurately reflect that.
;; ;;
;; Depends ;; Depends
;; - yarn global add prettier ;; - yarn global add prettier
@ -11,7 +13,7 @@
;; Constants ;; Constants
(defconst wpc/js-hooks (defconst wpc/js-hooks
'(js-mode-hook js2-mode-hook rjsx-mode-hook) '(js-mode-hook web-mode-hook typescript-mode-hook js2-mode-hook rjsx-mode-hook)
"All of the commonly used hooks for Javascript buffers.") "All of the commonly used hooks for Javascript buffers.")
(defconst wpc/frontend-hooks (defconst wpc/frontend-hooks
@ -20,7 +22,8 @@
;; frontend indentation settings ;; frontend indentation settings
(setq js-indent-level 2 (setq typescript-indent-level 2
js-indent-level 2
css-indent-offset 2) css-indent-offset 2)
;; ;; javascript ;; ;; javascript
@ -51,6 +54,26 @@
(setq js2-mode-show-parse-errors nil (setq js2-mode-show-parse-errors nil
js2-mode-show-strict-warnings nil)) js2-mode-show-strict-warnings nil))
(progn
(defun tide/setup ()
(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 tide
:config
(add-hook 'typescript-mode-hook #'tide/setup))
(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
(add-hook 'web-mode-hook
(lambda ()
(when (string-equal "tsx" (f-ext buffer-file-name))
(tide/setup))))
(flycheck-add-mode 'typescript-tslint 'web-mode))
;; JS autoformatting ;; JS autoformatting
(use-package prettier-js (use-package prettier-js
:after (rjsx-mode) :after (rjsx-mode)