使用 ESLint + Prettier 简化代码 Review 过程

翻译：疯狂的技术宅

原文：medium.com/javascript-…

在最近的一个项目中，咱们经过设置 ESLint 和 Prettier 来进行自动化语法检查，并对 JavaScript 项目的代码风格管理。

为何自动 Lint 和代码风格很重要？

ESLint 经过对 JavaScript 文件执行自动扫描来查找常见的语法和代码风格错误。

Prettier 扫描文件中的样式问题，并自动从新格式化代码，以确保缩进、间距、分号、单引号和双引号等遵循一致的规则。

咱们的团队正在使用它们，由于：

• 他们按照相同的规则使每一个人都保持一致。
• 它们节省了代码 review 的时间，由于咱们能够安全地忽略全部的代码风格问题，并专一于真正重要的事情，好比代码的结构和语义。
• 他们可以发现错误。尽管并非不少，但实际上 ESLint 仍是检查出了不少语法错误和简单的类型错误，例如未定义的变量。
• 设置它们是一次性的，但节省的时间积累起来很是可观。

配置 Prettier 使其与 ESLint 一块儿工做

Prettier 能够做为ESLint的插件运行，它容许你用单个命令对代码进行 lint 和格式化。你对本身开发过程所作的任何优化都是本文的一个胜利。Prettier + ESLint 是开发者的天堂。

独自前往是危险的！拿着这个。

若是你曾经尝试过将 Prettier 和 ESLint 放在一块儿运行，那么可能会遇到规则冲突。别担忧！你不是在孤军奋战。eslint-config-prettier插件将自动禁用全部 ESLint 的规则冲突。

若是你尚未使用eslint-plugin-react，它能够提醒你将 PropTypes 添加到组件中，eslint-plugin-react -hooks 能够帮助你解决用户遇到的常见 React hooks API 问题。首先将如下这些安装为 devDependencies：

npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier
复制代码

接下来，你还须要一些配置文件。首先，让咱们用 .eslintignore 忽略一堆不想涉及的东西：

node_modules
.next
复制代码

还有 .prettierignore：

package-lock.json
.next
node_modules/
复制代码

你还须要一个.eslintrc 文件。我是这样的：

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true
  },
  "plugins": [
    "react",
    "react-hooks"
  ],
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],
  "parserOptions": {
    "sourceType": "module",
    "ecmaVersion": 2018
  },
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "linebreak-style": ["error", "unix"],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}
复制代码

还有一个.prettierrc 文件。这是个人：

{
  "singleQuote": true
}
复制代码

最后你只须要在 package.json 中添加一个 "lint" 脚本：

"lint": "eslint --fix . && echo 'Lint complete.'"
复制代码

我喜欢在它完成时给出一个提示，不然当没有错误时它会没有任何输出。

我还为本身的 watch 脚本添加了 linting，以下所示：

"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",
复制代码

若是你从未用过 watch，须要先安装它才能使用：

npm install --save-dev watch
复制代码

若是你是 Windows 用户，我建议你使用 Windows 的 Linux 子系统。不然我将没法保证这些脚本都能正常工做。

尝试使用 Zeit Now

能够经过视频查看 GitHub 连续部署的动做。在视频中，我简要介绍了 Zeit Now 的酷炫之处。

Zeit Now 是一款出色的托管服务，可与 GitHub 轻松集成，为你提供使用 serverless 技术的端到端持续部署。若是你不知道这意味着什么，或者不知道如何编写 “serverless” 应用的话也没问题，你只需使用 Next.js，让 Next 和 Now 帮你处理全部细节。

这就像拥有世界上最好的 DevOps 团队同样 —— 无需聘请全职开发人员来简化你的持续交付流程。 Zeit 在托管和开发时间上大大的下降了成本。

因为 Next 的自动 bundle splitting、服务器端渲染和超快的 serverless 响应时间，咱们的应用比以往任什么时候候都更快，它们甚至能够与 Cloudflare CDN 集成从而在很是短的时间内同步到世界各地。

总结

• **即便我正在进行原型设计，也会使用TDD。**当你第一次使用TDD时，开始可能须要花费 15％ - 30％的时间。编写测试用例能够节省你的时间，由于你花费在更改代码、刷新页面以及遍历工做流来测试UI上的时间被大大节省了。
• 自动化 lint 和代码格式化能够提升开发人员的工做效率，经过捕获错误和使开发人员保持一致，使你的团队在进行代码 review 时把精力集中在更有意义和更高效的事情上。
• 尝试使用 Zeit Now。
• 配置一个 watch 脚本，以便当你文件保存时可以自动 lint 代码并运行你的单元测试。

欢迎关注公众号：前端先锋，获取更多前端干货。