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

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

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

这几天正好给前端的同学们弄了一个简单的配置,直接使用 prettier command line 格式化代码 (可以参考 spacemacsprettier 相关配置)。或者使用 husky 配置 git hookpre-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',
  },
};

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

作为专业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)就可以了。

我觉得这是两个事情:

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

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

有配置链接看一下吗?

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

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

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

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

我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都没什么问题

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

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

项目有用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里会使我写到一半的代码一发呆就自己变形了。

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

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

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

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

谢谢大佬,这个方法可行

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

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