简谈提高团队代码质量的利器:ESLint 与 Prettier

标签: 团队 代码 质量 | 发表时间:2022-11-21 19:18 | 作者:天行无忌
出处:https://juejin.cn/frontend

每个开发人员都有独特的代码编写风格和不同的文本编辑器。在团队项目开发过程,不能强迫每个团队成员都写一样的代码风格。

可能会看到以下部分(或全部)内容:

  • 缺少分号;
  • 有单引号、双引号,风格不一致;
  • 一些行之间有大量的空格,而其他行之间没有空格;
  • 在使向右滚动多年以查看其中包含的所有内容的行上运行;
  • 看似随意的缩进;
  • 注释掉代码块;
  • 初始化但未使用的变量;
  • 一些使用“严格”JS 的文件和其他不使用的文件;
  • 代码块在任何地方都没有空格或注释,这使得阅读它们和破译正在发生的事情变得更加困难。

那么如何解决同一项目中有太多不同编码风格的问题?希望实现相同的编码风格,避免团队成员之间的许多警告;有 2 个非常简单的利器:ESLint 和 Prettier。

在 Visual Studio Code 中、安装插件 Prettier 和 ESLint 的帮助下消除一群不同开发人员的代码不一致,为开发团队提供一套整洁、统一的代码格式化。

ESLint

image.png

ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析,常用于寻找有问题的模式或者代码,并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查,一般来说编译程序会内置检查工具。

ESLint 非常适合希望开发团队遵守的更具体、更通用的代码样式。除非专门设置它,否则 ESLint 不会自动修复或重写项目的代码,但它会以一种直接的方式让你知道有“规则”被打破了(不符合)。

这里分享一个 VUE 项目的规则:

  {
    indent: ["off", 2],
    quotes: [0, "single"],
    "no-mixed-spaces-and-tabs": [2, false], // 禁止混用tab和空格
    "generator-star-spacing": "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "space-before-function-paren": "off",
    "no-var": "off", // 使用let和const代替var
    "no-new-func": "error", // 不允许使用new Function
    camelcase: [0, { properties: "never" }],
    "comma-dangle": ["error", "only-multiline"],
    semi: [2, "always"], // 语句强制分号结尾
    "prettier/prettier": [
        "off",
        {
            singleQuote: false,
            semi: false,
            trailingComma: "none",
            bracketSpacing: true,
            jsxBracketSameLine: true,
        },
    ],
}

Prettier

image.png

一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。可以为项目定义一下规则:

  • 将所有单引号更改为双引号,
  • 添加缺少的分号,
  • 在大括号或方括号和变量之间放置空格,
  • 设置标准标签宽度。

上面只是 Prettier 规则的很小部分,在 VS Code 中,可以很容易覆盖任何你不喜欢的规则。

Prettier 是为了保持代码格式一致的 VS Code 插件,它可以 .prettierrc 在项目中有或没有文件的情况下工作(尽管这对于在代码库上工作的开发团队来说可能是一个很好的建议)。它将使项目的代码保持干净和易于阅读,并且在团队中的所有开发人员中都一样。

ESLint 与 Prettier

  • ESlint 不仅仅是一个代码格式化程序,它还可以帮助开发人员发现编码错误。例如,如果在没有声明的情况下使用变量,ESLint 会给你一个警告。Prettier 没有这样的能力。
  • ESLint 会让开发人员知道代码格式有什么问题,并为其提供解决问题的选项。然后可以从这些选项中选择一个。另一方面,Prettier 根本不关心你。它只是将所有代码格式化为不同的结构格式。
  • Prettier 中的整个重写过程可以防止开发人员犯任何错误。
  • max-lenno-mixed-spaces-and-tabskeyword-spacingcomma-style 是 Prettier 中一些流行的格式规则。
  • 除了上述类型的规则,ESLint 还考虑了代码质量规则,例如 no-unused-varsno-extra-bindno-implicit-globalsprefer-promise-reject-errors

总的来说,这些方法似乎相互补充,同时也有一些相似之处。合理使用 ESLint 与 Prettier 可以提升团队合作的代码的质量,借助工具来提升团队的代码质量。

本文正在参加 「金石计划 . 瓜分6万现金大奖」 ”

相关 [团队 代码 质量] 推荐:

简谈提高团队代码质量的利器:ESLint 与 Prettier

- - 掘金 前端
每个开发人员都有独特的代码编写风格和不同的文本编辑器. 在团队项目开发过程,不能强迫每个团队成员都写一样的代码风格. 可能会看到以下部分(或全部)内容:. 有单引号、双引号,风格不一致;. 一些行之间有大量的空格,而其他行之间没有空格;. 在使向右滚动多年以查看其中包含的所有内容的行上运行;. 一些使用“严格”JS 的文件和其他不使用的文件;.

外包“代码质量及规范审查”是否是个好主意?葡萄牙SaaS创业团队Codacy对外开放“自动代码审查服务”

- - 36氪 | 关注互联网创业
对软件开发者来说,代码审查(Code Review)并不陌生,它是软件开发中不可少的环节,能帮助开发者及时发现代码中的bug,提升软件运行质量,主要包括 代码质量、 语法规范、 功能可用性方面的检查. 代码质量和规范审查一般由团队协作完成,便于后续改进、统一编程风格,市面上已有不少 基于web的协作型开源代码审查工具,比如Review Board、CodeStriker、Groogle、Rietveld等.

使用 JSLint 保证 JavaScript 代码质量

- zhibin - IBM developerWorks 中国 : Web development : Articles,Tutorials
随着富 Web 前端应用的出现,开发人员不得不重新审视并重视 JavaScript 语言的能力和使用,抛弃过去那种只靠“复制 / 粘贴”常用脚本完成简单前端任务的模式. JavaScript 语言本身是一种弱类型脚本语言,具有相对于 C++ 或 Java 语言更为松散的限制,一切以函数为中心的函数式编程思想也为开发人员提供了更加灵活的语法实现.

编写高质量的Java代码

- - 研发管理 - ITeye博客
Java 开发通用方法和准则. 不要在变量和常量出现易混淆字母:int i=1l;. 三元操作符的值类型务必保持一致;. 避免带有变长参数的方法重载:Java 5 引入了变长参数,varags, 用…表示,变长参数必须是最后一个参数,一个方法不能有多个变长参数;. 别让null和空值影响到变长方法,主要出现在在变长方法的重载;.

iOS编写高质量代码

- - SegmentFault 最新的文章
这是一篇读书笔记,快速记录各种高效率编程的技巧和方法. 这些方法是为了提升编码质量和效率,高质量代码利于后期的维护和更新,毕竟不能一份代码到永远. 由于是记录形式,当然不能把整篇内容都写下来,只记录关键性的内容,长期更新. Objective-C使用了消息机制代替调用方法. 区别:使用消息结构的语言,其运行时缩影执行的代码由运行环境来决定.

如何提高代码质量(管理篇):代码复查

- - 博客 - 伯乐在线
也许你是一位项目经理,也许你是一位项目骨干成员,或者开发小组长. 在我发表“如何提高代码质量”的这一系统文章后,有许多网友都向我抱怨,说他无法把握整个项目组成员的代码质量. 我想,这也是所有项目组普遍存在的问题吧,它通常表现为以下几个问题:. 任何项目组成员都不可避免地出现新手,他们往往是刚刚从大学毕业的学生.

如何提高一个研发团队的“代码速度”?

- - 博客园_知识库
  阿里妹导读:Code Velocity(代码速度),体现了一个研发团队快速响应业务需求的能力. 如果做得好,代码从 commit 到上线可能平均只需要两三天时间,甚至连紧急发布都不怎么需要了.   今天,蚂蚁金服国际事业群技术风险部研究员南门,将和大家聊聊 Code Velocity,希望能在团队效率问题方面,为你带来一些启发.

如何编写高质量的Javascript代码

- jessie - 蓝色理想
优秀的Stoyan Stefanov在他的新书中(《Javascript Patterns》)介绍了很多编写高质量代码的技巧,比如避免使用全局变量,使用单一的var关键字,循环式预存长度等等. 这篇文章不仅仅从代码本身来考虑如何优化编码,也从代码的设计阶段来考虑,包括书写API文档,同事的review,使用JSLint.

一堂如何提高代码质量的培训课

- - 博客 - 伯乐在线
来源:  fangang 的博客. 我既不讲Spring,也不讲Hibernate,更不讲Ext,我不讲任何一个具体的技术. 我们抛开任何具体的技术,来谈谈如何提高代码质量. 如何提高代码质量,相信不仅是在座所有人苦恼的事情,也是所有软件项目苦恼的事情. 如何提高代码质量呢,我认为我们首先要理解什么是高质量的代码.