spacemacs/layers/+lang/javascript

JavaScript layer

• Description
  • Features:
• Install
  • web-beautify
  • prettier
  • Choosing a backend
  • Choosing a formatter
• Backends
  • Tern
  • Language Server Protocol
• Configuration
  • Indentation
  • REPL
  • Node Modules
• Key Bindings
  • js2-mode
  • Folding (js2-mode)
  • Refactoring (js2-refactor)
    • Documentation (js-doc)
  • REPL (skewer-mode)

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
• 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 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.

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.

Backends

Tern

See tern layer documentation.

Language Server Protocol

You just have to install javascript and typescript language server packages:

npm i -g typescript javascript-typescript-langserver

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 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)))

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

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 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