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

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

[darknoll]

支持

[WhateverYouLike]

点赞，完全命中我的困扰

[robinlovemaggie]

当你熟读这些个格式规则烂熟于心并能做到兼收并蓄之后，你会发现你的项目进度已经接近 deadline ，而项目经理完全不屑你搞的这些劳什子。

[Haixiang]

@robinlovemaggie 所以我才把它们都总结起来，方便其它人可以在 ddl 前搞完项目

[EPr2hh6LADQWqRVH]

我进来是要喷规则的，LZ 你在规则上竟然不站队，太不男人了，shame on you.

我想说的是，prettier 懂个屁，已禁。

airbnb 规则蠢就算了，邪说还舔脸放出来，天灭 airbnb, 壮哉我大 Covid, 坐等你家倒闭。

最后一条，分号不是给编译器看的，是给程序员潜意识降低心智负担的，谁不写分号还拒绝归化的，立刻🔥

[connection]

@Haixiang 我的是 eslint 仅仅用来 check ，不使用它的 fix.

[kensoz]

期待 eslint-plugin-import 的配置，配置一次恶心一次

[steins2628]

写的真好 收藏收藏

[a1248499257]

prettier 格式化的时候某些地方会多一些 ;;; 有没有大佬遇到过🤔️

[Haixiang]

@kensoz

[Haixiang]

@kensoz 还有这玩意，我研究研究

[Haixiang]

@a1248499257 这倒是没有，可以给 eslint-plugin-prettier 提个 Issue

[Haixiang]

@kensoz 看了一下主要是支持 import/export 语法的吧，这个如果用 TS 的话，可以用 TypeScript 的 Parser 解决，如果写 JS 一般也可以用 Babel Parser 解决。

[a1248499257]

@Haixiang 老早之前就有人提了，open 了好几年没解决

[kensoz]

@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 的坑太多了

[Haixiang]

@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

[newbieRenew]

没那么多条条框框。统一用 standardJS, 保存后 ALE 后台自动执行格式化、Fix

[kensoz]

@Haixiang
给力老哥，我先研究一下，你这么一说我又想折腾折腾了

[kensoz]

@Haixiang
关于第四条，4."prettier"到底写在哪里
是因为有很多网上的教程不仅把 prettier 写到 plugins 里
还经常以 plugins/prettier... 的形式写到 extend 里，有点头大
在怀疑是不是和 prettier 版本有关

[Haixiang]

```
{
"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