Table of Contents

React layer

Table of ContentsClose


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:

 ;; 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

Author: Sylvain Benner

Created: 2016-10-03 Mon 00:56