spacemacs/layers/+frameworks/react/README.org

React layer

• Description
  • Features:
• Install
• Optional Configuration
• Key bindings
  • rjsx-mode
  • Formatting (web-beautify)
    • Documentation (js-doc)
  • 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.

React layer also uses the same import backend defined in javascript layer.

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

When lsp is set as the backend, but you don't want to use lsp as the linter, set the variable javascript-lsp-linter to nil in the Javascript layer.

React layer uses the same formatter defined in javascript layer. Options are web-beautify and prettier. To use automatic code formatting you need to install js-beautify or prettier with:

  $ npm install -g js-beautify prettier

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,
    "brace_style": "collapse-preserve-inline"
  }

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

The javascript layers keymap is set as the parent of the react layers keymap. Check the javascript layers documentation for additional key bindings.

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 l t	log thing at point
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

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