likes
comments
collection

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

作者站长头像
站长
· 阅读数 13

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

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

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

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

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

ESLint

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

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

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

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

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

上面只是 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万现金大奖」 ”