在最近的一个项目中，我们通过设置 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_modules
2.next
还有.prettierignore：
1package-lock.json
2.next
3node_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":2018
16},
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":true
3}
最后你只需要在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，需要先安装它才能使用：
1npminstall--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 代码并运行你的单元测试。
十五年编程经验，今年1月整理了一批2019年最新WEB前端教学视频，不论是零基础想要学习前端还是学完在工作想要提升自己，这些资料都会给你带来帮助，从HTML到各种框架，帮助所有想要学好前端的同学，学习规划、学习路线、学习资料、问题解答。只要加入WEB前端学习交流Q群：296212562，即可免费获取。
网友评论