204 lines
10 KiB
Org Mode
204 lines
10 KiB
Org Mode
* React contribution layer for Spacemacs
|
|
|
|
#+CAPTION: logo
|
|
|
|
[[img/react.png]]
|
|
|
|
** Table of Contents :TOC@4:
|
|
- [[#react-contribution-layer-for-spacemacs][React contribution layer for Spacemacs]]
|
|
- [[#description][Description]]
|
|
- [[#features][Features]]
|
|
- [[#install][Install]]
|
|
- [[#optional-configuration][Optional Configuration]]
|
|
- [[#key-bindings][Key Bindings]]
|
|
- [[#js2-mode][js2-mode]]
|
|
- [[#folding-js2-mode][Folding (js2-mode)]]
|
|
- [[#refactoring-js2-refactor][Refactoring (js2-refactor)]]
|
|
- [[#formatting-web-beautify][Formatting (web-beautify)]]
|
|
- [[#documentation-js-doc][Documentation (js-doc)]]
|
|
- [[#auto-complete-and-documentation-tern][Auto-complete and documentation (tern)]]
|
|
- [[#json][JSON]]
|
|
|
|
** 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
|
|
- jsfmt automatic formatting
|
|
- js2-refactor
|
|
- js-doc
|
|
|
|
** TODO Install
|
|
|
|
To use this contribution add it to your =~/.spacemacs=
|
|
|
|
#+begin_src emacs-lisp
|
|
(setq-default dotspacemacs-configuration-layers '(react))
|
|
#+end_src
|
|
|
|
You will also need to install =tern= to use the auto-completion and
|
|
documentation features:
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g tern
|
|
#+END_SRC
|
|
|
|
To use the on-the-fly syntax checking, install =eslint= with babel and react support:
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g eslint babel-eslint eslint-plugin-react
|
|
#+END_SRC
|
|
|
|
If your project do not use a custom =.eslintrc= file I strongly advice you to try out this one by Airbnb:
|
|
[[https://github.com/airbnb/javascript/blob/master/linters/.eslintrc][.eslintrc]]
|
|
|
|
In order to use automatic code formatting you need to install ~js-beautify~ with:
|
|
#+BEGIN_SRC sh
|
|
$ npm install -g js-beautify
|
|
#+END_SRC
|
|
|
|
Be sure to have the ~e4x~ option set to ~true~ on your ~.jsbeautifyrc~ here it is my configuration as an example:
|
|
#+BEGIN_SRC json
|
|
{
|
|
"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
|
|
}
|
|
#+END_SRC
|
|
|
|
** 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:
|
|
|
|
#+begin_src emacs-lisp
|
|
(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)
|
|
#+end_src
|
|
|
|
And if you want to have 2 space indent also for element's attributes, concatenations and contiguous function calls:
|
|
#+begin_src emacs-lisp
|
|
(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)))
|
|
#+end_src
|
|
|
|
|
|
* Key Bindings
|
|
|
|
** js2-mode
|
|
|
|
| Key Binding | Description |
|
|
|-------------+-------------------------------------|
|
|
| ~SPC m w~ | toggle js2-mode warnings and errors |
|
|
|
|
** Folding (js2-mode)
|
|
|
|
| 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 |
|
|
|
|
** Refactoring (js2-refactor)
|
|
|
|
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 |
|
|
|
|
** 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 [[https://github.com/mooz/js-doc/][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 |
|
|
|
|
** JSON
|
|
|
|
| Key Binding | Description |
|
|
|-------------+------------------------------------|
|
|
| ~SPC m h p~ | Get the path of the value at point |
|