spacemacs/contrib/!frameworks/react

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

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
  • Refactoring (js2-refactor)
  • Documentation (js-doc)
  • Auto-complete and documentation (tern)

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 jsfmt with:

  $ npm install -g jsfmt

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

Refactoring (js2-refactor)

Bindings should match the plain emacs assignments.

Key Binding	Description
SPC m f	format the current buffer using jsfmt
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 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 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

Documentation (js-doc)

You can check more here

Key Binding	Description
SPC m i d b	insert JSDoc comment for current file
SPC m i d f	insert JSDoc comment for function
SPC m i d t	insert tag to comment
SPC m i 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 v	rename variable under the cursor using tern