1. 设置web-mode
1. JSX语法高亮
2. 缩进和其他
2. 实时eslint错误提示
1. 使用项目本地node_modules中的eslint
3. Prettier.js自动格式化
4. Emmet HTML标签扩展
5. 参考

一段时间以来, JSX和新的es6语法在emacs中的支持都不是很稳定, 但是很多包都做了大量工作. 如今, 在Emacs中使用JavaScript, React, ES6和Flow(或Typescript等)变得非常简单且强大.

以下配置可以在现代reactjs项目, 完全支持JSX, Flow类型, 实时eslint错误, 自动prettier.js格式化等工具.

设置web-mode

web-mode提供了大部分基础功能, 非常感谢维护者们.

安装web-mode:

M-x package-install RET web-mode RET

激活web-mode来编辑.js和.jsx文件:

(add-to-list 'auto-mode-alist '("\\.jsx?$" . web-mode)) ;; 自动启用.js/.jsx文件

web-mode支持Flow类型开箱即用, 所以不需要额外配置.

JSX语法高亮

要在.js/.jsx文件中启用JSX语法高亮, 请添加以下内容到你的emacs配置中:

(setq web-mode-content-types-alist '(("jsx" . "\\.js[x]?\\'")))

缩进和其他

在web-mode-init-hook中配置缩进和任何其他偏好设置:

(defun web-mode-init-hook ()
  "Web模式的钩子. 调整缩进. "
  (setq web-mode-markup-indent-offset 4))

(add-hook 'web-mode-hook  'web-mode-init-hook)

实时eslint错误提示

可以使用flycheck在当前缓冲区显示eslint错误.

安装flycheck-mode:

M-x package-install RET flycheck RET`

在下一个区块之前需要引入flycheck:

(require 'flycheck)

禁用默认的jslint:

(setq-default flycheck-disabled-checkers
              (append flycheck-disabled-checkers
                      '(javascript-jshint json-jsonlist)))

使用全局eslint

当web-mode激活时启用eslint检查器:

;; 为web-mode启用eslint检查器
(flycheck-add-mode 'javascript-eslint 'web-mode)
;; 全局启用flycheck
(add-hook 'after-init-hook #'global-flycheck-mode)

使用项目本地node_modules中的eslint

要使用项目本地的eslint和配置文件, 请使用以下方法:

安装add-node-modules-path:

M-x package-install RET add-node-modules-path RET

(add-hook 'flycheck-mode-hook 'add-node-modules-path)

Prettier.js自动格式化

你可以启用prettier.js在每次保存文件时自动格式化:

安装prettier-js-mode:

M-x package-install RET prettier-js-mode RET

安装add-node-modules-path, 这样你就不需要一个全局的prettier:

M-x package-install RET add-node-modules-path RET

为带有prettier的项目中的文件启用prettier-js-mode(这将使用项目的.prettierrc):

(defun web-mode-init-prettier-hook ()
  (add-node-modules-path)
  (prettier-js-mode))

(add-hook 'web-mode-hook  'web-mode-init-prettier-hook)

Emmet HTML标签扩展

如果你喜欢其他编辑器中的emmet模式, 你也可以在emacs中使用它:

安装emmet-mode:

M-x package-install RET emmet-mode RET

在web-mode中启用emmet-mode:

(add-hook 'web-mode-hook  'emmet-mode)

参考

参考别人github的链接