这是一个创建于 1040 天前的主题，其中的信息可能已经有所发展或是发生改变。
最近在搞项目的基建，在配置 ESLint 和 Prettier 的时候感觉非常痛苦：NPM 的包太多了，而且名字又太像： eslint-plugin-prettier, eslint-prettier, eslint-config-prettier...
不仅配好了 ESLint 还要考虑 ESLint x TypeScript 结合，ESLint x LintStaged 结合等等一堆东西。受不了了，所以直接重新学习了一下前端 Linter 这块的内容，最后写了一份总结：
希望可以帮助前端 er 来理解这些概念。如何你看完这个教程后再看自己项目的 .eslintrc, .prettierrc 以及 package.json 里相关 NPM 包时，都能知道他们什么意思，那这个教程的目的就达到了。
因为网上对这些工具的介绍都比较简单，所以我能参考的资源也比较少，一般来自文档、Issue 和 Wiki ，所以如果你发现了错误，或者你有更好的配置方案，也可以提 Issue ，不要喷太重哈~ 小弟我已经尽力了。
这里依然有两个问题我没能解决：
- ESLint x Prettier 来 fix 代码时 prettier/prettier 的规则性能不太好，具体 Issue 可看这里
- lint-staged 如何才能用 tsc 来只做提交文件的类型检查，具体 Issue 可看这里
目前我翻看了网上一些文章和文档，都没找到更好的解决方案，小弟我已经尽力了。
 |
1
TomatoYuyuko 2022-01-18 15:40:59 +08:00
好东西 谢谢分享 以前每次从零开始做基建搞这玩意是真的痛苦，每次都得从头查
|
 |
2
defunct9 2022-01-18 15:44:14 +08:00
不错不错。
|
 |
3
wu67 2022-01-18 16:00:44 +08:00
其实还行吧. 设置 vsc 的快捷键用 prettier 格式化一下(我的是 vue 的, 不知道其他两大框架行不行), 然后设置 vsc 的保存动作 调 eslint 格式化当前文件, 这样就很快乐了.
|
 |
5
Haixiang OP @TomatoYuyuko 这些小工具是很蛋疼
|
 |
6
datian9966 2022-01-18 16:14:01 +08:00
写的真好，谢谢分享~ 前端的东西太多太复杂了且各自为战=。= 希望以后有机会能看到作者写的前端其他方面的这种小书
喜欢 Opinionated |
|
8
Haixiang OP @datian9966 thx 🤟
|
 |
9
shyling 2022-01-18 16:21:51 +08:00
呃，eslinit 有 --init 吧，没必要从 0 开始创建 .eslintrc 吧
|
 |
10
DrakeXiang 2022-01-18 16:24:38 +08:00
看完了，很清楚，不过我感觉下次建项目还是会忘。。
|
 |
11
Trim21 2022-01-18 16:28:29 +08:00
第二个问题的解决方法:
https://github.com/unlight/eslint-plugin-tsc "*.ts": "eslint --max-warnings=0 --plugin tsc --rule 'tsc/config: [2, {configFile: \"./tsconfig.json\"}]'", |
 |
12
makelove 2022-01-18 17:00:56 +08:00
linter 千万不要做格式相关事情，那个全交给 prettier 就行了，否则性能不好，开发体验也不好。
直接设置 vscode 保存时调 prettier 格式化是最优做法。 |
 |
13
lankunblue 2022-01-18 17:08:56 +08:00
@makelove linter 能格式化的东西可比 prettier 多。可以包含 prettier 的规则
|
|
14
Haixiang OP @makelove 我刚开始也是这么想的，不过 eslint x prettier 可在 IDE 里直接有提示自动修复还是挺好的，而且也能自动有报错提示，不跑 eslint --fix 其实还好~
|
|
15
Haixiang OP @Trim21 哦，把这玩意忘了，看 Issue 的时候是看过，当时看这 Github star 太少了，感觉不是很官方就给忘了，回头试试
|
 |
17
connection 2022-01-18 18:02:30 +08:00
eslint fix 能做的东西虽然更多，但是在我看来略带 “危险”
它可以静默更改约定的 eslint fix code 方法是插件实现的。 我的工作流是 save 的时候 prettier , pre-commit eslint 检测。 但是我如今配 vue 的时候，vue sfc 还是很难配。因为我期望是渐进式的，同时支持 vue3 + js 或者 vue3 + ts ，并且支持不同的 lint rules 。 但是我目前仍未有很好的解决方式。 |
 |
18
zhuangzhuang1988 2022-01-18 18:11:57 +08:00
放弃这些就好了.
|
|
19
Haixiang OP @connection 这里你说的 pre-commit eslint 检测是指不用 prettier 插件来 fix 么？但是如果这样的话，就用不了 prettier/prettier 规则了，在 IDE 不会报错诶
|
 |
20
wiirhan 2022-01-18 18:58:47 +08:00
🐂的
|
 |
21
darknoll 2022-01-18 19:06:44 +08:00
支持
|
 |
22
WhateverYouLike 2022-01-18 19:42:30 +08:00 via Android
点赞，完全命中我的困扰
|
 |
23
robinlovemaggie 2022-01-18 20:36:02 +08:00
当你熟读这些个格式规则烂熟于心并能做到兼收并蓄之后，你会发现你的项目进度已经接近 deadline ，而项目经理完全不屑你搞的这些劳什子。
|
|
24
Haixiang OP @robinlovemaggie 所以我才把它们都总结起来，方便其它人可以在 ddl 前搞完项目
|
 |
25
EPr2hh6LADQWqRVH 2022-01-18 20:51:39 +08:00
我进来是要喷规则的，LZ 你在规则上竟然不站队，太不男人了，shame on you.
我想说的是，prettier 懂个屁，已禁。 airbnb 规则蠢就算了，邪说还舔脸放出来，天灭 airbnb, 壮哉我大 Covid, 坐等你家倒闭。 最后一条，分号不是给编译器看的，是给程序员潜意识降低心智负担的，谁不写分号还拒绝归化的，立刻🔥 |
|
26
connection 2022-01-18 20:53:57 +08:00
@Haixiang 我的是 eslint 仅仅用来 check ，不使用它的 fix.
|
 |
27
kensoz 2022-01-19 07:56:31 +08:00
期待 eslint-plugin-import 的配置，配置一次恶心一次
|
 |
28
steins2628 2022-01-19 09:02:01 +08:00
写的真好 收藏收藏
|
 |
29
a1248499257 2022-01-19 09:23:54 +08:00
prettier 格式化的时候某些地方会多一些 ;;; 有没有大佬遇到过🤔️
|
|
32
Haixiang OP @a1248499257 这倒是没有，可以给 eslint-plugin-prettier 提个 Issue
|
|
33
Haixiang OP @kensoz 看了一下主要是支持 import/export 语法的吧，这个如果用 TS 的话，可以用 TypeScript 的 Parser 解决，如果写 JS 一般也可以用 Babel Parser 解决。
|
|
34
a1248499257 2022-01-19 11:19:16 +08:00
@Haixiang 老早之前就有人提了，open 了好几年没解决
|
|
35
kensoz 2022-01-19 11:55:57 +08:00
@Haixiang
是，就是检查 import/export ，貌似国内用的不多 一般的导入导出检查 ts 就可以了，适用于需要自定义的场合 下面这是我的 lint 全家福（ react 开发） "devDependencies": { "@typescript-eslint/eslint-plugin": "^5.9.1", "@typescript-eslint/parser": "^5.9.1", "eslint": "^8.6.0", "eslint-config-airbnb": "^19.0.4", "eslint-config-prettier": "^8.3.0", "eslint-plugin-html": "^6.2.0", "eslint-plugin-import": "^2.25.4", "eslint-plugin-jsx-a11y": "^6.5.1", "eslint-plugin-react": "^7.28.0", "eslint-plugin-react-hooks": "^4.3.0", "prettier": "^2.5.1" } 我现在有时间也会研究 lint ，目前有这么几个课题 1.react 开发只配置过 airbnb ，上面这套就是 airbnb 的常用配置，不知道 Google 和 Standard 是怎么配置 2.vue 开发纯复制粘贴老项目的，没用过 eslint init 3.extends 和 plugins 的区别 4."prettier"到底写在哪里 lint 的坑太多了 |
|
36
Haixiang OP  1
@kensoz 说下我自己的理解哈：
1. 这个应该查一下 eslint-config-google , eslint-config-standard ，然后 extends 一下就好了, eslint-config-xxx 就是 xxx 的规则集 2. vue 的规则比 react 感觉简单很多，eslint-plugin-vue 就搞定了，除了可以识别 .vue 文件，还有自己一些规则 3. extends 一般是 extends 规则，但是也可以作为一些配置“缩写”的方式，可以参考 eslint-config-prettier 的配置，plugins 一般是用来识别不同的框架、文件下缀的，比如 eslint-plugin-vue, eslint-plugin-react 。这里和 Parser 又是不一回事，像我们用到的 Parser ，eslint 本身就自带了一个 ES 的 Parser ，TypeScript 还有自己的 parser ，Babel 也有对应的 ESLint Parser 4. prettier 作为规则是要写成 'prettier/prettier': 'error' 如果你用 typescript 的 parser 来解析 TS 文件，其实 jsx, react, import/export, es6 这些语法都能通过 tsconfig.json 来配置识别，可以不需要重复的 esling-plugin-xxx |
 |
37
newbieRenew 2022-01-19 15:36:56 +08:00
没那么多条条框框。统一用 standardJS, 保存后 ALE 后台自动执行格式化、Fix
|
|
39
kensoz 2022-01-19 17:39:18 +08:00
@Haixiang
关于第四条，4."prettier"到底写在哪里 是因为有很多网上的教程不仅把 prettier 写到 plugins 里 还经常以 plugins/prettier... 的形式写到 extend 里，有点头大 在怀疑是不是和 prettier 版本有关 |
|
40
Haixiang OP ```
{ "extends": ["plugin:prettier/recommended"] } ``` 是下面的缩写 ``` { "extends": ["prettier"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", "arrow-body-style": "off", "prefer-arrow-callback": "off" } } ``` 大概就是总让人困惑的原因吧, https://github.com/prettier/eslint-plugin-prettier#recommended-configuration |
 |
41
xujiahui 2022-01-19 19:22:41 +08:00
厉害，第一次这么全的了解 lint ，不过我挺不喜欢用 eslint 的，语法问题现在的 IDE 都提示的挺好了，格式化代码用 prettier 是真香，但是挺多同事不知道这个，老项目也没法改
|
|
42
Haixiang OP @Haixiang 可以看看 https://github.com/prettier/eslint-plugin-prettier Github 的 Exactly what does plugin:prettier/recommended do? Well, this is what it expands to: 这里
|
|
44
xujiahui 2022-01-19 19:48:03 +08:00
@Haixiang 现在前端 IDE 基本就 WebStorm 和 VSCode 了吧，eslint 本身配置项太多太麻烦，有时候临时写的调试代码还会触发 error ，得用注释禁用 eslint ，就感觉挺烦的
|
 |
45
Ritr 2022-01-19 22:32:17 +08:00
有没有那种一键配置好的，真不想配这玩意，太费劲啦
|
|
46
Haixiang OP @Ritr 这也是我觉得很痛苦的一点，前端的工具除了要各自为战，还有一个原因是前端发展太快了，时不时出新东西，后面的工具就像打补丁一样，要么出 NPM 包，要么自身的 Issue 没解决完
|
 |
47
GeekJason 2022-01-20 15:42:01 +08:00
最近在设计前端团队协作规范，巧合看到了 OP 的帖子，非常有用，感谢分享
|
Select Language