写了一份前端 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 可看这里

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

[xujiahui]

厉害，第一次这么全的了解 lint ，不过我挺不喜欢用 eslint 的，语法问题现在的 IDE 都提示的挺好了，格式化代码用 prettier 是真香，但是挺多同事不知道这个，老项目也没法改

[Haixiang]

@Haixiang 可以看看 https://github.com/prettier/eslint-plugin-prettier Github 的 Exactly what does plugin:prettier/recommended do? Well, this is what it expands to: 这里

[Haixiang]

@xujiahui eslint 主要还是团队内一些规则约定吧，不能保证所有人的 IDE 都能这么智能地提示

[xujiahui]

@Haixiang 现在前端 IDE 基本就 WebStorm 和 VSCode 了吧，eslint 本身配置项太多太麻烦，有时候临时写的调试代码还会触发 error ，得用注释禁用 eslint ，就感觉挺烦的

[Ritr]

有没有那种一键配置好的，真不想配这玩意，太费劲啦

[Haixiang]

@Ritr 这也是我觉得很痛苦的一点，前端的工具除了要各自为战，还有一个原因是前端发展太快了，时不时出新东西，后面的工具就像打补丁一样，要么出 NPM 包，要么自身的 Issue 没解决完

[GeekJason]

最近在设计前端团队协作规范，巧合看到了 OP 的帖子，非常有用，感谢分享

[Haixiang]

@GeekJason 🤟