5.5 KiB
React layer
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.
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
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
}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
| 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 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 |
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 |