spacemacs/layers/+lang/javascript/README.org

11 KiB

JavaScript layer

/TakeV/spacemacs/media/commit/07852abad561f4a205d32e4e30f7e347eb1e254d/layers/+lang/javascript/img/javascript.png /TakeV/spacemacs/media/commit/07852abad561f4a205d32e4e30f7e347eb1e254d/layers/+lang/javascript/img/coffee.png

Description

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

Features:

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)

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

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