spacemacs/layers/+lang/javascript

JavaScript layer

• Description
  • Features:
• Install
  • Choosing a backend
• Backends
  • Tern
  • Language Server Protocol
• Configuration
  • Indentation
  • REPL
  • Node Modules
• Key Bindings
  • js2-mode
  • Folding (js2-mode)
  • Refactoring (js2-refactor)
  • Formatting (web-beautify)
    • Documentation (js-doc)
  • Auto-complete and documentation (tern)
  • JSON
  • REPL (skewer-mode)
  • coffee-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: provided by tern
• CoffeeScript support
• Formatting with web-beautify
• Get the path to a JSON value with json-snatcher
• REPL available via skewer-mode and livid-mode

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 use the formatting features, install js-beautify:

  $ npm install -g js-beautify

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)

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

Note: you can easily add a directory local variable with SPC f v d.

Backends

Tern

Install tern to use the auto-completion and documentation features:

  $ npm install -g tern

To make tern re-use the server across multiple different editing sessions (thus creating multiple .tern-port files for each document you have open see here for more details):

The variables provided below can be set when adding the javascript configuration layer, as detailed in this section of the documentation.

  (javascript :variables javascript-disable-tern-port-files nil)

Windows users may need to set the variable tern-command in order for emacs to locate and launch tern server successfully. See this open issue for more details. The variable can be set when adding the javascript configuration layer:

(setq-default dotspacemacs-configuration-layers '(
  (javascript :variables tern-command '("node" "/path/to/tern/bin/tern")))

Language Server Protocol

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

npm i -g typescript javascript-typescript-langserver flow-language-server

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

Formatting (web-beautify)

Key Binding	Description
SPC m =	beautify code in js2-mode, json-mode, web-mode, and css-mode

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

Auto-complete and documentation (tern)

Key Binding	Description
SPC m C-g	brings you back to last place you were when you pressed M-..
SPC m g g	jump to the definition of the thing under the cursor
SPC m g G	jump to definition for the given name
SPC m h d	find docs of the thing under the cursor. Press again to open the associated URL (if any)
SPC m h t	find the type of the thing under the cursor
SPC m r r V	rename variable under the cursor using tern

JSON

Key Binding	Description
SPC m h p	Get the path of the value at point

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

coffee-mode

Key Binding	Description
SPC m '	Create or go to REPL
SPC m c c	Compile buffer
SPC m c r	Compile region
SPC m s b	Send buffer to REPL
SPC m s l	Send line to REPL
SPC m s i	Create or go to REPL
SPC m s r	send current region to the REPL and stay in buffer
SPC m T c	Toggle compile on save