写了一份前端 Linter 的总结教程

[Haixiang]

最近在搞项目的基建，在配置 ESLint 和 Prettier 的时候感觉非常痛苦：NPM 的包太多了，而且名字又太像： eslint-plugin-prettier, eslint-prettier, eslint-config-prettier...

不仅配好了 ESLint 还要考虑 ESLint x TypeScript 结合，ESLint x LintStaged 结合等等一堆东西。受不了了，所以直接重新学习了一下前端 Linter 这块的内容，最后写了一份总结：

上手教程网站

Github

希望可以帮助前端 er 来理解这些概念。如何你看完这个教程后再看自己项目的 .eslintrc, .prettierrc 以及 package.json 里相关 NPM 包时，都能知道他们什么意思，那这个教程的目的就达到了。

因为网上对这些工具的介绍都比较简单，所以我能参考的资源也比较少，一般来自文档、Issue 和 Wiki ，所以如果你发现了错误，或者你有更好的配置方案，也可以提 Issue ，不要喷太重哈~ 小弟我已经尽力了。

这里依然有两个问题我没能解决：

• ESLint x Prettier 来 fix 代码时 prettier/prettier 的规则性能不太好，具体 Issue 可看这里
• lint-staged 如何才能用 tsc 来只做提交文件的类型检查，具体 Issue 可看这里

目前我翻看了网上一些文章和文档，都没找到更好的解决方案，小弟我已经尽力了。

[TomatoYuyuko]

好东西 谢谢分享 以前每次从零开始做基建搞这玩意是真的痛苦，每次都得从头查

[defunct9]

不错不错。

[wu67]

其实还行吧. 设置 vsc 的快捷键用 prettier 格式化一下(我的是 vue 的, 不知道其他两大框架行不行), 然后设置 vsc 的保存动作 调 eslint 格式化当前文件, 这样就很快乐了.

[Haixiang]

@defunct9 👍

[Haixiang]

@TomatoYuyuko 这些小工具是很蛋疼

[datian9966]

写的真好，谢谢分享~ 前端的东西太多太复杂了且各自为战=。= 希望以后有机会能看到作者写的前端其他方面的这种小书
喜欢 Opinionated

[Haixiang]

@wu67 现在的 IDE 和 vscode 都集成得很好了，这里主要是梳理一下这些工具之间的关系~

[Haixiang]

@datian9966 thx 🤟

[shyling]

呃，eslinit 有 --init 吧，没必要从 0 开始创建 .eslintrc 吧

[DrakeXiang]

看完了，很清楚，不过我感觉下次建项目还是会忘。。

[Trim21]

第二个问题的解决方法:

https://github.com/unlight/eslint-plugin-tsc

"*.ts": "eslint --max-warnings=0 --plugin tsc --rule 'tsc/config: [2, {configFile: \"./tsconfig.json\"}]'",

[makelove]

linter 千万不要做格式相关事情，那个全交给 prettier 就行了，否则性能不好，开发体验也不好。
直接设置 vscode 保存时调 prettier 格式化是最优做法。

[lankunblue]

@makelove linter 能格式化的东西可比 prettier 多。可以包含 prettier 的规则

[Haixiang]

@makelove 我刚开始也是这么想的，不过 eslint x prettier 可在 IDE 里直接有提示自动修复还是挺好的，而且也能自动有报错提示，不跑 eslint --fix 其实还好~

[Haixiang]

@Trim21 哦，把这玩意忘了，看 Issue 的时候是看过，当时看这 Github star 太少了，感觉不是很官方就给忘了，回头试试

[Haixiang]

@shyling 是的，这些配置都可以用 --init 来初始化，这里主要是不想写太多干扰项~以及方便引出后续~

[connection]

eslint fix 能做的东西虽然更多，但是在我看来略带 “危险”
它可以静默更改约定的 eslint fix code 方法是插件实现的。

我的工作流是 save 的时候 prettier , pre-commit eslint 检测。

但是我如今配 vue 的时候，vue sfc 还是很难配。因为我期望是渐进式的，同时支持 vue3 + js 或者 vue3 + ts ，并且支持不同的 lint rules 。
但是我目前仍未有很好的解决方式。

[zhuangzhuang1988]

放弃这些就好了.

[Haixiang]

@connection 这里你说的 pre-commit eslint 检测是指不用 prettier 插件来 fix 么？但是如果这样的话，就用不了 prettier/prettier 规则了，在 IDE 不会报错诶

[wiirhan]

🐂的