在 React Native 项目中，使用 ESLint + Prettier 提高代码质量-JavaScript中文网-JavaScript教程资源分享门户

React Native 是一个非常流行的移动端应用开发框架，开发人员使用 JavaScript 开发应用，同时在许多方面具有原生性能优势。但是，如果我们在开发过程中忽略代码质量，可能会影响我们的项目。ESLint 和 Prettier 是两个非常常用的代码质量工具，本文将介绍如何在 React Native 中使用这两个工具来提高代码质量。

为什么要使用 ESLint 和 Prettier

使用 ESLint 和 Prettier 可以让我们更专注于代码，而不必担心代码格式和质量问题。他们可以帮助我们实现以下功能：

提升代码质量 — 通过在开发过程中检查和自动纠正语法，风格和错误，从而确保代码的质量。
降低工作量 — 自动修复错误和缺陷可以减轻开发人员的工作量，使其能够更好的关注于写出更好的代码。
统一代码风格 — 可以帮助我们遵循特定代码风格规范，使代码库的风格统一，更易于代码阅读和维护。

安装及配置 ESLint

ESLint 是一款用JavaScript编写的开源代码检查工具，使用它可以使我们的代码具有更高的可读性和可维护性。在 React Native 项目中，安装和使用 ESLint 可以帮助我们避免潜在的错误和臭虫。

安装

在 React Native 项目中，我们需要先安装 ESLint 和相关的依赖库。

npm install eslint eslint-plugin-react eslint-config-airbnb --save-dev

配置

在安装完成后，我们需要配置 ESLint。

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

这里我选择了 Airbnb 的 ESLint 规则，同时关闭了一些不必要的规则。配置文件中的注释将告诉你更多细节信息。在你的项目根目录中创建一个名为 .eslintrc 的文件，将上述配置复制并粘贴到文件中。

集成到项目

现在，我们已经安装并配置好了 ESLint，接下来我们需要在项目中集成它。

集成到编辑器

大多数编辑器都支持 ESLint 集成，这使得编写更高质量的代码变得更加容易。

Visual Studio Code

安装名为 ESLint 的插件，然后在您的项目根目录下创建一个名为 .vscode/settings.json 的文件，然后添加以下代码：

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true
}

Sublime Text

安装名为 SublimeLinter-contrib-eslint 的插件。

Atom

安装名为 linter-eslint 的插件。

集成到编辑器之外的工具

当我们在终端中运行 npm run start 启动 React Native 项目时，我们希望也可以执行 ESLint。

集成到 npm

{
  "scripts": {
    "lint": "eslint .",
    "lint-fix": "eslint . --fix"
  }
}

然后，我们可以通过运行以下命令来检查代码：

npm run lint

并自动修复错误：

npm run lint-fix

安装并配置 Prettier

Prettier 是一个优美的代码格式化工具，可以自动格式化我们的代码，从而使代码更加易于阅读和理解。

安装

安装 Prettier 和相关依赖。

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

配置

在安装完成后，我们需要配置 Prettier。

在你的根目录中创建一个名为 .prettierrc 的文件，然后添加以下代码：

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "es5",
  "jsxBracketSameLine": true
}

这些配置选择的是一些常用设置。更多的配置选项可以在 Prettier 官方文档中查看。

集成到项目

集成到编辑器

大多数编辑器都支持 Prettier 集成，这使得编写更高质量的代码变得更加容易。

Visual Studio Code

安装名为 Prettier 的插件，然后在 settings.json 中添加以下属性：

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

注意，要使用 Prettier，您需要将其与 ESLint 集成。

Sublime Text

在 Sublime Text 中，您需要安装 SublimeLinter-prettier 和 SublimeLinter-contrib-eslint 插件。然后在您的用户设置中添加以下属性：

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

Atom

在 Atom 中，您需要安装 prettier-atom 插件。然后在您的用户设置中添加以下属性：

{
  "editor.formatOnSave": true,
  "prettier.eslintIntegration": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

集成到编辑器之外的工具

为了让 Prettier 在我们开发过程中跑起来，我们需要在 npm 命令中集成。您只需要在你的项目目录中创建以下文件，文件名为 prettier.js，并将以下代码复制并粘贴到文件中：

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

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

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

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

然后我们在之前创建的文件中添加以下命令：

{
  "scripts": {
    "prettify": "node prettier.js",
  }
}

现在，我们可以通过运行以下命令来执行 Prettier：

npm run prettify

结论

ESLint 和 Prettier 可以帮助我们确保代码质量，统一代码风格和减轻开发人员的工作量。在 React Native 项目中使用这些工具是提高代码质量的好方式。

在这篇文章中，我们介绍了如何安装和配置 ESLint 和 Prettier ，并将这些工具集成到我们的项目中来提高代码质量。学会这些技巧可以帮助您在 React Native 项目中编写更好的代码。

参考

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