Add: use rjsx-mode for react framework
Fix: add yas-activate-extra-mode Add: add lsp support for react layer Add: Add rjsx-mode key-bindings doc Clean: rename spacemacs//set-lsp-key-bindings to spacemacs//setup-lsp-jump-handler Fix: remove buggy hooks Clean: move fix-lsp-company-prefix to lsp layer Fix: rjsx-mode company Fix: rjsx-mode lsp backend
This commit is contained in:
parent
572d4388fb
commit
8616f07b86
|
@ -198,7 +198,7 @@
|
|||
|
||||
(defun auto-completion/init-yasnippet ()
|
||||
(use-package yasnippet
|
||||
:commands (yas-global-mode yas-minor-mode)
|
||||
:commands (yas-global-mode yas-minor-mode yas-activate-extra-mode)
|
||||
:init
|
||||
(progn
|
||||
;; We don't want undefined variable errors
|
||||
|
|
|
@ -8,20 +8,19 @@
|
|||
- [[#install][Install]]
|
||||
- [[#optional-configuration][Optional Configuration]]
|
||||
- [[#key-bindings][Key Bindings]]
|
||||
- [[#rjsx-mode][rjsx-mode]]
|
||||
- [[#formatting-web-beautify][Formatting (web-beautify)]]
|
||||
- [[#documentation-js-doc][Documentation (js-doc)]]
|
||||
- [[#auto-complete-and-documentation-tern][Auto-complete and documentation (tern)]]
|
||||
|
||||
* 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.
|
||||
It will automatically recognize =.jsx= files and files with =react= imported.
|
||||
|
||||
** Features:
|
||||
- on-the-fly syntax checking
|
||||
- proper syntax highlight and indentation with jsx
|
||||
- ternjs turbocharged autocompletion as in js2-mode
|
||||
- backend support for autocompletion as in rjsx-mode
|
||||
- jsfmt automatic formatting
|
||||
- js2-refactor
|
||||
- js-doc
|
||||
|
@ -31,11 +30,7 @@ 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:
|
||||
#+BEGIN_SRC sh
|
||||
$ npm install -g tern
|
||||
#+END_SRC
|
||||
React layer uses the same backend defined in javascript layer. Options are =tern= and =lsp=.
|
||||
|
||||
To use the on-the-fly syntax checking, install =eslint= with babel and react
|
||||
support:
|
||||
|
@ -116,6 +111,13 @@ concatenations and contiguous function calls:
|
|||
#+end_src
|
||||
|
||||
* Key Bindings
|
||||
** rjsx-mode
|
||||
| Key Binding | Description |
|
||||
|---------------+----------------------------------------------------------------------------------|
|
||||
| ~<~ | inserts </> whenever it would start a new JSX node |
|
||||
| ~>~ | right before the slash in a self-closing tag automatically inserts a closing tag |
|
||||
| ~SPC m r r t~ | rename tag at point |
|
||||
|
||||
** Formatting (web-beautify)
|
||||
|
||||
| Key Binding | Description |
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
;;; config.el --- react Layer packages File for Spacemacs
|
||||
;;; config.el --- react layer config file for Spacemacs. -*- lexical-binding: t -*-
|
||||
;;
|
||||
;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
|
||||
;;
|
||||
|
@ -9,6 +9,4 @@
|
|||
;;
|
||||
;;; License: GPLv3
|
||||
|
||||
;; Variables
|
||||
|
||||
(spacemacs|define-jump-handlers react-mode)
|
||||
(spacemacs|define-jump-handlers rjsx-mode)
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
;;; funcs.el --- React Layer functions File for Spacemacs
|
||||
;;; funcs.el --- react layer funcs file for Spacemacs. -*- lexical-binding: t -*-
|
||||
;;
|
||||
;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
|
||||
;;
|
||||
|
@ -9,19 +9,86 @@
|
|||
;;
|
||||
;;; License: GPLv3
|
||||
|
||||
|
||||
;; react mode
|
||||
|
||||
(defun spacemacs//setup-react-mode ()
|
||||
"Adjust web-mode to accommodate react-mode"
|
||||
(defun spacemacs//setup-rjsx-mode ()
|
||||
"Adjust yas and emmet to accommodate rjsx-mode"
|
||||
(emmet-mode 0)
|
||||
;; See https://github.com/CestDiego/emmet-mode/commit/3f2904196e856d31b9c95794d2682c4c7365db23
|
||||
(setq-local emmet-expand-jsx-className? t)
|
||||
;; Enable js-mode snippets
|
||||
(yas-activate-extra-mode 'js-mode)
|
||||
;; Force jsx content type
|
||||
(web-mode-set-content-type "jsx")
|
||||
;; Don't auto-quote attribute values
|
||||
(setq-local web-mode-enable-auto-quoting nil)
|
||||
;; See https://github.com/syl20bnr/spacemacs/issues/8222
|
||||
(set (make-local-variable 'company-minimum-prefix-length) 2))
|
||||
|
||||
|
||||
;; Backend
|
||||
(defun spacemacs//react-setup-backend ()
|
||||
"Conditionally setup react backend."
|
||||
(pcase javascript-backend
|
||||
(`tern(spacemacs//react-setup-tern))
|
||||
(`lsp (spacemacs//react-setup-lsp))))
|
||||
|
||||
(defun spacemacs//react-setup-company ()
|
||||
"Conditionally setup company based on backend."
|
||||
(pcase javascript-backend
|
||||
(`tern (spacemacs//react-setup-tern-company))
|
||||
(`lsp (spacemacs//react-setup-lsp-company))))
|
||||
|
||||
|
||||
;; Tern
|
||||
(defun spacemacs//react-setup-tern ()
|
||||
"Setup tern backend."
|
||||
(tern-mode)
|
||||
(spacemacs//set-tern-key-bindings 'rjsx-mode))
|
||||
|
||||
(defun spacemacs//react-setup-tern-company ()
|
||||
"Setup tern auto-completion."
|
||||
(spacemacs|add-company-backends
|
||||
:backends company-tern
|
||||
:modes rjsx-mode
|
||||
:append-hooks nil
|
||||
:call-hooks t)
|
||||
(company-mode))
|
||||
|
||||
|
||||
;; LSP
|
||||
(defun spacemacs//react-setup-lsp ()
|
||||
"Setup lsp backend."
|
||||
(if (configuration-layer/layer-used-p 'lsp)
|
||||
(progn
|
||||
(lsp-javascript-typescript-enable)
|
||||
(lsp-javascript-flow-enable)
|
||||
(spacemacs//setup-lsp-jump-handler 'rjsx-mode))
|
||||
(message "`lsp' layer is not installed, please add `lsp' layer to your dofile.")))
|
||||
|
||||
(defun spacemacs//react-setup-lsp-company ()
|
||||
"Setup lsp auto-completion."
|
||||
(if (configuration-layer/layer-used-p 'lsp)
|
||||
(progn
|
||||
(fix-lsp-company-prefix)
|
||||
(spacemacs|add-company-backends
|
||||
:backends company-lsp
|
||||
:modes rjsx-mode
|
||||
:append-hooks nil
|
||||
:call-hooks t)
|
||||
(company-mode))
|
||||
(message "`lsp' layer is not installed, please add `lsp' layer to your dofile.")))
|
||||
|
||||
|
||||
;; Others
|
||||
(defun inside-string-q ()
|
||||
"Returns non-nil if inside string, else nil.
|
||||
Result depends on syntax table's string quote character."
|
||||
(let ((result (nth 3 (syntax-ppss))))
|
||||
result))
|
||||
|
||||
(defun inside-comment-q ()
|
||||
"Returns non-nil if inside comment, else nil.
|
||||
Result depends on syntax table's comment character."
|
||||
(let ((result (nth 4 (syntax-ppss))))
|
||||
result))
|
||||
|
||||
(defun inside-string-or-comment-q ()
|
||||
"Return non-nil if point is inside string, documentation string or a comment.
|
||||
If optional argument P is present, test this instead of point."
|
||||
(or (inside-string-q)
|
||||
(inside-comment-q)))
|
||||
|
|
|
@ -9,4 +9,4 @@
|
|||
;;
|
||||
;;; License: GPLv3
|
||||
|
||||
(configuration-layer/declare-layers '(html javascript))
|
||||
(configuration-layer/declare-layers '(javascript))
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
;;; packages.el --- react Layer packages File for Spacemacs
|
||||
;;; packages.el --- react layer packages file for Spacemacs. -*- lexical-binding: t -*-
|
||||
;;
|
||||
;; Copyright (c) 2012-2018 Sylvain Benner & Contributors
|
||||
;;
|
||||
|
@ -9,28 +9,31 @@
|
|||
;;
|
||||
;;; License: GPLv3
|
||||
|
||||
(setq react-packages
|
||||
'(
|
||||
company-tern
|
||||
emmet-mode
|
||||
evil-matchit
|
||||
flycheck
|
||||
js-doc
|
||||
smartparens
|
||||
tern
|
||||
web-beautify
|
||||
web-mode
|
||||
))
|
||||
(defconst react-packages
|
||||
'(
|
||||
add-node-modules-path
|
||||
company
|
||||
emmet-mode
|
||||
evil-matchit
|
||||
flycheck
|
||||
js-doc
|
||||
rjsx-mode
|
||||
smartparens
|
||||
web-beautify
|
||||
))
|
||||
|
||||
(defun react/post-init-company-tern ()
|
||||
(spacemacs|add-company-backends :backends company-tern :modes react-mode))
|
||||
(defun react/post-init-add-node-modules-path ()
|
||||
(add-hook 'rjsx-mode-hook #'add-node-modules-path))
|
||||
|
||||
(defun react/post-init-company ()
|
||||
(add-hook 'rjsx-mode-local-vars-hook #'spacemacs//react-setup-company))
|
||||
|
||||
(defun react/post-init-emmet-mode ()
|
||||
(add-hook 'react-mode-hook 'emmet-mode))
|
||||
(add-hook 'rjsx-mode-hook 'emmet-mode))
|
||||
|
||||
(defun react/post-init-evil-matchit ()
|
||||
(with-eval-after-load 'evil-matchit
|
||||
(plist-put evilmi-plugins 'react-mode
|
||||
(plist-put evilmi-plugins 'rjsx-mode
|
||||
'((evilmi-simple-get-tag evilmi-simple-jump)
|
||||
(evilmi-javascript-get-tag evilmi-javascript-jump)
|
||||
(evilmi-html-get-tag evilmi-html-jump)))))
|
||||
|
@ -38,31 +41,47 @@
|
|||
(defun react/post-init-flycheck ()
|
||||
(with-eval-after-load 'flycheck
|
||||
(dolist (checker '(javascript-eslint javascript-standard))
|
||||
(flycheck-add-mode checker 'react-mode)))
|
||||
(spacemacs/enable-flycheck 'react-mode))
|
||||
(flycheck-add-mode checker 'rjsx-mode)))
|
||||
(spacemacs/enable-flycheck 'rjsx-mode))
|
||||
|
||||
(defun react/post-init-js-doc ()
|
||||
(add-hook 'react-mode-hook 'spacemacs/js-doc-require)
|
||||
(spacemacs/js-doc-set-key-bindings 'react-mode))
|
||||
(add-hook 'rjsx-mode-hook 'spacemacs/js-doc-require)
|
||||
(spacemacs/js-doc-set-key-bindings 'rjsx-mode))
|
||||
|
||||
(defun react/init-rjsx-mode ()
|
||||
(use-package rjsx-mode
|
||||
:defer t
|
||||
:init
|
||||
;; enable rjsx mode by using magic-mode-alist
|
||||
(defun +javascript-jsx-file-p ()
|
||||
(and buffer-file-name
|
||||
(equal (file-name-extension buffer-file-name) "js")
|
||||
(re-search-forward "\\(^\\s-*import React\\|\\( from \\|require(\\)[\"']react\\)"
|
||||
magic-mode-regexp-match-limit t)
|
||||
(progn (goto-char (match-beginning 1))
|
||||
(not (inside-string-or-comment-q)))))
|
||||
|
||||
(push (cons #'+javascript-jsx-file-p 'rjsx-mode) magic-mode-alist)
|
||||
|
||||
;; setup rjsx backend
|
||||
(add-hook 'rjsx-mode-local-vars-hook #'spacemacs//react-setup-backend)
|
||||
|
||||
:config
|
||||
;; declare prefix
|
||||
(spacemacs/declare-prefix-for-mode 'rjsx-mode "mr" "refactor")
|
||||
(spacemacs/declare-prefix-for-mode 'rjsx-mode "mrr" "rename")
|
||||
(spacemacs/declare-prefix-for-mode 'rjsx-mode "mh" "documentation")
|
||||
(spacemacs/declare-prefix-for-mode 'rjsx-mode "mg" "goto")
|
||||
|
||||
(spacemacs/set-leader-keys-for-major-mode 'rjsx-mode "rrt" 'rjsx-rename-tag-at-point)
|
||||
|
||||
(with-eval-after-load 'rjsx-mode
|
||||
(define-key rjsx-mode-map (kbd "C-d") nil))))
|
||||
|
||||
(defun react/post-init-smartparens ()
|
||||
(if dotspacemacs-smartparens-strict-mode
|
||||
(add-hook 'react-mode-hook #'smartparens-strict-mode)
|
||||
(add-hook 'react-mode-hook #'smartparens-mode)))
|
||||
|
||||
(defun react/post-init-tern ()
|
||||
(add-hook 'react-mode-hook 'tern-mode)
|
||||
(spacemacs//set-tern-key-bindings 'react-mode))
|
||||
|
||||
(defun react/post-init-web-beautify ()
|
||||
(spacemacs/set-leader-keys-for-major-mode 'react-mode "=" 'web-beautify-js))
|
||||
|
||||
(defun react/post-init-web-mode ()
|
||||
(define-derived-mode react-mode web-mode "react")
|
||||
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . react-mode))
|
||||
(add-to-list 'auto-mode-alist '("\\.react.js\\'" . react-mode))
|
||||
(add-to-list 'auto-mode-alist '("\\index.android.js\\'" . react-mode))
|
||||
(add-to-list 'auto-mode-alist '("\\index.ios.js\\'" . react-mode))
|
||||
(add-to-list 'magic-mode-alist '("/\\*\\* @jsx .*\\*/" . react-mode))
|
||||
(add-to-list 'magic-mode-alist '("import\s+[^\s]+\s+from\s+['\"]react['\"]" . react-mode))
|
||||
(add-hook 'react-mode-hook 'spacemacs//setup-react-mode))
|
||||
|
|
|
@ -41,13 +41,7 @@
|
|||
"Setup lsp auto-completion."
|
||||
(if (configuration-layer/layer-used-p 'lsp)
|
||||
(progn
|
||||
;; fix lsp-javascript company prefix
|
||||
;; https://github.com/emacs-lsp/lsp-javascript/issues/9#issuecomment-379515379
|
||||
(defun lsp-prefix-company-transformer (candidates)
|
||||
(let ((completion-ignore-case t))
|
||||
(all-completions (company-grab-symbol) candidates)))
|
||||
(make-local-variable 'company-transformers)
|
||||
(add-to-list 'company-transformers 'lsp-prefix-company-transformer)
|
||||
(fix-lsp-company-prefix)
|
||||
(spacemacs|add-company-backends
|
||||
:backends company-lsp
|
||||
:modes js2-mode
|
||||
|
@ -116,4 +110,3 @@
|
|||
(spacemacs/skewer-eval-region beg end)
|
||||
(skewer-repl)
|
||||
(evil-insert-state))
|
||||
|
||||
|
|
|
@ -76,14 +76,7 @@
|
|||
"Setup lsp auto-completion."
|
||||
(if (configuration-layer/layer-used-p 'lsp)
|
||||
(progn
|
||||
;; fix lsp-typescript company prefix
|
||||
;; https://github.com/emacs-lsp/lsp-typescript/issues/9#issuecomment-379515379
|
||||
(defun lsp-prefix-company-transformer (candidates)
|
||||
(let ((completion-ignore-case t))
|
||||
(all-completions (company-grab-symbol) candidates)))
|
||||
(make-local-variable 'company-transformers)
|
||||
(add-to-list 'company-transformers 'lsp-prefix-company-transformer)
|
||||
|
||||
(fix-lsp-company-prefix)
|
||||
(spacemacs|add-company-backends
|
||||
:backends company-lsp
|
||||
:modes typescript-mode typescript-tsx-mode
|
||||
|
|
|
@ -36,3 +36,13 @@
|
|||
(dolist (m modes)
|
||||
(add-to-list (intern (format "spacemacs-jump-handlers-%S" m))
|
||||
'(lsp-ui-peek-find-definitions))))
|
||||
|
||||
(defun fix-lsp-company-prefix ()
|
||||
"fix lsp-javascript company prefix
|
||||
https://github.com/emacs-lsp/lsp-javascript/issues/9#issuecomment-379515379"
|
||||
(interactive)
|
||||
(defun lsp-prefix-company-transformer (candidates)
|
||||
(let ((completion-ignore-case t))
|
||||
(all-completions (company-grab-symbol) candidates)))
|
||||
(make-local-variable 'company-transformers)
|
||||
(add-to-list 'company-transformers 'lsp-prefix-company-transformer))
|
||||
|
|
Loading…
Reference in New Issue