最近在搞项目的基建,在配置 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 ,不要喷太重哈~ 小弟我已经尽力了。
这里依然有两个问题我没能解决:
目前我翻看了网上一些文章和文档,都没找到更好的解决方案,小弟我已经尽力了。
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 @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 的帖子,非常有用,感谢分享
|