Add relevant keybindings and documentation, including a setting `js2-include-node-externs` as a configuration variable for those that intend to use `Spacemacs` for node projects, as it currently seems to be mostly aimed at pure JS (https://github.com/syl20bnr/spacemacs/issues/483).
18 KiB
JavaScript layer
Description
This layer adds support for the JavaScript language using js2-mode.
Features:
- Multiple backends support: Tern and LSP
- Smart code folding
- Refactoring: done using js2-refactor.
- Auto-completion and documentation
- REPL available via skewer-mode and livid-mode
- NodeJS REPL with nodejs-repl
- Formatting with web-beautify
Install
To use this configuration layer, add it to your ~/.spacemacs
. You will need to
add javascript
to the existing dotspacemacs-configuration-layers
list in
this file.
To enable the importing helper, install the ImportJS
:
$ npm install -g import-js
To activate error checking using flycheck, install one of the available linters
such as ESLint
or JSHint
:
$ npm install -g eslint
# or
$ npm install -g jshint
If you install these in non-standard locations, then add the following to your dotspacemacs/user-init
function:
(add-to-list 'exec-path "/path/to/node/bins" t)
web-beautify
See web-beautify layer documentation.
prettier
See prettier layer documentation.
import-js
See import-js layer documentation.
To enable it, set the layer variable javascript-import-tool
:
(javascript :variables javascript-import-tool 'import-js)
Choosing a backend
To choose a default backend set the layer variable javascript-backend
:
(javascript :variables javascript-backend 'tern)
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")
((js2-mode (javascript-backend . lsp)))
Choosing a formatter
To choose a formatter, set the layer variable javascript-fmt-tool
:
(javascript :variables javascript-fmt-tool 'web-beautify)
Formatter 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
prettier
formatter:
;;; Directory Local Variables
;;; For more information see (info "(emacs) Directory Variables")
((js2-mode (javascript-fmt-tool . prettier)))
Note: you can easily add a directory local variable with SPC f v d
.
You can choose formatting tool:
(setq-default dotspacemacs-configuration-layers '(
(javascript :variables
javascript-fmt-tool 'prettier)))
Default is ’web-beautify
.
Backends
Tern
See tern layer documentation.
Language Server Protocol
You have to install typescript-language-server
(recommended) or javascript-typescript-langserver
language server packages via
npm i -g typescript typescript-language-server
or
npm i -g typescript javascript-typescript-langserver
Debugger (dap integration)
To install the debug adapter you may run M-x dap-firefox-setup
or M-x dap-firefox-setup
if you are using Linux or download it manually from Firefox Debug Adapter or Chrome Debug Adapter and adjust dap-firefox-debug-path
or dap-chrome-debug-path
. For usage instructions refer to dap-mode readme.
Configuration
Indentation
To change how js2-mode indents code, set the variable js2-basic-offset
, as
such:
(setq-default js2-basic-offset 2)
or when adding the javascript
configuration layer:
(javascript :variables js2-basic-offset 2)
Similarly, to change how js-mode indents JSON files, set the variable
js-indent-level
, as such:
(setq-default js-indent-level 2)
or when adding the javascript
configuration layer:
(javascript :variables js-indent-level 2)
REPL
To use the available JS repl, you need a running httpd server and a page loaded with skewer. If a blank page serves your needs, just use the run-skewer command in your javascript buffer. If you want to inject it in your own page, follow these instructions (install the Greasemonkey script and then click the triangle in the top-right corner - if it turns green, you're good to go).
Node
Node Modules
If you would like node_modules/.bin
to be automatically added to the buffer
local exec_path
, e.g. to support project local eslint installations, set the
node-add-modules-path
variable in the javascript
config section. Note that
doing this introduces a security risk:
(setq-default dotspacemacs-configuration-layers
'((javascript :variables node-add-modules-path t)))
Node Externs
If you want js2-mode
to presume node
variables are defined by the host
system (for completion purposes i.a.) set the js2-include-node-exters
variable to t
in the javascript
config section:
(setq-default dotspacemacs-configuration-layers
'((javascript :variables js2-include-node-externs t)))
Key bindings
js2-mode
Key binding | Description |
---|---|
SPC m w |
toggle js2-mode warnings and errors |
% |
jump between blockswith evil-matchit |
Folding (js2-mode)
Key binding | Description |
---|---|
SPC m z c |
hide element |
SPC m z o |
show element |
SPC m z r |
show all element |
SPC m z e |
toggle hide/show element |
SPC m z F |
toggle hide functions |
SPC m z C |
toggle hide comments |
Importing (import-js)
Key binding | Description |
---|---|
SPC m i i |
Import the module for the variable under the cursor |
SPC m i f |
Import any missing modules and remove any modules that are not used |
SPC m g i |
Go to the module of the variable under cursor |
Refactoring (js2-refactor)
Bindings should match the plain emacs assignments.
Key binding | Description |
---|---|
SPC m k |
deletes to the end of the line, but does not cross semantic boundaries |
SPC m r 3 i |
converts ternary operator to if-statement |
SPC m r a g |
creates a /* global */ annotation if it is missing, and adds var to point to it |
SPC m r a o |
replaces arguments to a function call with an object literal of named arguments |
SPC m r b a |
moves the last child out of current function, if-statement, for-loop or while-loop |
SPC m r c a |
converts a multiline array to one line |
SPC m r c o |
converts a multiline object literal to one line |
SPC m r c u |
converts a multiline function to one line (expecting semicolons as statement delimiters) |
SPC m r e a |
converts a one line array to multiline |
SPC m r e f |
extracts the marked expressions into a new named function |
SPC m r e m |
extracts the marked expressions out into a new method in an object literal |
SPC m r e o |
converts a one line object literal to multiline |
SPC m r e u |
converts a one line function to multiline (expecting semicolons as statement delimiters) |
SPC m r e v |
takes a marked expression and replaces it with a var |
SPC m r i g |
creates a shortcut for a marked global by injecting it in the wrapping immediately invoked function expression |
SPC m r i p |
changes the marked expression to a parameter in a local function |
SPC m r i v |
replaces all instances of a variable with its initial value |
SPC m r l p |
changes a parameter to a local var in a local function |
SPC m r l t |
adds a console.log statement for what is at point (or region) |
SPC m r r v |
renames the variable on point and all occurrences in its lexical scope |
SPC m r s l |
moves the next statement into current function, if-statement, for-loop, while-loop |
SPC m r s s |
splits a String |
SPC m r s v |
splits a var with multiple vars declared into several var statements |
SPC m r t f |
toggle between function declaration and function expression |
SPC m r u w |
replaces the parent statement with the selected region |
SPC m r v t |
changes local var a to be this.a instead |
SPC m r w i |
wraps the entire buffer in an immediately invoked function expression |
SPC m r w l |
wraps the region in a for-loop |
SPC m x m j |
move line down, while keeping commas correctly placed |
SPC m x m k |
move line up, while keeping commas correctly placed |
Documentation (js-doc)
You can check more here
Key binding | Description |
---|---|
SPC m r d b |
insert JSDoc comment for current file |
SPC m r d f |
insert JSDoc comment for function |
SPC m r d t |
insert tag to comment |
SPC m r d h |
show list of available jsdoc tags |
REPL (skewer-mode)
Key binding | Description |
---|---|
SPC m e e |
evaluates the last expression |
SPC m e E |
evaluates and inserts the result of the last expression at point |
Key binding | Description |
---|---|
SPC m T l |
Toggle live evaluation of whole buffer in REPL on buffer changes |
SPC m s b |
send current buffer contents to the skewer REPL |
SPC m s B |
send current buffer contents to the skewer REPL and switch to it in insert state |
SPC m s f |
send current function at point to the skewer REPL |
SPC m s F |
send current function at point to the skewer REPL and switch to it in insert state |
SPC m s i |
starts/switch to the skewer REPL |
SPC m s r |
send current region to the skewer REPL |
SPC m s R |
send current region to the skewer REPL and switch to it in insert state |
SPC m s s |
switch to REPL |
debugger (dap mode)
Key binding | Description |
---|---|
SPC m d d d |
start debugging |
SPC m d d l |
debug last configuration |
SPC m d d r |
debug recent configuration |
SPC m d c |
continue |
SPC m d i |
step in |
SPC m d o |
step out |
SPC m d s |
next step |
SPC m d v |
inspect value at point |
SPC m d r |
restart frame |
SPC m d . |
debug transient state |
SPC m d a |
abandon current session |
SPC m d A |
abandon all process |
SPC m d e e |
eval |
SPC m d e r |
eval region |
SPC m d e t |
eval value at point |
SPC m d S s |
switch session |
SPC m d S t |
switch thread |
SPC m d S f |
switch frame |
SPC m d I i |
inspect |
SPC m d I r |
inspect region |
SPC m d I t |
inspect value at point |
SPC m d b b |
toggle a breakpoint |
SPC m d b c |
change breakpoint condition |
SPC m d b l |
change breakpoint log condition |
SPC m d b h |
change breakpoint hit count |
SPC m d b a |
add a breakpoint |
SPC m d b d |
delete a breakpoint |
SPC m d b D |
clear all breakpoints |
SPC m d '_ |
Run debug REPL |
SPC m d w l |
list local variables |
SPC m d w o |
goto output buffer if present |
SPC m d w s |
list sessions |
SPC m d w b |
list breakpoints |
NodeJS REPL (nodejs-repl)
Key binding | Description |
---|---|
SPC m s n i |
Switch to NodeJS REPL if one has been started, otherwise start one |
SPC m s n e |
Send last expression to NodeJS REPL |
SPC m s n E |
Send last expression to NodeJS REPL and switch to REPL |
SPC m s n b |
Send current buffer to NodeJS REPL |
SPC m s n B |
Send current buffer to NodeJS REPL and switch to REPL |
SPC m s n l |
Send current line to NodeJS REPL |
SPC m s n L |
Send current line to NodeJS REPL and switch to REPL |
SPC m s n r |
Send active region to NodeJS REPL |
SPC m s n R |
Send active region to NodeJS REPL and switch to REPL |