亲宝软件园·资讯

展开

提高团队代码质量利器ESLint及Prettier详解

天行无忌 人气:0

正文

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

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

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

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

ESLint

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

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

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

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

ESLint 与 Prettier

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

加载全部内容

相关教程
猜你喜欢
用户评论