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

目录
  • 正文
  • ESLint
    • VUE 项目的规则
  • Prettier
  • ESLint 与 Prettier

正文

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

可能会看到以下部分（或全部）内容：

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

那么如何解决同一项目中有太多不同编码风格的问题？希望实现相同的编码风格，避免团队成员之间的许多警告；有 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 不仅仅是一个代码格式化程序，它还可以帮助开发人员发现编码错误。例如，如果在没有声明的情况下使用变量，ESLint 会给你一个警告。Prettier 没有这样的能力。
  • ESLint 会让开发人员知道代码格式有什么问题，并为其提供解决问题的选项。然后可以从这些选项中选择一个。另一方面，Prettier 根本不关心你。它只是将所有代码格式化为不同的结构格式。
  • Prettier 中的整个重写过程可以防止开发人员犯任何错误。
  • max-len、no-mixed-spaces-and-tabs、keyword-spacing、comma-style 是 Prettier 中一些流行的格式规则。
  • 除了上述类型的规则，ESLint 还考虑了代码质量规则，例如 no-unused-vars、no-extra-bind、no-implicit-globals、prefer-promise-reject-errors。

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

以上就是提高团队代码质量利器ESLint及Prettier详解的详细内容，更多关于ESLint Prettier提高代码质量的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • eslint+prettier统一代码风格的实现方法

    1.实现效果 Eslint校验代码语法,prettier统一格式化代码,按下保存自动修复eslint错误,自动格式化代码. 2.安装vscode插件 Vetur ESLint Prettier - Code formatter 3.配置vscode设置 文件–首选项–设置,打开json模式,添加以下配置: { // 控制工作台中活动栏的可见性. "workbench.activityBar.visible": true, //主题设置 "workbench.colorThem

  • vite项目添加eslint prettier及husky方法实例

    vite项目添加eslint prettier及husky方法实例

    目录 1. 初始化vite项目 2. 添加eslint 3. 添加 prettier 4. 添加 husky和lint-staged 5. 配置commitlint 1. 初始化vite项目 npm init vite Project name: - vite-project // 项目名称,默认 vite-project Select a framework: › react // 选择框架 Select a variant: › react-ts // 选择组合 2. 添加eslint 安装

  • React项目配置prettier和eslint的方法

    React项目配置prettier和eslint的方法

    目录 配置prettier和eslint 配置stylelint 保存自动修复 参考视频: https://www.bilibili.com/video/BV1rh411e7E5?vd_source=eee62ea3954ac01bff9e87e2a7b40084 prettier代码格式化 eslint js语法检查 stylellint css样式检查 配置prettier和eslint 1.初始化React项目 npx create-react-app study_react 2.安装vs

  • vue基础ESLint Prettier配置教程详解

    vue基础ESLint Prettier配置教程详解

    目录 引言 前言 安装 VsCode 插件 配置 VsCode "Workspace.json" 配置 vue 的 "package.json" 配置 vue 的 ".eslintrc.js" 配置 vue 的 ".prettierrc" 配置 "eslint --fix" 一键修复 配置 ESlint 提交时检测 测试配置效果 问题排查 尾声 引言 VsCode + Vue + ESLint + Pret

  • Vite项目自动添加eslint prettier源码解读

    目录 引言 使用 源码阅读 总结 引言 vite-pretty-lint库是一个为Vite创建的Vue或React项目初始化eslint和prettier的库. 该库的目的是为了让开发者在创建项目时,不需要手动配置eslint和prettier,而是通过vite-pretty-lint库来自动配置. 源码地址: vite-pretty-lint github1s 直接看 使用 根据vite-pretty-lint库的README.md,使用该库的只需要执行一行命令即可: // NPM npm i

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

    目录 正文 ESLint VUE 项目的规则 Prettier ESLint 与 Prettier 正文 每个开发人员都有独特的代码编写风格和不同的文本编辑器.在团队项目开发过程,不能强迫每个团队成员都写一样的代码风格. 可能会看到以下部分(或全部)内容: 缺少分号: 有单引号.双引号,风格不一致: 一些行之间有大量的空格,而其他行之间没有空格: 在使向右滚动多年以查看其中包含的所有内容的行上运行: 看似随意的缩进: 注释掉代码块: 初始化但未使用的变量: 一些使用“严格”JS 的文件和其他不使

  • 提高python代码可读性利器pycodestyle使用详解

    提高python代码可读性利器pycodestyle使用详解

    目录 关于PEP-8 目的 安装 基本用法 高级用法 结论 编程是数据科学中不可或缺的技能,虽然创建脚本来执行基本功能很容易,但编写大规模可读性良好的代码需要更多的思考. 关于PEP-8 pycodestyle 检查器提供基于 PEP-8 样式约定的代码建议.那么 PEP-8 到底是什么呢? PEP 代表 Python 增强建议,PEP-8 是一个概述编写 Python 代码最佳实践的指南.它的主要目标是通过标准化代码样式来提高代码的整体一致性和可读性. 目的 快速浏览一下PEP-8文档,就会发

  • 浅谈如何提高PHP代码质量之端到端集成测试

    概述 在这里,我们可以使用为行为驱动开发构建的工具--官方 PHP 的 Cucumber 实现--Behat.我们可以通过运行以下代码来安装它: $ php composer.phar require --dev behat/behat 增加一个目标到 build.xml(在本文的第一部分中描述了 Phing 设置) <target name="behat"> <exec executable="bin/behat" passthru="

  • 浅谈如何提高PHP代码质量之单元测试

    1.单元测试 通过实现单一责任原则(我们的代码应该只关注功能的单个部分),我们将确保在测试期间,我们只会同时关注项目的一小部分 通过使用 Liskov 替换原则和依赖倒置原则,我们的代码不会关心我们是否注入模拟依赖关系,只要它们实现了适当的接口 在单元测试中,我们确实希望用模拟对象替换所有依赖的服务,因此我们一次只测试一个类.但模拟是什么?它们是实现与其他对象相同的接口的对象,但它们的行为是受控的.例如,假设我们在创建一个价格比较服务,我们利用另一个服务来获取当前的汇率.在测试我们的比较器时,我

  • Go单元测试利器testify使用示例详解

    目录 testify assert 包 require 包 mock 包 suite 包 testify 在团队里推行单元测试的时候,有一个反对的意见是:写单元测试耗时太多.且不论这个意见对错,单元测试确实不应该太费时间.这时候,一个好的单测辅助工具,显得格外重要.本文推荐的 testify(github.com/stretchr/te…) 包,具有断言.mock 等功能,能配合标准库,使你的单元测试更加简洁易读. testify 有三个主要功能: 断言,在 assert 包和 require

  • 200行代码实现blockchain 区块链实例详解

    了解blockchain的概念很简单(区块链,交易链块):它是分布式的(即不是放置在同一台机器上,不同的网络设备上的)数据库支持主办记录日益增长的名单.但是,这也是容易混淆blockchain与我们试图帮他解决了目标 - 在人们心中的那一刻,这个词是相当强烈的交易,合同或智能cryptocurrency的概念有关. 只有在这里blockchain - 是不是一回事比特币,并理解链块的基本知识比它似乎更容易,尤其是在,它是基于源代码的情况下.在本文中,我们提出了建立与在JavaScript中200

  • Python代码块及缓存机制原理详解

    这篇文章主要介绍了Python代码块及缓存机制原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 1.相同的字符串在Python中地址相同 s1 = 'panda' s2 = 'panda' print(s1 == s2) #True print(id(s1) == id (s2)) #True 2.代码块: 所有的代码都需要依赖代码块执行. ​ 一个模块,一个函数,一个类,一个文件等都是一个代码块 ​ 交互式命令中, 一行就是一个代码块

  • c++代码实现tea加密算法的实例详解

    通过c++来实现tea加密算法,最终编译成so文件,以JNI的方式提供给客户端调用,主要需要解决以下三个问题: 实现tea算法,这都有开源的代码可以实现: 解决padding问题: 密钥做一个混淆,防止编译生成的库文件方便的被逆向拿到: 对于tea的加密算法,有成熟的各语言代码可以借鉴,下面是C++的实现: static void tea_encrypt(uint32_t *v, uint32_t *k) { uint32_t v0 = v[0], v1 = v[1], sum = 0, i;

  • JS代码简洁方式之函数方法详解

    函数的参数越少越好 有一个准则是:如果你的函数参数超过两个,就应该改为对象传入. 这样做是合理的,因为当函数参数超过两个时,参数顺序开始变得难以记忆,而且容易出现一种很尴尬的情况:比如我只需要传入第三个参数,因为其自身顺序的原因,不得不补齐前两个根本用不上的参数,以让它顺利排在第三位. // bad const createArticle = (title, author, date, content) => { } createArticle('震惊,一男子竟偷偷干这事', 'zhangnan

  • idea统计代码行数Statistic的步骤详解

    idea统计代码行数可以用到插件:Statistic. 步骤: File→Settings 进入Plugins 点击Marketplace 搜索Statistic     安装蓝框标出的插件 重启idea后就可以看到效果了(图是拿的别人的,基本就是这效果) 如果没有下边的statistic图标,可在View-> Tool Windows中打开 注:Statistic对idea的版本有要求 我的idea版本是2019.1,直接安装后未发现图标,在View -> Tool Windows里也没有,

随机推荐