React (JSX and ES6 ready) contribution layer
This commit is contained in:
Andrea Moretti
syl20bnr
parent
a6cd304d62
commit
b4c6bf3aaa
|
|
@ -0,0 +1,75 @@
|
|||
* 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]]
|
||||
- [[#todo-install][TODO Install]]
|
||||
- [[#optional-configuration][Optional Configuration]]
|
||||
|
||||
** 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
|
||||
|
||||
** 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]]
|
||||
|
||||
** 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
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
|
|
@ -0,0 +1,68 @@
|
|||
;;; packages.el --- react Layer packages File for Spacemacs
|
||||
;;
|
||||
;; Copyright (c) 2012-2015 Sylvain Benner
|
||||
;; Copyright (c) 2014-2015 Andrea Moretti & Contributors
|
||||
;;
|
||||
;; Author: Andrea Moretti <axyzxp@gmail.com>
|
||||
;; URL: https://github.com/axyz
|
||||
;;
|
||||
;; This file is not part of GNU Emacs.
|
||||
;;
|
||||
;;; License: GPLv3
|
||||
|
||||
;; List of all packages to install and/or initialize. Built-in packages
|
||||
;; which require an initialization must be listed explicitly in the list.
|
||||
(setq react-packages
|
||||
'(
|
||||
web-mode
|
||||
js2-mode
|
||||
flycheck
|
||||
tern-mode
|
||||
))
|
||||
|
||||
;; List of packages to exclude.
|
||||
(setq react-excluded-packages '())
|
||||
|
||||
;; For each package, define a function react/init-<package-name>
|
||||
;;
|
||||
(defun react/post-init-flycheck ()
|
||||
(with-eval-after-load 'flycheck
|
||||
;; use eslint with web-mode for jsx files
|
||||
(flycheck-add-mode 'javascript-eslint 'web-mode)
|
||||
(flycheck-add-mode 'javascript-eslint 'js2-mode)
|
||||
;; (setq flycheck-check-syntax-automatically '(save new-line mode-enabled))
|
||||
|
||||
;; disable jshint since we prefer eslint checking
|
||||
(setq-default flycheck-disabled-checkers
|
||||
(append flycheck-disabled-checkers
|
||||
'(javascript-jshint)))
|
||||
|
||||
;; disable json-jsonlist checking for json files
|
||||
(setq-default flycheck-disabled-checkers
|
||||
(append flycheck-disabled-checkers
|
||||
'(json-jsonlist)))))
|
||||
|
||||
(defun react/post-init-web-mode ()
|
||||
(add-to-list 'auto-mode-alist '("\\.jsx\\'" . web-mode))
|
||||
(add-to-list 'auto-mode-alist '("\\.react.js\\'" . web-mode))
|
||||
|
||||
(add-hook 'web-mode-hook
|
||||
(lambda ()
|
||||
(when (or (equal web-mode-content-type "jsx")
|
||||
(equal web-mode-content-type "javascript"))
|
||||
(web-mode-set-content-type "jsx")
|
||||
(add-to-list 'company-backends 'company-tern)
|
||||
(js2-minor-mode)
|
||||
(tern-mode))))
|
||||
|
||||
(with-eval-after-load 'web-mode
|
||||
(defadvice web-mode-highlight-part (around tweak-jsx activate)
|
||||
(if (equal web-mode-content-type "jsx")
|
||||
(let ((web-mode-enable-part-face nil))
|
||||
ad-do-it)
|
||||
ad-do-it))))
|
||||
|
||||
;;
|
||||
;; Often the body of an initialize function uses `use-package'
|
||||
;; For more info on `use-package', see readme:
|
||||
;; https://github.com/jwiegley/use-package
|
||||
Loading…
Reference in New Issue