React layer

Table of ContentsClose

1. Description
- 1.1. Features
2. Install
3. Optional Configuration
4. Key Bindings
- 4.1. Formatting (web-beautify)
  - 4.1.1. Documentation (js-doc)
- 4.2. Auto-complete and documentation (tern)

1 Description

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

It will also recognize /** @jsx React.DOM */ if it is the first line.

1.1 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

2 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.

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
}

3 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)))

4 Key Bindings

4.1 Formatting (web-beautify)

Key Binding	Description
`SPC m =`	beautify code in js2-mode, json-mode, web-mode, and css-mode

4.1.1 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

4.2 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