This layer adds support for the JavaScript language using js2-mode.
- 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
- Formatting with web-beautify
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 activate error checking using flycheck, install one of the available linters
such as ESLint or JSHint:
$ npm install -g eslint
# or
$ npm install -g jshintIf 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)See web-beautify layer documentation.
See prettier layer documentation.
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)))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.
See tern layer documentation.
You just have to install javascript and typescript language server packages:
npm i -g typescript javascript-typescript-langserverTo 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)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).
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)))| Key binding | Description |
|---|---|
SPC m w | toggle js2-mode warnings and errors |
% | jump between blockswith evil-matchit |
| 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 |
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 |
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 |
| 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 s a | 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 |