spacemacs/contrib/!frameworks/react

• React contribution layer for Spacemacs
  • Table of Contents
  • Description
    • Features
  • Install
  • Optional Configuration

React contribution layer for Spacemacs

logo

Table of Contents   TOC@4

• React contribution layer for Spacemacs

  • Description

    • Features
  • TODO Install
  • Optional Configuration

Description

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

Features

• on-the-fly syntax checking
• proper syntax highlight and indentation with jsx
• ternjs turbocharged autocompletion as in js2-mode

TODO Install

To use this contribution add it to your ~/.spacemacs

  (setq-default dotspacemacs-configuration-layers '(react))

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

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