ESLint 和 Prettier 搭配使用指南-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码风格统一和代码质量检查是非常重要的。为了解决这些问题，我们需要使用一些自动化工具来使我们的代码更具可读性、可维护性和稳定性。而 ESLint 和 Prettier 就是两个非常流行的前端开发工具。本文将介绍 ESLint 和 Prettier 的概念、用法和如何将它们搭配使用。

什么是 ESLint

ESLint 是一个 JavaScript 代码检查工具，它可以帮助我们检查代码中的潜在问题，并提示我们如何解决这些问题。ESLint 可以识别 ECMAScript 6 语法，支持插件化架构和自定义规则，并且可以通过命令行和集成到各种编辑器/IDE 中使用。

ESLint 内置了一些规则，如 no-redeclare, no-unused-vars，还可以通过配置文件 .eslintrc.js 来定义自定义规则。如下是一个示例 .eslintrc.js 配置文件：

// javascriptcn.com 代码示例
module.exports = {
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    "eslint:recommended",
    "plugin:react/recommended"
  ],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly",
  },
  parser: "@babel/eslint-parser",
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: "module",
  },
  plugins: [
    "react"
  ],
  rules: {
    "react/prop-types": 0,
    "react/react-in-jsx-scope": 0,
    "semi": ["error", "always"],
    "quotes": ["error", "single"],
    "no-console": "warn",
    "no-alert": "warn",
    "no-unused-vars": ["error", {"argsIgnorePattern": "^_"}]
  },
};

上述配置文件中，我们定义了一些预设（"eslint:recommended" 和 "plugin:react/recommended"），定义了一些全局变量（"Atomics" 和 "SharedArrayBuffer"），设置了 EcmaScript 的语法以及解析器（"@babel/eslint-parser" 和 "ecmaVersion"）等等。其中，最后一行详细配置了自定义的规则。在这里，我们使用了三个规则：

"semi": ["error", "always"] 表示我们强制每句话都加上分号，否则会报错。
"quotes": ["error", "single"] 表示我们强制使用单引号作为字符串括号，否则会报错。
"no-console": "warn" 表示禁止使用 console.log 方法，但只是警告而非错误。

什么是 Prettier

Prettier 是一个代码格式化工具，它可以自动根据一定的规则和约定对你的代码进行格式化和美化，减轻你的工作量。Prettier 可以处理 JavaScript、CSS、JSON、Markdown 等多种文件格式。与 ESLint 不同，Prettier 不会检查语法问题，而是专注于代码的格式化。

Prettier 规则都在默认配置中定义，并且不能通过规则配置覆盖。如果您想更改 Prettier 的默认规则，则需要使用 .prettierrc.js 文件来重写。

以下是使用 Prettier 自动格式化 JavaScript 的一个简单示例：

const foo = () => {
console.log('hello')
}

foo()

可以使用 Prettier 进行格式化，使代码更易于阅读：

const foo = () => {
  console.log("hello");
};

foo();

如何同时使用 ESLint 和 Prettier

ESLint 和 Prettier 在处理问题上存在一些重叠，因为它们都可以帮助我们规范化代码和提高代码质量，因此，在使用这两个工具时，它们有可能会冲突。有时您可能需要确保，两个工具都适用于您的代码，以获得最佳结果。

为了解决重叠的问题，ESLint 和 Prettier 可以通过 plugins 和配置文件相互交互。

配置插件

首先，安装一下相应的插件。在这里我们使用 eslint-config-prettier 和 eslint-plugin-prettier，其中 eslint-config-prettier 用于关闭 ESLint 中与 Prettier 发生冲突的规则，eslint-plugin-prettier 内置了一些 Prettier 的规则。

npm i eslint-config-prettier eslint-plugin-prettier --save-dev

然后，在你的 .eslintrc.js 文件中，你需要将这两个插件添加到 extends 和 plugins 字段中。

// javascriptcn.com 代码示例
module.exports = {
  extends: [
    'eslint:recommended', 
    'plugin:react/recommended', 
    'plugin:prettier/recommended', 
    'prettier/react'
  ],
  plugins: [
    'react', 
    'prettier'
  ],
  rules: {
    // add your custom rules here
  },
}

上述配置中，我们在 extends 字段中添加了 eslint:recommended，plugin:react/recommended，plugin:prettier/recommended 和 prettier/react 这四个预设。而在 plugins 字段中添加了 react 和 prettier 两个插件。

这使得我们可以在使用 ESLint 时，自动忽略 ESLint 中与 Prettier 冲突的规则，并注册同时支持 Prettier 解析。如果想了解更多关于配置 Prettier 的方法，可以详细查看 Prettier 的官方文档。

在编译器中配置

当你开始使用 Prettier 和 ESLint 进行开发时，你想要在编译器/IDE 中启用它们的支持。这里以 Visual Studio Code 为例：

如果你还没有安装以下插件，请在编辑器中搜索安装：

ESLint
Prettier - Code formatter

然后，找到 Visual Studio Code 的 settings.json 文件，这可以通过 Visual Studio Code 的设置菜单选项进行。

// javascriptcn.com 代码示例
{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "prettier.disableLanguages": [
    "javascript"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
}

首先，由于我们要使用 Prettier 和 ESLint 格式化代码，所以我们启用了编辑器的自动保存和格式化功能的开关属性 editor.formatOnSave 和 editor.codeActionsOnSave。这个设置的含义是：在保存文件时自动格式化代码和运行 ESLint 来解决和修复一些错误和问题。

其次，我们配置了默认的代码格式化程序。在这里，我们使用了 esbenp.prettier-vscode，一个由社区维护的 Prettier 扩展并将其指定为默认的格式化程序。因此，在 VSCode 中，安装 Prettier 和这个插件就足够了。

最后，如果您使用 Visual Studio Code 进行开发，则可以使用 [javascript] 字段将您的特定编辑器设置与 JavaScript 文件相关联。这里我们为 JavaScript 文件指定了同样的默认格式化程序。

总结

在本文中，我们介绍了 ESLint 和 Prettier 的基本概念、用法和如何将它们搭配使用。当然，仅仅是将它们搭配使用还远远不够。我们需要更详细的了解和使用它们，以便更好地提高代码质量和开发效率。如果你想让你的代码变得更好，赶快在你的项目中开始使用 ESLint 和 Prettier 吧！

以上是本文的全部内容。希望这篇文章能够帮助你使用 ESLint 和 Prettier 更好地进行前端开发。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652900507d4982a6ebb926ca