AlloyTeam / eslint-config-alloy

Progressive ESLint config for your React/Vue/TypeScript projects
https://alloyteam.github.io/eslint-config-alloy/
2.65k stars 317 forks source link

[feature] 考虑一个alloy版本兼容不同语言,比如vue2/vue3/typescript4/typescript5 #256

Closed eyea closed 8 months ago

eyea commented 9 months ago

有注意到 README.md 中提到,针对不同情况,使用不同的alloy版本。

因团队需要定制自己的一套eslint规范,最近也在学习 alloy 的 eslint 包的代码,尝试发包,灰常感谢开源~

但遇到种情况,现在的alloy版本,是直接支持vue3、ts5+的。团队有很多项目是vue2 ts4,也有react16 react18等项目。 我的想法是要让大家都是用一个eslint包,通过「搭积木」形式:比如:

{
  "plugins": [
    "@afuteam/fe"
  ],
  "extends": [
    "plugin:@afuteam/fe/js",
    "plugin:@afuteam/fe/vue2",
    "plugin:@afuteam/fe/typescript4",
  ],
  "parser": "vue-eslint-parser",
  "parserOptions": {
    "parser": {
      "js": "@babel/eslint-parser",
      "jsx": "@babel/eslint-parser",
      "ts": "@typescript-eslint/parser",
      "tsx": "@typescript-eslint/parser",
    },
  },
}

目前做法是下载alloy的3 4 5版本;然后对比下 config/rules的差异,不得不说,方法很笨,工作量比较大...

请问有什么好的建议么?

xcatliu commented 9 months ago

维护一个版本的 eslint 规范已经很麻烦了,你想维护多个肯定需要成倍的成本。 比如同一条 rule,在不同 eslint 版本或不同 plugin 版本中的配置会有一些差异,要把所有规则都定制好肯定很麻烦。 建议可以先选几个基础规则包,比如 alloy3、alloy4、alloy5,然后针对你想要定制的规则去做一些个性化的配置,不同团队分别覆盖比较好。

这样就只需要维护少量规则,适配它们在不同 eslint 版本下的配置即可。

搭积木的方式是可以的。

没必要对比 3 4 5 的 config/rules 差异,太麻烦了,只需要维护需要定制的规则,覆盖掉 3/4/5 中的规则即可。

eyea commented 9 months ago

感谢🚀速度的回复~

请问是否有答疑群,我翻了下源码和所有的issue,有个问题想请教下,先提出,有时间麻烦指点下~

我认为 alloy eslint 的规则维护逻辑是:

  1. config/rules/ 下有对应语言的规则,比如 vue.json
  2. 定期更新是通过 scripts/rulesCoverage.ts 来进行的:它通过读取 config/ 下的各个 rule,来判断哪些是 deprecatedRules 哪些是 activeRules;比较奇怪的是,它接下来 开始 「通过分析 test 目录下的文件,找出已废弃和可用的规则没有被使用」,再次更新 test 下对应的 rule

我的疑惑点是,config/rules 是通过 scripts/build.ts 来写入的,test/rules 是通过 scripts/rulesCoverage.ts 来更新...

而项目根目录的 react.js vue.js 等是通过 scripts/build.ts 自动生成的。

那么我手动定义维护的规则,应该在哪里配置?

xcatliu commented 9 months ago
  1. config/rules/ 下的内容是通过脚本 https://github.com/AlloyTeam/eslint-config-alloy/blob/master/scripts/build.ts#L192 生成的。真正维护规则的地方是 test/ 里的一个个 .eslintrc.js,正如「设计理念」里所说:「高度的自动化:先进的规则管理,测试即文档即网站
  2. 定期更新是通过 scripts/rulesCoverage.ts 来进行的。它读取的是 test/ 目录下的各个 rules,会自动更新 test 目录下的文件。

手动维护的规则就在 test/ 里

eyea commented 9 months ago
  1. config/rules/ 下的内容是通过脚本 https://github.com/AlloyTeam/eslint-config-alloy/blob/master/scripts/build.ts#L192 生成的。真正维护规则的地方是 test/ 里的一个个 .eslintrc.js,正如「设计理念」里所说:「高度的自动化:先进的规则管理,测试即文档即网站
  2. 定期更新是通过 scripts/rulesCoverage.ts 来进行的。它读取的是 test/ 目录下的各个 rules,会自动更新 test 目录下的文件。

手动维护的规则就在 test/ 里

好的,谢谢您 🌹