replaced typescript layer

fixed docs

Better docs, added linter and tsx mode

fixed typo

made TSX optional
This commit is contained in:
JAremko 2016-01-25 18:19:39 +02:00 committed by syl20bnr
parent 2ff22934e7
commit 7a80049fa4
3 changed files with 123 additions and 29 deletions

View file

@ -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 |

View file

@ -0,0 +1,2 @@
(defvar typescript-use-tslint t
"Use flycheck linter if not nil")

View file

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