spacemacs/layers/+lang/javascript

JavaScript layer

• Description
  • Features:
• Install
• Configuration
  • Tern
  • Indentation
  • REPL
• 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)

Description

This layer adds support for the JavaScript language using js2-mode.

Features:

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

You will also need to install tern to use the auto-completion and documentation features:

  $ npm install -g tern

To use the formatting features, install js-beautify:

  $ npm install -g js-beautify

To activate error checking using flycheck install JSHint:

  $ npm install -g jshint

Configuration

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:

  (javascript :variables tern-command '("node" "/path/to/tern/bin/tern"))

Indentation

To change how js2-mode indents code, set the variable js2-basic-offset, as such:

  (setq-default 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)

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 the instructions in https://github.com/skeeto/skewer-mode#skewering-with-cors (install the Greasemonkey script and then click the triangle in the top-right corner - if it turns green, you're good to go).

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