React 代码规范指南：ESLint、Prettier 和 Husky 的应用

前言

在现代的前端开发中，代码规范被越来越重视。因为代码规范能够提高代码的可读性、可维护性和可扩展性。本文主要介绍一些 React 代码规范，在实际开发中应该如何应用 ESLint、Prettier 和 Husky 等工具来保持团队代码的一致性和优雅性。

配置 ESLint

ESLint 是一个可插入的静态代码检查工具，用于识别和报告关于 ECMAScript（即 JavaScript）代码中的模式。ESLint 可以打破简单的规则，例如变量未被使用，或者是复杂的规则，例如强制执行符合给定 JSDoc 注释的变量的类型限制。使用 ESLint 时，您可以通过自定义配置文件来指定我们的规则。以下是如何配置 ESLint：

1. 安装 ESLint

$ npm install eslint --save-dev

1. 初始化 ESLint

$ npx eslint --init

在初始化过程中可以选择一些规则，根据团队实际情况进行选择。

1. 创建.eslintrc.js文件

为了在项目中启用 ESLint，默认情况下配置会生成为 .eslintrc.js 文件。

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react'],
  rules: {
    // 对于一些规则你可以配置为off，建议只关闭对于ESLint的规则，而关闭Prettier的校验可以在.eslintignore文件中添加
    'no-console': 'off',
  },
};

配置 Prettier

Prettier 是一个代码格式化工具，不仅限于 JavaScript。它支持各种语言，如 HTML、CSS、JSX 等。使用 Prettier 可以省去许多手动调整代码格式的麻烦，特别是当你面对一个带有混乱格式的代码库时。可以使用以下命令安装 Prettier：

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

在你的项目根目录下添加一个 .prettierrc 文件并添加配置。例如，以下是一些常见的 Prettier 配置：

{
  "printWidth": 120, // 将换行符置于标记的最大字符数。
  "tabWidth": 2, // 设置逐个缩进所使用的空格数。
  "useTabs": false, // 使用空格而不是制表符缩进。
  "semi": true, // 在语句末尾添加分号。
  "singleQuote": true, // 使用单引号而非双引号。
  "quoteProps": "as-needed", // 将对象字面量属性的引号更改为尽可能使用引号（例如，始终将要求标识符的键用引号括起来，但不需要字符串字面量的键）。
  "jsxSingleQuote": true, // jsx语法使用单引号，而不是双引号
  "trailingComma": "es5", // 多行时，尽可能使用尾随逗号。
  "bracketSpacing": true, // 在对象字面量属性中的括号之间打印空格。
  "jsxBracketSameLine": false // jsx的闭合标签，不要放到下一行
}

然后，我们还需要在 .eslintrc.js 的 extends 属性中添加 eslint-config-prettier 和 eslint-plugin-prettier。

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: ['plugin:react/recommended', 'prettier'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['react', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
  },
};

配置 Husky

Husky 是一个 Git 钩子管理工具，可以通过 Husky 将某些脚本与 Git 命令相关联，例如 commit-msg、pre-commit 等。接下来我们将把代码检查自动化使用 Git Hooks 来确保代码在提交之前被正确检查。在此之前，需要先安装 Husky 和 lint-staged。

1. 安装 Husky 和 lint-staged

$ npm install husky lint-staged --save-dev

1. 在 package.json 中添加如下配置

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }
}

这个配置唯一的操作是在 git add 之前使用 ESLint 和 Prettier 格式化文件。如果在标记之前出现任何错误，将提交失败。

总结

通过以上配置，我们在团队的 React 项目中使用 ESLint、Prettier 和 Husky 这些工具可以确保我们的代码符合一致的标准。这样就可以提高代码的可读性、可维护性和可扩展性，为开发者提供更好的开发体验和更优秀的代码品质。

示例代码

function showCase() {
  const name = 'John Doe';
  console.log(`Hello, ${name}`);
}

showCase();

在使用 ESLint 和 Prettier 格式化后：

function showCase() {
  const name = 'John Doe';
  console.log(`Hello, ${name}`);
}

showCase();

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