spacemacs/layers/+frameworks/react

React layer

• Description
  • Features:
• Install
• Optional Configuration
• Key Bindings
  • rjsx-mode
  • Formatting (web-beautify)
    • Documentation (js-doc)
  • Auto-complete and documentation (tern)

Description

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

Features:

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

Install

To use this configuration layer, add it to your ~/.spacemacs. You will need to add react to the existing dotspacemacs-configuration-layers list in this file.

React layer uses the same backend defined in javascript layer. Options are tern and lsp.

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

If you install these in non-standard locations, then add the following to your dotspacemacs/user-init function:

  (add-to-list 'exec-path "/path/to/node/bins" t)

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

rjsx-mode

Key Binding	Description
<	inserts </> whenever it would start a new JSX node
>	right before the slash in a self-closing tag automatically inserts a closing tag
SPC m r r t	rename tag at point

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