spec icon indicating copy to clipboard operation
spec copied to clipboard

Eslint默认的配置不考虑加入prettier的配置吗

Open ananiy opened this issue 3 years ago • 17 comments

$ yarn add eslint-plugin-prettier eslint-config-prettier -D
const { getESLintConfig } = require('@iceworks/spec');

module.exports = getESLintConfig('react-ts', {
  extends: ['plugin:prettier/recommended'],
});

这样可以检测到哪些代码的格式化是有问题的, 并在vsc报红, 并且可以通过eslint修复

ananiy avatar Apr 21 '21 07:04 ananiy

感谢反馈。
这个问题 和 eslint-config-ali 维护团队之前有讨论过,目前底层的阿里前端规约中已经包含代码风格的一些约束,配置比 prettier 的维度更多一些,所以默认没有集成这个插件

fyangstudio avatar Apr 22 '21 03:04 fyangstudio

感谢反馈。 这个问题 和 eslint-config-ali 维护团队之前有讨论过,目前底层的阿里前端规约中已经包含代码风格的一些约束,配置比 prettier 的维度更多一些,所以默认没有集成这个插件

没有感觉到有约束, 如果我写如下代码

const a = 123        ;

123和分号中间的空格是不会提示有问题的 = =

eslint 和 prettier 的比较参考: https://prettier.io/docs/en/comparison.html

ananiy avatar Apr 22 '21 09:04 ananiy

image

有安装 VSCode ESLint 的插件吗?

fyangstudio avatar Apr 23 '21 02:04 fyangstudio

好吧 这个确实是我的失误 之前社区的一些config没有添加类似的rule, 让我先入为主了, 抱歉抱歉

不过我还是坚持我的观点, 格式化的事情就交给格式化工具去做, 既然提供了prettier的配置, eslint配置就应该使用prettier的配置去检测代码的格式问题

ananiy avatar Apr 23 '21 02:04 ananiy

同意这个观点。 目前我们的考虑是格式也是代码规范的一部分,eslint-config-ali 演进了多个版本和讨论确定当前代码格式的规则。

同时我们也提供了 prettier 的配置 方便使用 prettier 的同学能有相关引用。

欢迎更多的讨论 👍

fyangstudio avatar Apr 23 '21 03:04 fyangstudio

提供参考:

https://prettier.io/docs/en/integrating-with-linters.html https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

ananiy avatar Apr 23 '21 08:04 ananiy

image

如果加了 prettier 配置的话, 这里的代码格式错误是会提示, 但是eslint 是没有错误的.

GentleSen avatar Apr 23 '21 09:04 GentleSen

有了 prettier 确实会有更好的可读性,在 ESLint 中会更简单易用,这点十分认可。

通过 spec 最佳实践部分是可以承载这部分能力。

fyangstudio avatar Apr 26 '21 11:04 fyangstudio

当前测试版本 @iceworks/[email protected]

fyangstudio avatar Apr 27 '21 07:04 fyangstudio

结论:不在 spec 配置中加入 prettier。
ESLint 可覆盖约 90% 的格式问题,推荐仅使用 ESLint 。

spec 和 模板工程后续弱化 prettier 的概念

fyangstudio avatar May 12 '21 02:05 fyangstudio

@fyangstudio 需要把过程中的讨论和思考同步出来

imsobear avatar May 12 '21 02:05 imsobear

我有了新的视角

项目中不仅只有js代码

还有html, css, json等文件

这些文件的代码风格也是需要保证一致的

所以我认为 一致的的prettier配置是需要的

让lint专门做语法的错误检查

prettier做代码风格的检查

而不是统一交给eslint

ananiy avatar Jun 02 '21 03:06 ananiy

@fyangstudio 麻烦看下 😂

ananiy avatar Jun 02 '21 03:06 ananiy

image 像这样的代码eslint检测是完全没问题的 但是prettier会格式化成统一的样式

ananiy avatar Dec 02 '21 01:12 ananiy

请问最后的结论是弱化 prettier 的概念吗?那为啥有一个Feat(https://github.com/ice-lab/spec/pull/54)?

zangguojun avatar Nov 13 '22 06:11 zangguojun

image 像这样的代码eslint检测是完全没问题的 但是prettier会格式化成统一的样式

我理解的是这样的,引入eslint-plugin-prettier eslint-config-prettier到副作用在于,使得prettier的校验规则 > eslint校验规则,我们在最佳实践里面规定了如此多的eslint规则(https://github.com/ice-lab/spec/tree/master/packages/eslint-plugin-best-practices) ,如果引入了上述插件,那么会导致原本的eslint规则失效。 所以,综上所述,我的态度更坚决一些,spec就不应该有prettier的功能,因为这样会使得,原本规范的eslint,变得不规范,除非有一套与之对应(不冲突)的prettier规则来约束。最终使得prettier无法约束的行为由eslint约束,两者都能约束的地方由prettier约束

zangguojun avatar Nov 13 '22 07:11 zangguojun

虽说 eslint 专注错误,prettier 专注风格,但现实是 eslint 和 prettier 的边界不太好把控,比如语句末尾加分号、每行最大代码数、缩进。我记得他们都有,这就会造成 rules 的冲突,某些规则开发者要考虑两处配置,实在太痛了,事实上,类似的规则不止这些,给配置成本带来了很大的负担。

我的观点是只使用 eslint,因为 prettier 很多规则 eslint 都包含了。

补充资料:https://antfu.me/posts/why-not-prettier

yuzhanglong avatar Jan 17 '23 09:01 yuzhanglong