replaced typescript layer
fixed docs Better docs, added linter and tsx mode fixed typo made TSX optional
This commit is contained in:
JAremko
syl20bnr
parent
2ff22934e7
commit
7a80049fa4
|
|
@ -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 |
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
(defvar typescript-use-tslint t
|
||||
"Use flycheck linter if not nil")
|
||||
|
|
@ -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)))
|
||||
|
|
|
|||
Loading…
Reference in New Issue