自定義 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":"轉載：著作權歸作者所有。商業轉載請聯繫作者獲得授權，非商業轉載請註明出處。"}]}]}