e6048e0863
If you install your node bins in places outside of the system path, you need to add those locations to the exec path before packages are loaded or else spacemacs won't recognize them as existing when it initializes the layers. |
||
|---|---|---|
| .. | ||
| img | ||
| config.el | ||
| funcs.el | ||
| layers.el | ||
| packages.el | ||
| README.org | ||
React layer
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
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
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 |