React JSX，应如何配置Emacs

最近在使用JSX编程，发现之前的Emacs设置，不能使 js中的 jsx 语法高亮，所以添加了JSX识别设置，代码的各部分均有详细注释，可根据需要将其添加到您的.emacs：

(when (>= emacs-major-version 24)
  (require 'package)
  (add-to-list
   'package-archives
   '("melpa" . "http://melpa.org/packages/")
   t)
  (package-initialize))

;;;
(add-to-list 'load-path "~/.emacs.d/lisp")

(set-terminal-coding-system 'utf-8)
(set-keyboard-coding-system 'utf-8)
(prefer-coding-system 'utf-8)
(set-buffer-file-coding-system 'utf-8)
;;;(set-buffer-process-coding-system 'utf-8)

;; 80列
(setq default-fill-column 80)
;; 显示列号
(setq column-number-mode t)

;;(ns-toggle-fullscreen)
(display-time)

;;; set default font , 16 is size
(set-default-font  "-*-Menlo-normal-normal-normal-*-16-*-*-*-m-0-iso10646-1")

(require 'whitespace)
 (setq whitespace-style '(face empty tabs lines-tail trailing))
 (global-whitespace-mode t)

;;
;;(setq load-path (cons (expand-file-name "~/.emacs.d") load-path))
;;(load-file "~/.emacs.d/color-theme.el")
(require 'color-theme)
(color-theme-initialize)
(color-theme-dark-laptop)

(setq-default indent-tabs-mode nil)
(setq-default tab-width 2)

(require 'web-mode)
(add-to-list 'auto-mode-alist '("\\.phtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.tpl\\.php\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.[agj]sp\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.as[cp]x\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.erb\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.mustache\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.djhtml\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.html?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.api\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.css\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.js[x]?\\'" . web-mode))
(add-to-list 'auto-mode-alist '("\\.json\\'" . web-mode))

(ac-config-default)


;; use web-mode for .jsx files
(add-to-list 'auto-mode-alist '("\\.jsx$" . web-mode))

;; http://www.flycheck.org/manual/latest/index.html
(require 'flycheck)

;; turn on flychecking globally
(add-hook 'after-init-hook #'global-flycheck-mode)

;; disable jshint since we prefer eslint checking
(setq-default flycheck-disabled-checkers
  (append flycheck-disabled-checkers
    '(javascript-jshint)))

;; use eslint with web-mode for jsx files
(flycheck-add-mode 'javascript-eslint 'web-mode)

;; customize flycheck temp file prefix
(setq-default flycheck-temp-prefix ".flycheck")

;; disable json-jsonlist checking for json files
(setq-default flycheck-disabled-checkers
  (append flycheck-disabled-checkers
    '(json-jsonlist)))

;; adjust indents for web-mode to 2 spaces
(defun my-web-mode-hook ()
  "Hooks for Web mode. Adjust indents"
  ;;; http://web-mode.org/
  (setq web-mode-markup-indent-offset 2)
  (setq web-mode-css-indent-offset 2)
  (setq web-mode-code-indent-offset 2))
(add-hook 'web-mode-hook  'my-web-mode-hook)


;; for better jsx syntax-highlighting in web-mode
;; - courtesy of Patrick @halbtuerke
(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))

;; https://github.com/purcell/exec-path-from-shell
;; only need exec-path-from-shell on OSX
;; this hopefully sets up path and other vars better
(when (memq window-system '(mac ns))
  (exec-path-from-shell-initialize))

(add-hook 'web-mode-hook
      (lambda ()
        ;; short circuit js mode and just do everything in jsx-mode
        (if (equal web-mode-content-type "javascript")
            (web-mode-set-content-type "jsx")
          (message "now set to: %s" web-mode-content-type))))

并安装如下库文件：
1.打开 emasc 运行如下命令：

M-x list-packages

2.找到要安装的文件，按下 i 进行标记，x键进行安装

• flycheck - modern lint runner which has support for 30 programming languages with more than 60 different syntax checking tools. Replaces flymake. This will run our eslint command in background for us.
• web-mode - mode which can handle mixed js and html like jsx
• js2-mode - nice js editing mode which recognizes modern ES6+ features
• json-mode - upgraded json mode (optional)
• exec-path-from-shell - updates emacs exec path from your shell (optional) On OS X, when I was having issues getting emacs exec path setup correctly I installed this and it fixed my issues. I did not need it on other OS’s so I only run it conditionally. See below.

我只是代码的搬运工，以上代码主要为以下来源：
http://codewinds.com/blog/2015-04-02-emacs-flycheck-eslint-jsx.html
http://emacs.stackexchange.com/questions/20016/no-html-jsx-indentation-in-jsx-mode/20176