1c4f685b13
TL;DR Should get 20~25% speed improvement on startup, should get a big improvement when using ivy or helm SPC h SPC. Users with layers.el files in their layers must use `configuration-layer/declare-used-layer` instead of `configuration-layer/declare-layer` The implementation of the layer system made heavy use of `object-assoc` and `object-assoc-list` functions which are not efficient. This PR mainly replaces those object lists with hash maps in order to index the objects by their name and achieve an O(1) access time. The old object lists `configuration-layer--layers` and `configuration-layer--packages` have been each by two variables each: - `configuration-layer--indexed-layers` which is a hash-map of all the layer objects and `configuration-layer--used-layers` which is a list of all _used_ layers symbols, - symmetrically `configuration-layer--indexed-packages` which is a hash-map of all the package objects and `configuration-layer--used-packages` which is a list of all _used_ packages symbols. The hash map `configuration-layer--layer-paths` is gone, now we create directly layer objects when discovering the layers and set the :dir property. Note that previously the layer paths were the parent directory of the layer, now :dir is the layer path. The function `configuration-layer//make-layer` is now similar to its counterpart `configuration-layer//make-package` in the sense that it takes an optional `obj` to be able to override its properties. The functions `configuration-layer/declare-layer` and `configuration-layer/declare-layers` now takes an optional parameter `usedp` in order to declare used or not used layers. For convenience new functions have been added: `configuration-layer/declare-used-layer` and `configuration-layer/declare-used-layers`, users _must_ update all occurrences of `configuration-layer/declare-layer` by `configuration-layer/declare-used-layers` in their `layers.el` files. `helm-spacemacs-help` and `ivy-spacemacs-help` are updated to match the changes in `core-configuration-layer.el`. Rename some variables to make them more explicit: `configuration-layer-no-layer` -> `configuration-layer-exclude-all-layers` `configuration-layer-distribution` -> `configuration-layer-force-distribution` |
||
|---|---|---|
| .. | ||
| img | ||
| config.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 |