ESLint 开启 Prettier 校验代码风格的姿势

在前端开发中，代码风格的一致性是非常重要的。为了保证代码风格的一致性，我们通常会使用代码规范工具来帮助我们检查代码风格是否符合规范。ESLint 和 Prettier 是两个非常流行的代码规范工具，本文将介绍如何使用 ESLint 开启 Prettier 校验代码风格。

什么是 ESLint

ESLint 是一个开源的 JavaScript 代码检查工具，它可以帮助我们检查代码中的语法错误、代码风格等问题。ESLint 非常灵活，可以根据我们自己的需求配置检查规则。

什么是 Prettier

Prettier 是一个代码格式化工具，它可以帮助我们自动格式化代码，使其符合一定的代码风格规范。Prettier 支持多种语言，并且可以配置自定义的代码风格规范。

如何使用 ESLint 开启 Prettier 校验代码风格

安装 ESLint 和 Prettier

首先，需要安装 ESLint 和 Prettier，可以使用 npm 或者 yarn 安装：

npm install eslint prettier --save-dev

yarn add eslint prettier --dev

配置 ESLint

在项目根目录下创建一个 .eslintrc.js 文件，用于配置 ESLint。以下是一个简单的配置示例：

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
  },
  rules: {},
};

上述配置中，我们使用了 eslint:recommended 和 plugin:prettier/recommended 两个扩展，前者是 ESLint 官方推荐的规则，后者是 Prettier 推荐的规则。这样配置后，ESLint 将会根据这些规则检查代码风格。

配置 Prettier

在项目根目录下创建一个 .prettierrc.js 文件，用于配置 Prettier。以下是一个简单的配置示例：

module.exports = {
  semi: true,
  trailingComma: "all",
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
};

上述配置中，我们配置了一些常用的代码风格规范，比如使用分号、使用单引号、每行代码的最大长度等等。

配置 VS Code

在 VS Code 中，可以使用插件来帮助我们自动格式化代码。安装 ESLint 和 Prettier 插件后，需要在 VS Code 的 settings.json 文件中添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样配置后，每次保存代码时，VS Code 将会自动格式化代码并根据 ESLint 的规则检查代码风格。

总结

本文介绍了如何使用 ESLint 开启 Prettier 校验代码风格。通过配置 ESLint 和 Prettier，我们可以在开发过程中自动检查代码风格是否符合规范，并自动格式化代码。这样可以提高代码的可读性和可维护性，同时也有助于团队协作。

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