ECMAScript 2020 的新技术:ESLint 和 Prettier

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

介绍

ECMAScript 2020 带来了许多有用的新功能,其中包括 ES Module、Promise.allSettled 和 BigInt 等。但是,对于在前端项目中编写 JavaScript 代码的开发人员来说,两个新技术更值得关注:ESLint 和 Prettier。

ESLint 和 Prettier 是两个可帮助前端开发人员编写干净、可维护的代码的工具。这些工具的目的是帮助我们检测语法错误、规范代码格式和风格、尽可能避免低级错误等等。

本文将详细介绍这两个工具,包括如何使用它们、它们的差异以及如何将它们有效地结合起来以实现更好的代码质量。

ESLint

ESLint 是一个静态代码分析工具,它可以帮助开发人员检测并修复 JavaScript 代码中的错误和潜在问题。 它的作用类似于编译器,但是它是在开发期间直接嵌入到代码中的。

安装和配置

ESLint 是使用 Node.js 编写的,因此它只能在 Node.js 环境中运行。 安装 ESLint 只需使用 npm 或 Yarn 进行全局安装即可:

--- ------- -- ------

安装完成后,即可在命令行中启动 ESLint 以检查代码。不过在使用之前,我们还需要为项目创建一个配置文件。

配置文件是一个 JSON 或 YAML 文件,它会告诉 ESLint 在分析代码时什么应该被视为错误、应该被忽略哪些文件等等。 可以通过以下命令来创建一个默认的 .eslintrc.json 文件:

------ ------

这个命令将为您提供一系列问题,问答过程中确定了您的项目需要哪些规则和插件,最终创建配置文件。

使用

在安装和配置完成后,ESLint 将会在我们的项目中发挥作用。我们可以使用以下命令来对整个项目进行检查:

------ -

如果您只想检查单个文件,请将文件路径替换为 .。ESLint 将会为您检查所有匹配对应规则的文件。此外,您还可以将检查信息输出到文件中,通过以下命令执行:

------ - - -----------------

命令将会将检查结果输出到 eslint-report.txt 文件中。

规则

ESLint 支持超过 200 个预定义规则。这些规则定义了您的代码应该遵守的最佳实践和语言约定。在默认情况下,它们中的一些被启用,但是您可以通过配置文件来定制规则。

您可以将您认为不需要的规则禁用,或者您可以切换规则的严格程度。规则可以分为以下几种类型:

  • "off" 或 0 - 跳过规则。
  • "warn" 或 1 - 启用规则,使用警告级别。
  • "error" 或 2 - 启用规则,使用错误级别。

ESLint 还支持自定义规则,这些规则可以帮助您检查您认为必须遵守的编码约定。在编写自定义规则时,可以使用大量的 AST API。AST API 允许您从代码中提取有关代码元素的详细信息。

示例

禁止 var 声明

no-var 规则是一个很好的 ES6 推广例子。下面代码展示了如何禁止 var 声明:

-
  -------- -
    --------- -------
  -
-

空格的一致性

ESLint 可以强制执行空格风格一致性。下面的示例将强制执行分号后的空格:

-
  -------- -
    --------------- --------- - --------- ------ -------- ---- --
  -
-

检查无用代码

ESLint 可以检测无用的代码,并对其进行警告或抱怨。

-
  -------- -
    ----------------- --------- - ------- ------ ------- --------------
  -
-

Prettier

Prettier 是一个格式化代码的工具。它使用一组严格定义的规则,以一致的方式格式化代码。不同于 ESLint,Prettier 不会更改代码结构或执行规则检查。它只会格式化代码,其中包括缩进、换行符和尾随逗号等等。

Prettier 可用于任何类型的文档,包括 JavaScript、CSS、HTML 等等。 它是一款独立的工具,但是与 ESLint 配合使用可实现最佳效果。

安装和配置

与 ESLint 类似,安装 Prettier 只需使用 npm 或 Yarn 进行全局安装即可:

--- ------- -- --------

虽然 Prettier 有许多配置选项可用,但是命令行界面并不需要配置文件。如果您想将自己的配置与 Prettier 进行深度集成,您可以在 .prettierrc 或者 package.json 文件中编写配置,如下:

-
  ------------- ---
  ----------- --
  ---------- ------
  ------- -----
  -------------- -----
  ---------------- ------
  ----------------- -----
  --------------------- ------
  -------------- -------
-

Prettier 还支持一些 Options 可以在命令行使用。

使用

要运行 Prettier,请输入以下命令:

-------- -----------

它将使用默认选项格式化您的文件。如果您希望使用其他选项,则可以使用 --print-width--tab-width--no-tabs--jsx-bracket-same-line 等选项覆盖它们。实际上,您甚至可以将 Prettier 集成到您的编辑器中,以在保存或提交更改时自动运行它。

规则

除了一些基本选项外,Prettier 不需要额外配置规则。当然,如果您想更改某些选项,则需要使用 .prettierrc 文件或者命令行。

示例

Prettier 的主要目标是带来一致性;下面的示例演示了如何将参数一行最多放 60 个字符。

-- ------
------- -------------- ---------------- --------------------- ---------------------------

-- -----
-----
  --
  --------------
  ----------------
  ---------------------
  -------------------------
--

结合应用

在实际工作中,ESLint 和 Prettier 经常一起使用。一些规则在二者之间是共享的,例如缩进和值分配。

为了使这两个工具能够完美结合,您需要 eslint-config-prettier,即 Prettier 推荐的 ESLint 配置。

--- ------- ----- ----------------------

然后在您的 .eslintrc 文件的 extends 中添加 "prettier"。例如:

-
  ---------- -
    ---------------------
    ----------
  -
-

结论

ESLint 和 Prettier 都可以很好地提升我们的代码质量。ESLint 可以帮助我们检查和修复代码中的错误,遵循编码规范和最佳实践;而 Prettier 可以帮助我们格式化代码,使其保持一致性。在使用时结合起来,可以更好地确保代码质量、可维护性和可读性。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/671acaa69babaf620fa6071f


猜你喜欢

  • Vue.js 中如何使用 computed 属性

    Vue.js 中如何使用 computed 属性 在 Vue.js 中,computed 属性是一种非常有用的特性,它可以让我们轻松地计算出某个属性的值,并将其绑定到模板中展示。

    15 天前
  • Angular 中使用 ngAfterViewInit 来操作视图组件

    Angular 中使用 ngAfterViewInit 来操作视图组件 在 Angular 应用中,除了组件初始化完成时,我们还需要在视图加载完成后才能够进行操作。

    15 天前
  • 使用 ES11 update() 方法更新对象属性时遇到的坑点

    前言 JavaScript 语言不断地更新和进化,为前端开发者提供了更好的开发工具和框架。ES11 的 update() 方法是一个值得关注的新特性,可以让前端开发者更优雅地更新对象属性。

    15 天前
  • CSS Grid 布局与响应式设计

    CSS Grid 是一种用于创建网格布局的 CSS 模块。它提供了一种创建复杂布局的方式,同时具备灵活性和响应式设计的能力。本文将介绍 CSS Grid 布局以及如何使用它进行响应式设计。

    15 天前
  • 使用 Fastify 框架构建 Nest.js 应用程序的方法

    Nest.js 是一个基于 Node.js 平台的快速、可扩展的应用程序框架,它使用了许多标准和现代技术和设计模式。Nest.js 提供了一种简洁的架构、简单的编程形式和强大的模块化机制,可以大大提高...

    15 天前
  • Java 应用程序性能优化的 Best Practices

    介绍 Java 是一种常用的编程语言,被广泛应用于企业应用开发、移动端应用开发、游戏开发等领域。Java 应用程序性能优化是一个重要的话题,它涉及到许多方面,如代码质量、算法复杂度、内存管理、线程安全...

    15 天前
  • Flexbox 布局中的五种 flex-shrink 策略

    在 Flexbox 布局中,flex-shrink 属性指定了弹性盒中一个项目在空间不足时该如何缩小。当容器空间不足以容纳所有项目时,flex-shrink 属性控制每个项目缩小的程度。

    15 天前
  • 是时候学习 Progressive Web App (PWA) 技术了!

    近年来,随着移动设备的普及和技术的进步,Web 应用的使用率不断增加。然而,传统的 Web 应用在某些方面依然存在着劣势,如需要网络连接、页面加载速度较慢等等。因此,为了提供更优秀的用户体验,又兼顾 ...

    15 天前
  • Material Design 中图形的选择、调整和搭配技巧分析

    前言 在设计 UI 时,图形元素是不可缺少的一部分。Material Design 带来了更加直观、连贯和有意义的设计语言,并提供了一系列的设计准则,以协助设计师更好的选用图形元素。

    15 天前
  • 让 Babel 自动挖掘代码中的 ES6 语法

    在现代前端开发中,ES6 已经成为了标配。然而,我们在编写代码时难免会忘记或者忽略某些 ES6 的语法,这就导致了我们的代码在可读性、可维护性、性能优化等方面存在着不足。

    15 天前
  • Hapi.js中的路由优化技巧

    Hapi.js 是一款构建服务端应用程序的框架,它提供了一整套工具和插件,用于管理服务器上的路由、请求和响应。在构建服务器应用时,路由的性能是非常关键的因素之一。本文将介绍 Hapi.js 中的路由优...

    15 天前
  • 如何使用 Enzyme 测试 Redux 中的异步 Action Creator

    Redux 是一个非常流行的状态管理库,而 Enzyme 是一种常用的测试工具,用于测试 React 组件。在编写前端应用程序时,需要使用测试工具来测试 Redux 异步 Action Creator...

    15 天前
  • 解决 ES6 的 class 关键字无法继承 Array 的问题

    在 ES6 中,使用 class 关键字来创建类已经成为了一种普遍的方式。但是,当我们尝试继承 Array 类时,会遇到一些问题:Array 类的一些方法(例如 push、slice 等)无法通过子类...

    15 天前
  • Vue.js 中如何使用父子组件通信

    在 Vue.js 中,父子组件通常是一起工作的,需要进行交互和通信。因为 Vue.js 基于组件化开发,组件之间的通信是至关重要的。Vue.js 提供了多种方式实现父子组件通信,本文将着重介绍其中的两...

    15 天前
  • Kubernetes 中如何实现弹性伸缩?

    Kubernetes 是当今最流行的容器编排平台之一,它可以帮助我们轻松地管理和部署容器化应用程序。其中的一个主要功能是弹性伸缩,即自动缩放应用程序的数量来适应流量变化。

    15 天前
  • GraphQL 中的分布式架构实践

    GraphQL 作为一种新兴的 API 查询语言,被越来越多的开发者所使用。它不仅仅能够提高前后端开发效率,同时还支持分布式架构。 下面,我们将深入探讨 GraphQL 的分布式架构实践,探索如何使用...

    15 天前
  • 如何通过 IO 异步提升程序性能?

    前言 随着 Web 应用程序的不断发展和用户数量的不断增加,对程序性能的要求也越来越高。而对于大部分 Web 应用程序来说,IO 操作是性能瓶颈之一。当我们需要读取或写入大量数据时,传统的同步 IO ...

    15 天前
  • 如何在 Web Components 中实现图片裁剪

    前言 随着 Web Components 的普及,越来越多的前端开发者开始关注它的应用前景。本文将介绍如何在 Web Components 中实现图片裁剪,帮助开发者更好地管理和展示图片。

    16 天前
  • 如何使用 ES12 中的 BigInt 解决 JS 数字溢出问题?

    如何使用 ES12 中的 BigInt 解决 JS 数字溢出问题? 在 JavaScript 中进行数字运算时,经常会遇到数字溢出的问题。这是因为 JavaScript 默认使用 64 位浮点数来表示...

    16 天前
  • 无障碍测试 | 无障碍测试实践注意事项

    引言 在当今互联网日益高速发展的时代,越来越多的人使用互联网来获取信息、进行沟通。然而,我们也应该关注那些无法像大多数人一样自如地访问互联网的人群,比如视障人士。因此,提高网站和移动应用的无障碍性已成...

    16 天前

相关推荐

    暂无文章