ESLint 与 Prettier 的使用技巧-JavaScript中文网-JavaScript教程资源分享门户

前端开发中代码规范的统一性，能够提高团队协作效率，减少代码维护成本。ESLint 和 Prettier 的使用能够让我们在代码编写中更加规范化，避免代码风格不统一等问题，提高代码质量和开发效率。本文中将为您详细讲解 ESLint 和 Prettier 的使用技巧。

ESLint

什么是 ESLint？

ESLint 是一个静态代码检查工具，用于识别 ECMAScript/JavaScript 代码中的问题，并以插件和规则方式提供对特定规范的支持。它可以集成到几乎所有的开发和添加和编译系统中，以便于开发人员可以在开发期间更高效地发现和修复问题。

安装和配置 ESLint

首先，我们需要在项目中安装 ESLint。
```
npm install eslint --save-dev
```
然后，在项目的根目录下新建配置文件 .eslintrc 。
```
touch .eslintrc
```

接着，在 .eslintrc 文件中添加配置。

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

最后，在项目的 package.json 文件中添加脚本。
```
"scripts": {
  "lint": "eslint ."
}
```
运行 npm run lint 命令，即可检查所有 JS 文件的语法和规范是否符合 ESLint 的配置。

在项目中使用 ESLint

ESLint 遵循一个简单的流程：

请求文件，解析文件和解析配置文件。
运行规则，将返回列表。
将列表传递到报告程序，以展示在终端或浏览器或文件或其他支持的格式中。

我们可以使用以下命令来检查项目中未符合 ESLint 配置的文件。

eslint . --ext .js,.vue

Prettier

什么是 Prettier？

Prettier 是一个代码格式化工具，用于强制开发团队统一的代码风格，避免不必要的代码审查和讨论。它可以与大多数的编辑器和语言一起使用。

安装和配置 Prettier

首先，我们需要在项目中安装 Prettier。
```
npm install prettier --save-dev
```
然后，在项目的根目录下新建配置文件 .prettierrc 。
```
touch .prettierrc
```
接着，在 .prettierrc 文件中添加配置。
```
{
  "semi": false,
  "singleQuote": true
}
```
最后，在项目的 package.json 文件中添加脚本。
```
"scripts": {
  "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json,yml}'"
}
```
运行 npm run format 命令，即可格式化项目中所有 js、jsx、ts、tsx、css、md、json、yml 文件。

在项目中使用 Prettier

当 Prettier 和编辑器一起使用时，我们可以在编辑器页面上或是保存文件时快速格式化代码。我们可以用以下命令来检查代码文件是否符合 Prettier 的配置。

prettier --check .

工具结合使用

ESLint 和 Prettier 能够提高代码的规范化和格式化，我们可以把两者结合使用来达到代码风格的更佳维护。在实际使用中，我们通常会使用 ESLint 配置来检查代码规范，Prettier 配置来格式化代码。

在项目中安装依赖。

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

然后，在 .eslintrc 文件中添加一些新配置。
```
{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
```
我们可以使用以下命令检查项目中是否存在格式错误。
```
eslint . --fix
```
使用以上命令可自动修复大多数格式错误，并按照 Prettier 的配置格式化代码文件。

总结

在这篇文章中，我们学习了如何使用 ESLint 和 Prettier 来提高代码规范化和格式化，以更好维护代码的质量和开发效率。同时我们也介绍了两款工具的安装与配置，以及如何在项目中使用这些工具。希望这篇文章能够带来帮助，让前端开发变得更加规范化和高效化。

示例代码：https://github.com/lemon-zh/eslint-prettier-article

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/647ab12f968c7c53b065d915