diff --git a/layers/+lang/typescript/README.org b/layers/+lang/typescript/README.org index 3dcc9a37b..318270749 100644 --- a/layers/+lang/typescript/README.org +++ b/layers/+lang/typescript/README.org @@ -6,42 +6,79 @@ * Table of Contents :TOC_4_org:noexport: - [[Description][Description]] - [[Install][Install]] - - [[Layer][Layer]] - - [[Prerequisites][Prerequisites]] + - [[Layer][Layer]] + - [[Notes][Notes]] - [[Key bindings][Key bindings]] * Description -This layer adds support for TypeScript editing via [[https://github.com/clausreinke/typescript-tools][typescript-tools]] and -[[https://github.com/aki2o/emacs-tss][emacs-tss]]. +This layer adds support for TypeScript and TSX editing. This layer provides: -- syntax coloring -- error highlighting -- auto-completion via Flymake -- jump-to-definition +- ElDoc +- Auto complete +- Flycheck +- Jump to definition, Jump to type definition +- Find occurrences +- Rename symbol +- Imenu +- linting +- tsx mode * Install +** Pre-requisites +You will need =node.js v0.12.0= or greater + +If you want linting run: =npm instell -g typescript= =npm install -g tslint= + +For best results, make sure that the =auto-completion= (company) and =html= layers are enabled. + ** Layer To use this configuration layer, add it to your =~/.spacemacs=. You will need to add =typescript= to the existing =dotspacemacs-configuration-layers= list in this file. -** Prerequisites - -You'll need [[https://github.com/clausreinke/typescript-tools][typescript-tools]] and fairly obviously also the TypeScript -compiler: - -#+BEGIN_SRC sh - $ npm install typescript - $ git clone git://github.com/clausreinke/typescript-tools.git - $ cd typescript-tools/ - $ npm install -g +#+BEGIN_SRC emacs-lisp +(setq-default dotspacemacs-configuration-layers '(typescript)) #+END_SRC +or if you don't need linting. + +#+BEGIN_SRC emacs-lisp +(setq-default dotspacemacs-configuration-layers '( + (typescript :variables + typescript-use-tslint nil)) +#+END_SRC + +** Notes + +This layer uses [[https://github.com/ananthakumaran/tide][tide]] and [[https://github.com/Simplify/flycheck-typescript-tslint/][flycheck-typescript-tslint]] + +Make sure to add [[https://github.com/Microsoft/TypeScript/wiki/tsconfig.json][tsconfig.json]] in the project root folder. + +tsserver mangles output sometimes [[https://github.com/Microsoft/TypeScript/issues/2758][issue - #2758]], which will result in json parse error. Try node version 0.12.x if you get this error + +Currently tsserver doesn't pickup tsconfig.json file changes. You might need to restart server after editing it. + * Key bindings +** Typescript Major Mode + | Key Binding | Description | |-------------+----------------------------------| -| ~SPC m g g~ | Jump to definition | -| ~SPC m h h~ | Show popup help (with type info) | +| ~SPC g b~ | jump back | +| ~SPC g m~ | jump to entity's type definition | +| ~SPC g g~ | jump to entity's definition | +| ~SPC h d~ | documentation at point | +| ~SPC n r~ | rename symbol | +| ~SPC r~ | references | +| ~SPC s~ | restart server | + + +** Reference Major Mode + +| Key Binding | Description | +|-------------+----------------------------------| +| ~C-j~ | find previous reference | +| ~C-k~ | find next reference | +| ~C-l~ | goto reference | diff --git a/layers/+lang/typescript/config.el b/layers/+lang/typescript/config.el new file mode 100644 index 000000000..0701ed44e --- /dev/null +++ b/layers/+lang/typescript/config.el @@ -0,0 +1,2 @@ +(defvar typescript-use-tslint t + "Use flycheck linter if not nil") diff --git a/layers/+lang/typescript/packages.el b/layers/+lang/typescript/packages.el index 182e526a8..04f18cf7b 100644 --- a/layers/+lang/typescript/packages.el +++ b/layers/+lang/typescript/packages.el @@ -9,14 +9,69 @@ ;; ;;; License: GPLv3 -(setq typescript-packages '(tss)) +(setq typescript-packages '(tide + flycheck-typescript-tslint + web-mode)) -(defun typescript/init-tss () - "Initialize my package" - (use-package tss +(defun typescript/init-tide () + (use-package tide :defer t - :mode ("\\.ts\\'" . typescript-mode) - :init (spacemacs/set-leader-keys-for-major-mode 'typescript-mode - "gg" 'tss-jump-to-definition - "hh" 'tss-popup-help) - :config (tss-config-default))) + :commands (typescript/jump-to-type-def) + :init (progn + (evilified-state-evilify tide-references-mode tide-references-mode-map + (kbd "C-j") 'tide-find-previous-reference + (kbd "C-k") 'tide-find-next-reference + (kbd "C-l") 'tide-goto-reference) + + (add-hook 'typescript-mode-hook + (lambda () + (tide-setup) + (flycheck-mode t) + (setq flycheck-check-syntax-automatically '(save mode-enabled)) + (eldoc-mode t) + (when (configuration-layer/package-usedp 'company) + (company-mode-on))))) + :config (progn + + (when typescript-use-tslint + (use-package flycheck-typescript-tslint) + (flycheck-add-next-checker 'typescript-tide + 'typescript-tslint 'append)) + + (spacemacs/declare-prefix-for-mode 'typescript-mode "mg" "goto") + (spacemacs/declare-prefix-for-mode 'typescript-mode "mh" "help") + (spacemacs/declare-prefix-for-mode 'typescript-mode "mn" "name") + + (defun typescript/jump-to-type-def() + (interactive) + (tide-jump-to-definition t)) + + (spacemacs/set-leader-keys-for-major-mode 'typescript-mode + "gb" 'tide-jump-back + "gm" 'typescript/jump-to-type-def + "gg" 'tide-jump-to-definition + "hd" 'tide-documentation-at-point + "nr" 'tide-rename-symbol + "r" 'tide-references + "s" 'tide-restart-server)))) + + +(when (configuration-layer/package-usedp 'web-mode) + (defun typescript/init-web-mode () + (use-package web-mode + :defer t + :mode ("\\.tsx\\'" . web-mode) + :config (add-hook 'web-mode-hook + (lambda () + (when (string-equal "tsx" (file-name-extension buffer-file-name)) + (tide-setup) + (flycheck-mode +1) + (setq flycheck-check-syntax-automatically '(save mode-enabled)) + (eldoc-mode +1) + (when (configuration-layer/package-usedp 'company) + (company-mode-on)))))))) + +(when typescript-use-tslint + (defun typescript/init-flycheck-typescript-tslint () + (use-package flycheck-typescript-tslint + :defer t)))