Skip to content

Latest commit

 

History

History
212 lines (173 loc) · 11.8 KB

README.org

File metadata and controls

212 lines (173 loc) · 11.8 KB

JavaScript layer

img/javascript.png img/coffee.png

Table of Contents

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 one of the available linters such as ESLint or JSHint:

$ npm install -g eslint
# or
$ 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 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).

Key Bindings

js2-mode

Key BindingDescription
SPC m wtoggle js2-mode warnings and errors
%jump between blockswith evil-matchit

Folding (js2-mode)

Key BindingDescription
SPC m z chide element
SPC m z oshow element
SPC m z rshow all element
SPC m z etoggle hide/show element
SPC m z Ftoggle hide functions
SPC m z Ctoggle hide comments

Refactoring (js2-refactor)

Bindings should match the plain emacs assignments.

Key BindingDescription
SPC m kdeletes to the end of the line, but does not cross semantic boundaries
SPC m r 3 iconverts ternary operator to if-statement
SPC m r a gcreates a /* global */ annotation if it is missing, and adds var to point to it
SPC m r a oreplaces arguments to a function call with an object literal of named arguments
SPC m r b amoves the last child out of current function, if-statement, for-loop or while-loop
SPC m r c aconverts a multiline array to one line
SPC m r c oconverts a multiline object literal to one line
SPC m r c uconverts a multiline function to one line (expecting semicolons as statement delimiters)
SPC m r e aconverts a one line array to multiline
SPC m r e fextracts the marked expressions into a new named function
SPC m r e mextracts the marked expressions out into a new method in an object literal
SPC m r e oconverts a one line object literal to multiline
SPC m r e uconverts a one line function to multiline (expecting semicolons as statement delimiters)
SPC m r e vtakes a marked expression and replaces it with a var
SPC m r i gcreates a shortcut for a marked global by injecting it in the wrapping immediately invoked function expression
SPC m r i pchanges the marked expression to a parameter in a local function
SPC m r i vreplaces all instances of a variable with its initial value
SPC m r l pchanges a parameter to a local var in a local function
SPC m r l tadds a console.log statement for what is at point (or region)
SPC m r r vrenames the variable on point and all occurrences in its lexical scope
SPC m r s lmoves the next statement into current function, if-statement, for-loop, while-loop
SPC m r s ssplits a String
SPC m r s vsplits a var with multiple vars declared into several var statements
SPC m r t ftoggle between function declaration and function expression
SPC m r u wreplaces the parent statement with the selected region
SPC m r v tchanges local var a to be this.a instead
SPC m r w iwraps the entire buffer in an immediately invoked function expression
SPC m r w lwraps the region in a for-loop
SPC m x m jmove line down, while keeping commas correctly placed
SPC m x m kmove line up, while keeping commas correctly placed

Formatting (web-beautify)

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

Documentation (js-doc)

You can check more here

Key BindingDescription
SPC m r d binsert JSDoc comment for current file
SPC m r d finsert JSDoc comment for function
SPC m r d tinsert tag to comment
SPC m r d hshow list of available jsdoc tags

Auto-complete and documentation (tern)

Key BindingDescription
SPC m C-gbrings you back to last place you were when you pressed M-..
SPC m g gjump to the definition of the thing under the cursor
SPC m g Gjump to definition for the given name
SPC m h dfind docs of the thing under the cursor. Press again to open the associated URL (if any)
SPC m h tfind the type of the thing under the cursor
SPC m r r Vrename variable under the cursor using tern

JSON

Key BindingDescription
SPC m h pGet the path of the value at point

REPL (skewer-mode)

Key BindingDescription
SPC m e eevaluates the last expression
SPC m e Eevaluates and inserts the result of the last expression at point
Key BindingDescription
SPC m s aToggle live evaluation of whole buffer in REPL on buffer changes
SPC m s bsend current buffer contents to the skewer REPL
SPC m s Bsend current buffer contents to the skewer REPL and switch to it in insert state
SPC m s fsend current function at point to the skewer REPL
SPC m s Fsend current function at point to the skewer REPL and switch to it in insert state
SPC m s istarts/switch to the skewer REPL
SPC m s rsend current region to the skewer REPL
SPC m s Rsend current region to the skewer REPL and switch to it in insert state
SPC m s sswitch to REPL