74fdbb6795
Enabling a company backend for a specific mode was a tedious tasks with code scattered at different locations, one for local variable definitions, one for company hook function definitions and another where the backends were pushed to the local variables (which was problematic, since we ended up pushing the same backends over and over again with `SPC f e R`, pushes have been replaced by add-to-list calls in the new macro). All these steps are now put together at one place with the new macro spacemacs|add-company-backends, check its docstring for more info on its arguments. This macro also allows to define arbitrary buffer local variables to tune company for specific modes (similar to layer variables via a keyword :variables) The code related to company backends management has been moved to the auto-completion layer in the funcs.el file. A nice side effect of this move is that it enforces correct encapsulation of company backends related code. We can now easily detect if there is some configuration leakage when the auto-completion layer is not used. But we loose macro expansion at file loading time (not sue it is a big concern though). The function spacemacs|enable-auto-complete was never used so it has been deleted which led to the deletion of the now empty file core-auto-completion.el. The example in LAYERS.org regarding auto-completion is now out of date and has been deleted. An example to setup auto-completion is provided in the README.org file of the auto-completion layer. |
||
---|---|---|
.. | ||
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
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 |