ES6 and JSX ready configuration layer for React
It will automatically recognize .jsx and .react.js files
- 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
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 ternTo use the on-the-fly syntax checking, install eslint with babel and react support:
$ npm install -g eslint babel-eslint eslint-plugin-reactIf 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-beautifyBe 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
}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 Binding | Description |
|---|---|
SPC m w | toggle js2-mode warnings and errors |
| Key Binding | Description |
|---|---|
SPC m z c | hide element |
SPC m z o | show element |
SPC m z r | show all element |
SPC m z e | toggle hide/show element |
SPC m z F | toggle hide functions |
SPC m z C | toggle hide comments |
Bindings should match the plain emacs assignments.
| Key Binding | Description |
|---|---|
SPC x m j | move line down, while keeping commas correctly placed |
SPC x m k | move line up, while keeping commas correctly placed |
SPC m k | deletes to the end of the line, but does not cross semantic boundaries |
SPC m r 3 i | converts ternary operator to if-statement |
SPC m r a g | creates a /* global */ annotation if it is missing, and adds var to point to it |
SPC m r a o | replaces arguments to a function call with an object literal of named arguments |
SPC m r b a | moves the last child out of current function, if-statement, for-loop or while-loop |
SPC m r c a | converts a multiline array to one line |
SPC m r c o | converts a multiline object literal to one line |
SPC m r c u | converts a multiline function to one line (expecting semicolons as statement delimiters) |
SPC m r e a | converts a one line array to multiline |
SPC m r e f | extracts the marked expressions into a new named function |
SPC m r e m | extracts the marked expressions out into a new method in an object literal |
SPC m r e o | converts a one line object literal to multiline |
SPC m r e u | converts a one line function to multiline (expecting semicolons as statement delimiters) |
SPC m r e v | takes a marked expression and replaces it with a var |
SPC m r i g | creates a shortcut for a marked global by injecting it in the wrapping immediately invoked function expression |
SPC m r i p | changes the marked expression to a parameter in a local function |
SPC m r i v | replaces all instances of a variable with its initial value |
SPC m r l p | changes a parameter to a local var in a local function |
SPC m r l t | adds a console.log statement for what is at point (or region) |
SPC m r r v | renames the variable on point and all occurrences in its lexical scope |
SPC m r s l | moves the next statement into current function, if-statement, for-loop, while-loop |
SPC m r s s | splits a String |
SPC m r s v | splits a var with multiple vars declared into several var statements |
SPC m r t f | toggle between function declaration and function expression |
SPC m r u w | replaces the parent statement with the selected region |
SPC m r v t | changes local var a to be this.a instead |
SPC m r w i | wraps the entire buffer in an immediately invoked function expression |
SPC m r w l | wraps the region in a for-loop |
| Key Binding | Description |
|---|---|
SPC m = | beautify code in js2-mode, json-mode, web-mode, and css-mode |
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 |
| 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 |
| Key Binding | Description |
|---|---|
SPC m h p | Get the path of the value at point |