JavaScript layer

• Multiple backends support: Tern and LSP
• Smart code folding
• Refactoring: done using js2-refactor.
• Auto-completion and documentation
• Browser based REPL available via skewer-mode and livid-mode
• Server based REPL with nodejs-repl
• Formatting with web-beautify or prettier
• Interactive debugger using dap-mode
• Display Flow & Typescript type information

To activate error checking / linting using flycheck, install on your system one of the available linters such as ESLint, JSHint or StandardJS:

$ npm install -g eslint
# or
$ npm install -g jshint
# or
$ npm install -g standard

If you install these in non-standard locations, add the following to your dotspacemacs/user-init function:

(add-to-list 'exec-path "/path/to/node/bins" t)

Finally, you will want to turn off js2-mode warnings, since they might be in conflict with the linter you are using via flycheck:

(javascript :variables js2-mode-show-strict-warnings nil)

See web-beautify layer documentation.

See prettier layer documentation.

See import-js layer documentation.

Install ImportJS on your system:

$ npm install -g import-js

To enable it, set the layer variable javascript-import-tool:

(javascript :variables javascript-import-tool 'import-js)

To choose a default backend set the layer variable javascript-backend:

(javascript :variables javascript-backend 'tern)

Alternatively the lsp backend will be automatically chosen if the layer lsp is used and you did not specify any value for javascript-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")

((js2-mode (javascript-backend . lsp)))

When lsp is set as the backend, but you don't want to use lsp as the linter, set the variable javascript-lsp-linter to nil.

(javascript :variables
            javascript-backend 'lsp
            javascript-lsp-linter nil)

To choose a formatter, set the layer variable javascript-fmt-tool:

(javascript :variables javascript-fmt-tool 'web-beautify)

The formatter can be chosen on a per project basis using directory local variables (files named .dir-locals.el at the root of a project). For 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.

See tern layer documentation.

See tide layer documentation.

To use an LSP server with JavaScript, add it as a javascript-backend to your ~/.spacemacs.

(setq-default dotspacemacs-configuration-layers
              '((javascript :variables
                            javascript-backend 'lsp)))

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)

Enable the lsp backend to view type information, jump to declarations, and more.

js2-mode is sometimes confused by the type syntax, so you may wish to disable their parse warnings:

(javascript :variables javascript-backend 'lsp
            js2-mode-show-strict-warnings nil
            js2-mode-show-parse-errors nil)

Bindings should match the plain emacs assignments.

Using the dap layer you'll get access to all the DAP key bindings, see the complete list of key bindings on the dap layer description.