Tide - TypeScript Interactive Development Environment for Emacs
JavaScript Emacs Lisp
Latest commit 35686d7 Feb 20, 2017 @ananthakumaran use cl-incf



TypeScript Interactive Development Environment for Emacs



  • 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



(defun setup-tide-mode ()
  (flycheck-mode +1)
  (setq flycheck-check-syntax-automatically '(save mode-enabled))
  (eldoc-mode +1)
  (tide-hl-identifier-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

Format options can be specified in multiple ways.

  • via elisp
(setq tide-format-options '(:insertSpaceAfterFunctionKeywordForAnonymousFunctions t :placeOpenBraceOnNewLineForFunctions nil))
  • via tsfmt.json (should be present in the root folder along with tsconfig.json)
  "indentSize": 4,
  "tabSize": 4,
  "insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": false,
  "placeOpenBraceOnNewLineForFunctions": false,
  "placeOpenBraceOnNewLineForControlBlocks": false

Check here for the full list of supported format options.


(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))

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


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


(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))


  • Make sure tsconfig.json or jsconfig.json is present in the root folder of the project.

  • tsserver mangles output sometimes issue - #2758, which will result in json parse error. Try node version 0.12.x if you get this error.


Keyboard shortcuts Description
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-documentation-at-point Show documentation for the symbol at point.

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-project-errors List all errors in the project. Errors 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.


  • ElDoc
  • Auto complete
  • Flycheck
  • Jump to definition, Jump to type definition
  • Find occurrences
  • Rename symbol
  • Imenu
  • Compile On Save
  • Highlight Identifiers


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"))


How do I configure tide to use a specific version of TypeScript compiler?

For TypeScript 2.0 and above, you can customize the tide-tsserver-executable variable. For example

(setq tide-tsserver-executable "node_modules/typescript/bin/tsserver")

Sadly, this won't work for TypeScript < 2.0. You can clone the repo locally and checkout the old version though.