自定义 ESLint 规则，让代码持续美丽

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"一段真实的代码发展历史"}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"很久很久以前，有一个需求，然后产出了一段代码，代码优雅而简洁"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"export const getConfig = (param1, param2) => {\n  return ...\n};\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不久又来了个需求，加个参数扩展，so easy！"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"export const getConfig = (param1, param2, param3) => {\n  return ...\n};\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"经过多次产品需求迭代后，现在的代码"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/b4\/b4b7de7d40c3a24fc6460d04ead9d619.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"export const getConfig = (param1, param2, param3, param4, param5, param6, param7……) => {\n  return ...\n};\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在产品迭代过程中，上面的 case 一个函数的参数从 2 个发展到了 7 个，优雅的代码逐渐变为不可维护。这是什么问题？这归咎于日益增长的需求，快速响应和代码质量之间的矛盾。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"那如何避免呢？"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"制定代码规范"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"靠开发同学的自我修养"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"进行 Code Review"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"工具提示"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"发版控制，不允许发版"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"制定代码规范肯定是需要的，那如何约束代码呢？规范文档宣讲，再凭借开发同学的自我修养？答案是：无法保证。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Code Review ？但难免也有落网之鱼。发版控制？能有效解决但是开发体验不好。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果我们在开发者写代码的时候就及时给到提示和建议，那开发体验就很棒了，而 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 的自定义规则就可以实现在开发过程中给开发同学友好的提示。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"ESLint 原理"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"ESLint 是一个代码检查工具，通过静态的分析，寻找有问题的模式或者代码。默认使用 "},{"type":"link","attrs":{"href":"https:\/\/github.com\/eslint\/espree","title":"xxx","type":null},"content":[{"type":"text","text":"Espree"}]},{"type":"text","text":"  解析器将代码解析为 "},{"type":"codeinline","content":[{"type":"text","text":"AST"}]},{"type":"text","text":" 抽象语法树，然后再对代码进行检查。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"看下最简单的一段代码使用 "},{"type":"codeinline","content":[{"type":"text","text":"espree"}]},{"type":"text","text":" 解析器转换成的抽象语法树结构，此处可以使用 "},{"type":"link","attrs":{"href":"https:\/\/astexplorer.net\/","title":"xxx","type":null},"content":[{"type":"text","text":"astexplorer  "}]},{"type":"text","text":"快速方便查看解析成 "},{"type":"codeinline","content":[{"type":"text","text":"AST"}]},{"type":"text","text":" 的结构："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码片段："}]},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"var a = 1;"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转换出的结果："}]},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"{\n  \"type\": \"Program\",\n  \"start\": 0,\n  \"end\": 10,\n  \"range\": [\n    0,\n    10\n  ],\n  \"body\": [\n    {\n      \"type\": \"VariableDeclaration\",\n      \"start\": 0,\n      \"end\": 10,\n      \"range\": [\n        0,\n        10\n      ],\n      \"declarations\": [\n        {\n          \"type\": \"VariableDeclarator\",\n          \"start\": 4,\n          \"end\": 9,\n          \"range\": [\n            4,\n            9\n          ],\n          \"id\": {\n            \"type\": \"Identifier\",\n            \"start\": 4,\n            \"end\": 5,\n            \"range\": [\n              4,\n              5\n            ],\n            \"name\": \"a\"\n          },\n          \"init\": {\n            \"type\": \"Literal\",\n            \"start\": 8,\n            \"end\": 9,\n            \"range\": [\n              8,\n              9\n            ],\n            \"value\": 1,\n            \"raw\": \"1\"\n          }\n        }\n      ],\n      \"kind\": \"var\"\n    }\n  ],\n  \"sourceType\": \"module\"\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码转换为 "},{"type":"codeinline","content":[{"type":"text","text":"AST"}]},{"type":"text","text":" 后，可以很方便的对代码的每个节点对代码进行检查。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"自定义 ESLint 规则开发"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"怎么自定义"}]},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"语法树分析"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"对目标代码进行语法树解析，可使用 "},{"type":"link","attrs":{"href":"https:\/\/astexplorer.net\/","title":"xxx","type":null},"content":[{"type":"text","text":"astexplorer "}]}]},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/bc\/bcd69e9a0438f4f52333a47fb525876c.png","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":4},"content":[{"type":"text","text":"编写规则"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面是一个规则简单的结构（"},{"type":"link","attrs":{"href":"https:\/\/eslint.org\/docs\/developer-guide\/working-with-rules#rule-basics","title":"xxx","type":null},"content":[{"type":"text","text":"官方 API 文档说明"}]},{"type":"text","text":"）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"module.exports = {\n  meta: {\n    docs: {\n      description: \"最多参数允许参数\",\n    },\n  },\n  create: function (context) {\n    return {\n      FunctionDeclaration: (node) => {\n        if (node.params.length > 3) {\n          context.report({\n            node,\n            message: \"参数最多不能超过3个\",\n          });\n        }\n      },\n    };\n  },\n};\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"meta（对象）包含规则的元数据"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"create ( function ) 返回一个对象，其中包含了 ESLint 在遍历 JavaScript 代码的抽象语法树 AST ( ESTree 定义的 AST ) 时，用来访问节点的方法"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"context.report ( )  用来发布警告或错误，并能提供自动修复功能（取决于你所使用的配置）"}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最简单的示例（只使用 node 和 message 参数）："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"context.report({\n    node,\n    message: \"参数最多不能超过3个\",\n});\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用上面的这个规则，结合编辑器就有了对整个 "},{"type":"codeinline","content":[{"type":"text","text":"node"}]},{"type":"text","text":" 节点的提示，如果需要更精确的错误或警告提示，我们可以使用 "},{"type":"codeinline","content":[{"type":"text","text":"loc"}]},{"type":"text","text":" 参数，"},{"type":"codeinline","content":[{"type":"text","text":"API"}],"marks":[{"type":"strong"}]},{"type":"text","marks":[{"type":"strong"}],"text":" "},{"type":"link","attrs":{"href":"https:\/\/eslint.org\/docs\/developer-guide\/working-with-rules#context-report","title":"xxx","type":null},"content":[{"type":"text","text":"文档说明"}]},{"type":"text","text":" 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/95\/952ec6bbeea143d9f60d66e4df73d2b1.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"如何使用自定义规则"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"使用自定义的 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 规则，你需要自定义一个 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 的插件，然后将规则写到自定义的 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 插件中，然后在业务代码中添加 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 配置，引入 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 插件。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"ESLint 插件"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"创建"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"创建一个 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint plugin"}]},{"type":"text","text":"，并创建 一个 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint rule"}]},{"type":"text","text":"。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"基于 "},{"type":"codeinline","content":[{"type":"text","text":"Yeoman generator"}]},{"type":"text","text":" (https:\/\/yeoman.io\/authoring\/) ，可以快速创建 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint plugin"}]},{"type":"text","text":" 项目。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"npm i -g yo\nnpm i -g generator-eslint\n\/\/ 创建一个plugin\nyo eslint:plugin\n\/\/ 创建一个规则\nyo eslint:rule\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"创建好的项目目录结构："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rules"}]},{"type":"text","text":" 文件夹存放的是各个规则文件"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"tests"}]},{"type":"text","text":" 文件夹存放单元测试文件"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"package.json 是你的 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 插件 npm 包的说明文件，其中的 "},{"type":"codeinline","content":[{"type":"text","text":"name"}]},{"type":"text","text":" 属性就是你的 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":"  插件的名称，命名规则：带前缀 "},{"type":"codeinline","content":[{"type":"text","text":"eslint-plugin-"}]}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/4a\/4a7ef9d8f7c9c0d8f177049e557755ff.webp","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 示例代码：\n\/\/ lib\/rules\/max-params.js\nmodule.exports = {\n  meta: {\n    docs: {\n      description: \"最多参数\",\n    },\n  },\n  create: function (context) {\n    \/**\n     * 获取函数的参数的开始、结束位置\n     * @param {node} node AST Node \n     *\/\n    function getFunctionParamsLoc(node) {\n      const paramsLength = node.params.length;\n      return {\n        start: node.params[0].loc.start,\n        end: node.params[paramsLength - 1].loc.end,\n      };\n    }\n    return {\n      FunctionDeclaration: (node) => {\n        if (node.params.length > 3) {\n          context.report({\n            loc: getFunctionParamsLoc(node),\n            node,\n            message: \"参数最多不能超过3个\",\n          });\n        }\n      },\n    };\n  },\n};\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"\/\/ 补充测试用例\n\/\/ \/tests\/lib\/rules\/max-params.js\nvar ruleTester = new RuleTester();\nruleTester.run(\"max-params\", rule, {\n  valid: [\"function test(d, e, f) {}\"],\n  invalid: [\n    {\n        code: \"function test(a, b, c, d) {}\",\n        errors: [{\n            message: \"参数最多不能超过3个\",\n        }]\n    },\n  ],\n});"}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"ESLint 插件安装"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在需要的业务代码中安装你的 ESLint 插件。（"},{"type":"codeinline","content":[{"type":"text","text":"eslint-plugin-my-eslist-plugin"}]},{"type":"text","text":" 是你的 ESLint 插件 npm 包的包名）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":null},"content":[{"type":"text","text":"npm install eslint-plugin-my-eslist-plugin "}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如果你的 npm 包还未发布，需要进行本地调试："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可使用 "},{"type":"codeinline","content":[{"type":"text","text":"npm link"}]},{"type":"text","text":" 本地调试，"},{"type":"link","attrs":{"href":"https:\/\/www.baidu.com\/s?ie=UTF-8&wd=npm%20link","title":"xxx","type":null},"content":[{"type":"text","text":"npm link 的使用"}]},{"type":"text","text":" 。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"配置"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"添加你的 "},{"type":"codeinline","content":[{"type":"text","text":"plugin"}]},{"type":"text","text":" 包名（"},{"type":"codeinline","content":[{"type":"text","text":"eslint-plugin-"}]},{"type":"text","text":" 前缀可忽略） 到 "},{"type":"codeinline","content":[{"type":"text","text":".eslintrc"}]},{"type":"text","text":" 配置文件的 "},{"type":"codeinline","content":[{"type":"text","text":"plugins"}]},{"type":"text","text":" 字段。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":".eslintrc"}]},{"type":"text","text":" 配置文件示例："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n    \"plugins\": [\n        \"zoo\" \/\/ 你的 ESLint plugin 的名字\n    ]\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"rules"}]},{"type":"text","text":" 中再将 "},{"type":"codeinline","content":[{"type":"text","text":"plugin"}]},{"type":"text","text":" 中的规则导入。⚠️ ESlint更新后，需要重启 "},{"type":"codeinline","content":[{"type":"text","text":"vsCode"}]},{"type":"text","text":"，才能生效。（ vsCode  重启快捷方式："},{"type":"codeinline","content":[{"type":"text","text":"CTRL"}]},{"type":"text","text":" +"},{"type":"codeinline","content":[{"type":"text","text":"SHITF"}]},{"type":"text","text":" + "},{"type":"codeinline","content":[{"type":"text","text":"P"}]},{"type":"text","text":"，输入 "},{"type":"codeinline","content":[{"type":"text","text":"Reload Window"}]},{"type":"text","text":" ）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此处涉及 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 的规则设置（"},{"type":"link","attrs":{"href":"https:\/\/eslint.org\/docs\/user-guide\/configuring#configuring-rules","title":"xxx","type":null},"content":[{"type":"text","text":"参考说明"}]},{"type":"text","text":"）"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"{\n    \"rules\": {\n        \"zoo\/rule-name\": 2\n    }\n}\n"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"效果"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https:\/\/static001.geekbang.org\/infoq\/95\/952ec6bbeea143d9f60d66e4df73d2b1.gif","alt":"Image","title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"更多的应用场景"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了上面说的硬编码的场景，还可以将沉淀出的最佳实践和业务规范通过自定义 "},{"type":"codeinline","content":[{"type":"text","text":"ESLint"}]},{"type":"text","text":" 的方式来提示开发者，这对于多人协助、代码维护、代码风格的一致性都会有很大的帮助。"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"更多的应用场景有："}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Input 必须要有 "},{"type":"codeinline","content":[{"type":"text","text":"maxlength"}]},{"type":"text","text":" 属性，防止请求的后端接口数据库异常"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码中不能出现加减乘除等计算，如果需要计算应该引入工具函数，来控制由于前端浮点数计算引起的 Bug"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"规范限制，单位元的两边的括号要用英文括号，不能用中文括号，来达到交互展示统一的效果"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"代码中不能使用 OSS 地址的静态资源路径，应该使用 CDN 地址的资源路径"}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"..."}]}]}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"horizontalrule"},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"头图：Unsplash"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"作者：七喜"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：https:\/\/mp.weixin.qq.com\/s\/zDTRB9BQFbzj6SeAM7mVcA"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"原文：自定义 ESLint 规则，让代码持续美丽"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"来源：政采云前端团队 - 微信公众号 [ID：Zoo-Team]"}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"转载：著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。"}]}]}