spacemacs/layers/+lang/javascript

JavaScript contribution layer for Spacemacs

• Description
  • Features:
• Install
• Configuration
• Key Bindings
  • js2-mode
  • Folding (js2-mode)
  • Refactoring (js2-refactor)
  • Formatting (web-beautify)
    • Documentation (js-doc)
  • Auto-complete and documentation (tern)
  • JSON

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

Install

To use this contribution add it to your ~/.spacemacs

  (setq-default dotspacemacs-configuration-layers '(javascript))

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

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)

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 x m j	move line down, while keeping commas correctly placed
SPC x m k	move line up, while keeping commas correctly placed
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

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