Tide

TypeScript Interactive Development Environment for Emacs

Installation

Install node.js v0.12.0 or greater.
Tide is available in melpa. You can install tide via package-install M-x package-install [ret] tide

Configuration

TypeScript

(defun setup-tide-mode ()
  (interactive)
  (tide-setup)
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  ;; company is an optional dependency. You have to
  ;; install it separately via package-install
  ;; `M-x package-install [ret] company`
  (company-mode +1))

;; aligns annotation to the right hand side
(setq company-tooltip-align-annotations t)

;; formats the buffer before saving
(add-hook 'before-save-hook 'tide-format-before-save)

(add-hook 'typescript-mode-hook #'setup-tide-mode)

;; format options
(setq tide-format-options '(:insertSpaceAfterFunctionKeywordForAnonymousFunctions t :placeOpenBraceOnNewLineForFunctions nil))

Check here for the full list of supported format options.

TSX

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.tsx\\'" . web-mode))
(add-hook 'web-mode-hook
          (lambda ()
            (when (string-equal "tsx" (file-name-extension buffer-file-name))
              (setup-tide-mode))))

Tide also provides support for editing js & jsx files. Tide checkers javascript-tide and jsx-tide are not enabled by default for js & jsx files. It can be enabled by setting flycheck-checker

JavaScript

(add-hook 'js2-mode-hook #'setup-tide-mode)

JSX

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))
(add-hook 'web-mode-hook
          (lambda ()
            (when (string-equal "jsx" (file-name-extension buffer-file-name))
              (setup-tide-mode))))

Notes

Make sure to add tsconfig.json or jsconfig.json in the project root folder.
tsserver mangles output sometimes issue - #2758, which will result in json parse error. Try node version 0.12.x if you get this error.

Commands

Keyboard shortcuts	Description
`C-c d`	Show documentation for the symbol at point.
`M-.`	Jump to the definition of the symbol at point. With a prefix arg, Jump to the type definition.
`M-,`	Return to your pre-jump position.

M-x tide-restart-server Restart tsserver. Currently tsserver doesn't pickup tsconfig.json file changes. This would come in handy after you edit tsconfig.json.

M-x tide-references List all references to the symbol at point in a buffer. References can be navigated using n and p. Press enter to open the file.

M-x tide-rename-symbol Rename all occurrences of the symbol at point.

M-x tide-format Format the current region or buffer.

Features

ElDoc
Auto complete
Flycheck
Jump to definition, Jump to type definition
Find occurrences
Rename symbol
Imenu

Debugging

Tide uses tsserver as the backend for most of the features. It writes out a comprehensive log file which can be captured by setting tide-tsserver-process-environment variable.

(setq tide-tsserver-process-environment '("TSS_LOG=-level verbose -file /tmp/tss.log"))

zilvinasu/tide