e3b6464649
* [core][keybinng] improve minor mode binding This commit added add a new function defun spacemacs/declare-prefix-for-minor-mode and improved spacemacs/set-leader-keys-for-minor-mode. `which-key` package recently introduced a new api which-key-add-keymap-based-replacements which improves perfomance and allows prefix and namings to be stored directly in keymap. This is a great improvement. With this new api we now make change to spacemacs/declare-prefix-for-minor-mode to manage prefix also. For example: (spacemacs/set-leader-keys-for-minor-mode 'lsp-mode "=" "format" "=b" #'lsp-format-buffer) Before we had to use another api to bind prefix spacemacs/declare-prefix-for-mode which only works on major-mode. As lsp-mode is a minor mode this api causes a lot of problems to which-key performance. An example is https://github.com/syl20bnr/spacemacs/issues/12455 which led to my hack in https://github.com/syl20bnr/spacemacs/pull/12474. The improved spacemacs/set-leader-keys-for-minor-mode will take care of both prefix and key naming for the minor mode. This will allows us to have a better set up for dynamic minor modes such as lsp-mode, tide-mode etc. Also another api is created to make prefix for minor mode: spacemacs/declare-prefix-for-minor-mode. Usage: (spacemacs/declare-prefix-for-minor-mode 'tide-mode "E" "errors")" * [tide] improve prefix * [lsp] improve prefix |
||
---|---|---|
.. | ||
img | ||
config.el | ||
funcs.el | ||
layers.el | ||
packages.el | ||
README.org |
TypeScript layer
Description
This layer adds support for TypeScript and TSX editing.
Features:
- Multiple backends support: Tide and LSP
- Eldoc-mode
- Documentation at point
- Auto complete
- Flycheck with either tslint or eslint
- Jump to definition, Jump to type definition
- Find occurrences (Imenu-mode)
- Rename symbol
- tsx mode
- formatting
- TypeScript playground integration
Install
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.
(setq-default dotspacemacs-configuration-layers '(typescript))
Formatting
If you need formatting on save:
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
typescript-fmt-on-save t)))
You can choose formatting tool:
'tide
(default)'prettier
'typescript-formatter
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
typescript-fmt-tool 'typescript-formatter)))
You can choose either tslint (default) or eslint for linting:
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
typescript-linter 'tslint)))
Pre-requisites
You will need node.js v0.12.0
or greater.
If you want linting with tslint run:
npm install -g typescript tslint
If you want linting with eslint run:
npm install eslint
We need to use the project-local eslint installation in order to pick up plugins and presets installed locally.
Ensure that the project directory node_modules/.bin
is added to the buffer
local exec_path
(see the Javascript layer README documentation for more
details).
If you want to use typescript-formatter for formatting run:
npm install -g typescript-formatter
For best results, make sure that the auto-completion
(company) and html
layers are enabled.
Choosing a backend
To choose a default backend set the layer variable typescript-backend
:
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables typescript-backend 'tide)))
Alternatively the lsp
backend will be automatically chosen if the layer lsp
is used and you did not specify any value for typescript-backend
.
Backend can be chosen on a per project basis using directory local variables
(files named .dir-locals.el
at the root of a project), an example to use the
lsp
backend:
;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")
((typescript-mode (typescript-backend . lsp)))
Note: you can easily add a directory local variable with SPC f v d
.
Backends
Tide
Tide comes with an embedded Typescript server, it is recommended to use the
server intalled by npm
instead. To do so set the variable
tide-tsserver-executable
to the path of the tsserver
executable.
For example:
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
tide-tsserver-executable "/usr/local/bin/tsserver")))
Notes
Make sure to add tsconfig.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.
Send to playground requires browser.
Currently tsserver doesn't pickup tsconfig.json file changes. You might need to restart server after editing it.
Language Server Protocol
You also need to install the Typescript Language Server. Consult the installation command for the desired language server found at lsp-mode for instructions.
By default lsp will explicitly set itself as the linter, if you don't want that,
then set the variable typescript-lsp-linter
to nil
.
(setq-default dotspacemacs-configuration-layers '(
(typescript :variables
typescript-backend 'lsp
typescript-lsp-linter nil)))
Key bindings
Typescript Major Mode
Key binding | Description |
---|---|
SPC m = or SPC m = = if using lsp backend |
reformat the buffer |
SPC m E d |
add tslint:disable-next-line at point |
SPC m E e |
fix thing at point |
SPC m g b |
jump back |
SPC m g g |
jump to entity's definition |
SPC m g t |
jump to entity's type definition |
SPC m g r |
references |
SPC m h h |
documentation at point |
SPC m p |
send selected region or current buffer to the web playground |
SPC m r i |
organize imports |
SPC m r r |
rename symbol |
SPC m r f |
rename file |
SPC m S r |
restart server |
SPC m S j |
create a barebone jsconfig.json at project root |
Reference Major Mode
Key binding | Description |
---|---|
C-j |
find previous reference |
C-k |
find next reference |
C-l |
goto reference |