spacemacs/layers/+frameworks/react

• React contribution layer for Spacemacs
  • Table of Contents
  • Description
    • Features
  • Install
  • Optional Configuration
• Key Bindings
  • js2-mode
  • Folding (js2-mode)
  • Refactoring (js2-refactor)
  • Formatting (web-beautify)
    • Documentation (js-doc)
  • Auto-complete and documentation (tern)
  • JSON

React contribution layer for Spacemacs

logo

Table of Contents   TOC@4

• React contribution layer for Spacemacs

  • Description

    • Features
  • TODO Install
  • Optional Configuration

• Key Bindings

  • js2-mode
  • Folding (js2-mode)
  • Refactoring (js2-refactor)

  • Formatting (web-beautify)

    • Documentation (js-doc)
  • Auto-complete and documentation (tern)
  • JSON

Description

ES6 and JSX ready configuration layer for React It will automatically recognize .jsx and .react.js files

Features

• on-the-fly syntax checking
• proper syntax highlight and indentation with jsx
• ternjs turbocharged autocompletion as in js2-mode
• jsfmt automatic formatting
• js2-refactor
• js-doc

TODO Install

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

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

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

  $ npm install -g tern

To use the on-the-fly syntax checking, install eslint with babel and react support:

  $ npm install -g eslint babel-eslint eslint-plugin-react

If your project do not use a custom .eslintrc file I strongly advice you to try out this one by Airbnb: .eslintrc

In order to use automatic code formatting you need to install js-beautify with:

  $ npm install -g js-beautify

Be sure to have the e4x option set to true on your .jsbeautifyrc here it is my configuration as an example:

  {
    "indent_size": 2,
    "indent_char": " ",
    "eol": "\n",
    "indent_level": 0,
    "indent_with_tabs": false,
    "preserve_newlines": true,
    "max_preserve_newlines": 2,
    "jslint_happy": false,
    "space_after_anon_function": false,
    "brace_style": "collapse",
    "keep_array_indentation": false,
    "keep_function_indentation": false,
    "space_before_conditional": true,
    "break_chained_methods": true,
    "eval_code": false,
    "unescape_strings": false,
    "wrap_line_length": 80,
    "wrap_attributes": "auto",
    "wrap_attributes_indent_size": 2,
    "e4x": true,
    "end_with_newline": true
  }

Optional Configuration

You may refer to the web-mode configuration for fine tuning the indenting behaviour.

For example to have a consistent 2 spaces indenting both on js and jsx you may use these settings:

  (setq-default
   ;; js2-mode
   js2-basic-offset 2
   ;; web-mode
   css-indent-offset 2
   web-mode-markup-indent-offset 2
   web-mode-css-indent-offset 2
   web-mode-code-indent-offset 2
   web-mode-attr-indent-offset 2)

And if you want to have 2 space indent also for element's attributes, concatenations and contiguous function calls:

  (with-eval-after-load 'web-mode
    (add-to-list 'web-mode-indentation-params '("lineup-args" . nil))
    (add-to-list 'web-mode-indentation-params '("lineup-concats" . nil))
    (add-to-list 'web-mode-indentation-params '("lineup-calls" . nil)))

Key Bindings

js2-mode

Key Binding	Description
SPC m w	toggle js2-mode warnings and errors

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