npm 包 @dc0de/eslint-config-react 使用教程

在 React 工程中，如何保证代码质量？ESLint 是个好工具。它可以让我们在编码的过程中发现一些低级错误，避免掉进坑里。本文将介绍一个开箱即用的 ESLint 配置包，可以帮助你更快的在 React 工程中使用。

安装依赖

首先，我们需要在工程中安装 @dc0de/eslint-config-react。使用 npm 或 yarn 安装即可。

npm install --save-dev @dc0de/eslint-config-react
yarn add --dev @dc0de/eslint-config-react

配置 ESLint

安装完成后，我们需要对 ESLint 做一些配置。在项目根目录下，创建 .eslintrc.js 文件，在文件中输入以下内容：

module.exports = {
  extends: ["@dc0de/eslint-config-react"],
  rules: {
    // additional rules
  },
};

这里，我们使用了 @dc0de/eslint-config-react 配置包，并可以在 rules 中自定义覆盖默认配置。

配置 VS Code

如果你使用 VS Code，可以在工程中安装 eslint 插件，让你在编辑代码的过程中，在编辑器中看到 ESLint 错误提示。安装完成后，在 VS Code 配置文件中，增加以下内容：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]
}

这个配置可以在保存代码时，自动修复 ESLint 提示的错误。

示例代码

最后，我们看一下示例代码。以下是一个简单的 React 组件，我们可以使用 @dc0de/eslint-config-react 协助 ESLint 的工作。

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

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

在这个示例代码中，我们使用了 JSX 语法，而且我们为组件的 props 定义了类型，避免了 Bugs。

结论

在我们的 React 工程中，使用 @dc0de/eslint-config-react 可以帮助我们更快更好的使用 ESLint，让我们编写的代码更加精准、规范。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/dc0de-eslint-config-the-react