Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
img Use + instead of ! for layer categories Sep 11, 2015
README.org react: fix tern and docs Apr 30, 2016
config.el Bump year in copyright headers Apr 2, 2017
funcs.el Bump year in copyright headers Apr 2, 2017
layers.el Bump year in copyright headers Apr 2, 2017
packages.el Bump year in copyright headers Apr 2, 2017

README.org

React layer

img/react.png

Table of Contents

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.

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

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
}

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

Formatting (web-beautify)

Key BindingDescription
SPC m =beautify code in js2-mode, json-mode, web-mode, and css-mode

Documentation (js-doc)

You can check more here

Key BindingDescription
SPC m r d binsert JSDoc comment for current file
SPC m r d finsert JSDoc comment for function
SPC m r d tinsert tag to comment
SPC m r d hshow list of available jsdoc tags

Auto-complete and documentation (tern)

Key BindingDescription
SPC m C-gbrings you back to last place you were when you pressed M-..
SPC m g gjump to the definition of the thing under the cursor
SPC m g Gjump to definition for the given name
SPC m h dfind docs of the thing under the cursor. Press again to open the associated URL (if any)
SPC m h tfind the type of the thing under the cursor
SPC m r r Vrename variable under the cursor using tern
You can’t perform that action at this time.