Add support for js2-refactor, js-doc and jsfmt
This commit is contained in:
Andrea Moretti
syl20bnr
parent
4938a535e4
commit
ff8851a70a
|
|
@ -10,6 +10,11 @@
|
|||
- [[#features][Features]]
|
||||
- [[#todo-install][TODO Install]]
|
||||
- [[#optional-configuration][Optional Configuration]]
|
||||
- [[#key-bindings][Key Bindings]]
|
||||
- [[#js2-mode][js2-mode]]
|
||||
- [[#refactoring-js2-refactor][Refactoring (js2-refactor)]]
|
||||
- [[#documentation-js-doc][Documentation (js-doc)]]
|
||||
- [[#auto-complete-and-documentation-tern][Auto-complete and documentation (tern)]]
|
||||
|
||||
** Description
|
||||
|
||||
|
|
@ -20,6 +25,9 @@ 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
|
||||
|
||||
** TODO Install
|
||||
|
||||
|
|
@ -43,6 +51,11 @@ To use the on-the-fly syntax checking, install =eslint= with babel and react sup
|
|||
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 [[http://rdio.github.io/jsfmt/][jsfmt]] with:
|
||||
#+BEGIN_SRC sh
|
||||
$ npm install -g jsfmt
|
||||
#+END_SRC
|
||||
|
||||
** Optional Configuration
|
||||
|
||||
You may refer to the =web-mode= configuration for fine tuning the indenting behaviour.
|
||||
|
|
@ -69,6 +82,67 @@ And if you want to have 2 space indent also for element's attributes, concatenat
|
|||
(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 |
|
||||
|
||||
** Refactoring (js2-refactor)
|
||||
|
||||
Bindings should match the plain emacs assignments.
|
||||
|
||||
| Key Binding | Description |
|
||||
|---------------+----------------------------------------------------------------------------------------------------------------|
|
||||
| ~SPC m f~ | format the current buffer using [[http://rdio.github.io/jsfmt/][jsfmt]]
|
||||
| ~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 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 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 |
|
||||
|
||||
** Documentation (js-doc)
|
||||
|
||||
You can check more [[https://github.com/mooz/js-doc/][here]]
|
||||
|
||||
| Key Binding | Description |
|
||||
|---------------+---------------------------------------|
|
||||
| ~SPC m i d b~ | insert JSDoc comment for current file |
|
||||
| ~SPC m i d f~ | insert JSDoc comment for function |
|
||||
| ~SPC m i d t~ | insert tag to comment |
|
||||
| ~SPC m i 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 v~ | rename variable under the cursor using tern |
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -16,8 +16,11 @@
|
|||
'(
|
||||
web-mode
|
||||
js2-mode
|
||||
js2-refactor
|
||||
js-doc
|
||||
flycheck
|
||||
tern
|
||||
jsfmt
|
||||
company
|
||||
company-tern
|
||||
))
|
||||
|
|
@ -62,16 +65,17 @@
|
|||
(when (equal web-mode-content-type "jsx")
|
||||
(js2-minor-mode)))))
|
||||
|
||||
(defun react/pre-init-tern ()
|
||||
(spacemacs|use-package-add-hook tern
|
||||
:post-config
|
||||
(progn
|
||||
;;(evil-leader/set-key-for-mode 'web-mode "mrrV" 'tern-rename-variable)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mhd" 'tern-get-docs)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mgg" 'tern-find-definition)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mgG" 'tern-find-definition-by-name)
|
||||
(evil-leader/set-key-for-mode 'web-mode (kbd "m C-g") 'tern-pop-find-definition)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mht" 'tern-get-type))))
|
||||
(defun react/post-init-js2-refactor ()
|
||||
(add-hook 'web-mode-hook
|
||||
(lambda ()
|
||||
(when (equal web-mode-content-type "jsx")
|
||||
(require 'js2-refactor)))))
|
||||
|
||||
(defun react/post-init-js2-refactor ()
|
||||
(add-hook 'web-mode-hook
|
||||
(lambda ()
|
||||
(when (equal web-mode-content-type "jsx")
|
||||
(require 'js-doc)))))
|
||||
|
||||
(defun react/post-init-tern ()
|
||||
(add-hook 'web-mode-hook
|
||||
|
|
@ -85,6 +89,92 @@
|
|||
(when (equal web-mode-content-type "jsx")
|
||||
(push 'company-tern company-backends-web-mode)))))
|
||||
|
||||
(defun react/pre-init-js2-mode ()
|
||||
(spacemacs|use-package-add-hook js2-mode
|
||||
:post-config
|
||||
(progn
|
||||
(evil-leader/set-key-for-mode 'web-mode "mw" 'js2-mode-toggle-warnings-and-errors))))
|
||||
|
||||
(defun react/pre-init-tern ()
|
||||
(spacemacs|use-package-add-hook tern
|
||||
:post-config
|
||||
(progn
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrv" 'tern-rename-variable) ;; was mrrV
|
||||
(evil-leader/set-key-for-mode 'web-mode "mhd" 'tern-get-docs)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mgg" 'tern-find-definition)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mgG" 'tern-find-definition-by-name)
|
||||
(evil-leader/set-key-for-mode 'web-mode (kbd "m C-g") 'tern-pop-find-definition)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mht" 'tern-get-type))))
|
||||
|
||||
(defun react/pre-init-js2-refactor ()
|
||||
(spacemacs|use-package-add-hook js2-refactor
|
||||
:post-config
|
||||
(progn
|
||||
(evil-leader/set-key-for-mode 'web-mode "mr3i" 'js2r-ternary-to-if)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrag" 'js2r-add-to-globals-annotation)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrao" 'js2r-arguments-to-object)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrba" 'js2r-forward-barf)
|
||||
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrca" 'js2r-contract-array)
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrco" 'js2r-contract-object)
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrcu" 'js2r-contract-function)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrea" 'js2r-expand-array)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mref" 'js2r-extract-function)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrem" 'js2r-extract-method)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mreo" 'js2r-expand-object)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mreu" 'js2r-expand-function)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrev" 'js2r-extract-var)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrig" 'js2r-inject-global-in-iife)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrip" 'js2r-introduce-parameter)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mriv" 'js2r-inline-var)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrlp" 'js2r-localize-parameter)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrlt" 'js2r-log-this)
|
||||
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrrv" 'js2r-rename-var)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrsl" 'js2r-forward-slurp)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrss" 'js2r-split-string)
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrsv" 'js2r-split-var-declaration)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mrtf" 'js2r-toggle-function-expression-and-declaration)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mruw" 'js2r-unwrap)
|
||||
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrvt" 'js2r-var-to-this)
|
||||
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrwi" 'js2r-wrap-buffer-in-iife)
|
||||
;; (evil-leader/set-key-for-mode 'web-mode "mrwl" 'js2r-wrap-in-for-loop)
|
||||
|
||||
(evil-leader/set-key-for-mode 'web-mode "mk" 'js2r-kill)
|
||||
(evil-leader/set-key-for-mode 'web-mode "xmj" 'js2r-move-line-down)
|
||||
(evil-leader/set-key-for-mode 'web-mode "xmk" 'js2r-move-line-up))))
|
||||
|
||||
(defun react/pre-init-js-doc ()
|
||||
(spacemacs|use-package-add-hook js-doc
|
||||
:post-config
|
||||
(progn
|
||||
(evil-leader/set-key-for-mode 'web-mode "midb" 'js-doc-insert-file-doc) ;; was mrdb
|
||||
(evil-leader/set-key-for-mode 'web-mode "midf" 'js-doc-insert-function-doc) ;; was mrdf
|
||||
(evil-leader/set-key-for-mode 'web-mode "midt" 'js-doc-insert-tag) ;; was mrdt
|
||||
(evil-leader/set-key-for-mode 'web-mode "midh" 'js-doc-describe-tag)))) ;; was mrdh
|
||||
|
||||
(defun react/init-jsfmt ()
|
||||
(use-package jsfmt
|
||||
:commands (jsfmt)
|
||||
:config
|
||||
(evil-leader/set-key-for-mode 'web-mode "mf" 'jsfmt)))
|
||||
|
||||
(defun react/post-init-jsfmt ()
|
||||
(add-hook 'web-mode-hook
|
||||
(lambda ()
|
||||
(when (equal web-mode-content-type "jsx")
|
||||
(require 'jsfmt)))))
|
||||
|
||||
;;
|
||||
;; Often the body of an initialize function uses `use-package'
|
||||
;; For more info on `use-package', see readme:
|
||||
|
|
|
|||
Loading…
Reference in New Issue