使用ESLint + Prettier简化代码 Review 过程[每日前端夜话0x4E]

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

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

ESLint 通过对 JavaScript 文件执行自动扫描来查找常见的语法和代码风格错误。
Prettier 扫描文件中的样式问题，并自动重新格式化代码，以确保缩进、间距、分号、单引号和双引号等遵循一致的规则。

我们的团队正在使用它们，因为：

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

配置 Prettier 使其与 ESLint 一起工作

Prettier 可以作为ESLint的插件【https://github.com/prettier/eslint-plugin-prettier】运行，它允许你用单个命令对代码进行 lint 和格式化。你对自己开发过程所做的任何优化都是本文的一个胜利。Prettier + ESLint 是开发者的天堂。

独自前往是危险的！拿着这个。
如果你曾经尝试过将 Prettier 和 ESLint 放在一起运行，那么可能会遇到规则冲突。别担心！你不是在孤军奋战。eslint-config-prettier 插件【https://github.com/prettier/eslint-config-prettier】将自动禁用所有 ESLint 的规则冲突。

如果你还没有使用eslint-plugin-react，它可以提醒你将 PropTypes 添加到组件中，eslint-plugin-react -hooks 可以帮助你解决用户遇到的常见 React hooks API 问题。首先将以下这些安装为 devDependencies：

1npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks prettier

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

1node_modules2.next

还有 .prettierignore：

1package-lock.json2.next3node_modules/

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

1{ 2  "env": { 3    "browser": true, 4    "commonjs": true, 5    "es6": true, 6    "node": true 7  }, 8  "plugins": [ 9    "react",10    "react-hooks"11  ],12  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:prettier/recommended"],13  "parserOptions": {14    "sourceType": "module",15    "ecmaVersion": 201816  },17  "settings": {18    "react": {19      "version": "detect"20    }21  },22  "rules": {23    "linebreak-style": ["error", "unix"],24    "react-hooks/rules-of-hooks": "error",25    "react-hooks/exhaustive-deps": "warn"26  }27}

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

1{2  "singleQuote": true3}

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

1"lint": "eslint --fix . && echo 'Lint complete.'"

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

我还为自己的 watch 脚本添加了 linting，如下所示：

1"watch": "watch 'clear && npm run -s test | tap-nirvana && npm run -s lint' src",

如果你从未用过 watch，需要先安装它才能使用：

1npm install --save-dev watch

如果你是 Windows 用户，我建议你使用 Windows 的 Linux 子系统。否则我将无法保证这些脚本都能正常工作。

尝试使用 Zeit Now

可以通过视频【https://ericelliottjs.com/shotgun-postamp-episode-one-linting/】查看 GitHub 连续部署的动作。在视频中，我简要介绍了 Zeit Now 的酷炫之处。

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

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

由于 Next 的自动 bundle splitting、服务器端渲染和超快的 serverless 响应时间，我们的应用比以往任何时候都更快，它们甚至可以与 Cloudflare CDN 【https://www.cloudflare.com/】集成从而在非常短的时间内同步到世界各地。

总结

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

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

配置 Prettier 使其与 ESLint 一起工作

尝试使用 Zeit Now

总结

更多相关文章

随机推荐