求一套eslint+格式化代码的配置

Emacs-general
1

我想用emacs做前端开发，如何配置eslint检查，并且格式化当前项目的代码呢？ prettier支持emacs吗？好像看起来都没有再维护了 prettier-emacs了

2

Eslint 走 flycheck / flymake 就好了 Prettier 应该是没有办法了

3

这几天正好给前端的同学们弄了一个简单的配置，直接使用 prettier command line 格式化代码 (可以参考 spacemacs 的 prettier 相关配置）。或者使用 husky 配置 git hook，pre-commit 自动 format

简单一点的配置的话, .eslintrc.js如下

module.exports = {
  parser: 'vue-eslint-parser',
  root: true,
  env: {
    node: true,
    browser: true,
    es6: true,
    jquery: true,
  },
  extends: [
    'plugin:vue/recommended',
    'eslint:recommended',
    'prettier/vue',
    'plugin:prettier/recommended',
  ],
  rules: {
    'vue/component-name-in-template-casing': ['error', 'PascalCase'],
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
  },
  globals: {
    $nuxt: true,
  },
  parserOptions: {
    parser: 'babel-eslint',
  },
};
4

看一下eslint命令行，有 -y 选项，直接把小的coding style问题给修正了。在after-save-hook调用命令行就可以了。

5

作为专业javascript程序员我不太认同vscode这种推荐一堆eslint插件的做法。webpack，eslint-loader等工具可以在build script和webpack live server解决。功能强大得多。也容易和CI整合。比传统的IDE方式更高效和易用。

一些小的语法风格问题(如运算符左右应有空格），没必要强迫程序员自己在IDE或者编辑器里去修正。爱怎么写怎么写。让webpack的各种loader自动修复小的语法风格问题就可以了。这样也摆脱了对特定编辑器语法检查插件的问题，程序员想用什么编辑器就用什么编辑器。就是nano也可以。

Emacs里我一般用几个主流的mode (js-mode, js2-mode, typescript-mode, lsp-mode, web-mode, rjsx-mode)就可以了。

6

我觉得这是两个事情：

把 Eslint 放在 git commit 之前，是为了「工程化」或者团队配合的问题。而在使用了 Eslint 之后，通过 flycheck / flymake 集成展示 eslint 发现的问题是可以在编码的环节就展示出代码的问题，而且还有一些 error / warning 是 eslint 无法自动 fix 的。

至于在 emacs 里显式使用 Prettier 格式化，我觉得也不太有意义。

7

有配置链接看一下吗？

8

eslint-loader后还可以用babel-loader，通过babel插件支持新语法并再做一次语法检查。我觉得比在编辑器中使用特定版本的eslint插件灵活。

而且你可以针对特定项目写babel插件（不需要发布到npmjs，一个单独的js文件作为参数传给babel就可以，这样你可以在babel语法解析时做特殊的检查或者插入额外的代码）。

9

babel里写不太好吧，写在webpack里面其他成员不一定需要这个loader

10

eslint-loader和babel-loader同时使用是流行做法。Babel官方给你写插件的自由，可以用来解决项目的特殊需要。不用babel则不需要babel-loader。

11

我flycheck配置了eslint，jshint，格式化js代码都是用tab，感觉没必要用prettier，不过我配置了在保存时自动格式化json文件，在format-all-mode中配置了Prettier，提示我’’’ prettier requires at least version 10.13.0 of Node, please upgrade‘’’，最近把node升级了，再来启用format-all-mode，Prettier正常工作，格式化json和js都没什么问题

12

lsp mode不就有检查和格式化的功能吗？我一直用，没遇到什么问题

13

我windows系统，lsp-mode很卡，还有好多其它问题，折腾一下放弃了，现在补全用 manateelazycat 的 nox 也是lsp

14

项目有用prettier，我是手动调prettier命令来format，同时开着auto-revert-mode，文件被更改会同步到当前buffer。

(defun jester/prettier-js-file-1 ()
  "Call prettier on current file."
  (interactive)
  (call-process-shell-command (format "node %s/node_modules/.bin/prettier --write %s"
                                      (projectile-project-root)
                                      (buffer-file-name))))

(define-key js2-mode-map (kbd "C-c C-p") 'jester/prettier-js-file-1)

遗憾的是在我【idle1秒自动保存】的前提下，prettier只能手动调用，因为加到save hook里会使我写到一半的代码一发呆就自己变形了。

15

你这个配置能读取到 .prettierrc的配置文件吗？

16

仔细看，我这是调用当前项目的node_modules/.bin/prettier这个shell command，当然会respect项目里的.prettierrc 说错了，这么跑是防止全局装的prettier版本不对，至于.prettierrc，怎么跑prettier它都自己会去看的

17

我不太会lisp，能发个完整的配置看一下嘛，谢谢

18

就上面发的这段代码，我又把define-key写全了，这里用了projectile，你需要额外装一下这个package。至于怎么装，可以很容易搜到，我不能直接发，因为我用了use-package，你要抄的话要先装个use-package。。

19

谢谢大佬，这个方法可行

20

lisp不会写的话，还是推荐spacemacs吧

配置一下， 保存的时候自动格式化，省心省力