【eslint 外掛開發】禁用 location 跳轉外部連結

Liaofy發表於2023-02-17
EsLint

背景

公司 h5 專案需要為跳轉的外部連結統一增加引數。舉個例子，假設有如下程式碼：

location.href = 'https://www.test.com/a?id=xxx'
location.replace('https://www.test.com/a?id=xxx')

我們需要把所有連結都增加引數uid：

location.href = 'https://www.test.com/a?id=xxx&uid=someuid'
location.replace('https://www.test.com/a?id=xxx&uid=someuid')

需求分析

使用函式統一跳轉邏輯

方便維護和更新，我們需要使用函式來統一跳轉邏輯。

// 直接跳轉
location.href = 'abc' 轉化為 navigateTo('abc')
location.replace('abc') 轉化為 redirectTo('abc')

雖然可以查詢整個專案進行手動替換，但多個專案的人工操作，顯然是費時費力的。

禁止後續提交使用 location 跳轉

當我們完成當前程式碼的替換後，還需要防止其他人使用 location 進行跳轉。一個基本事實是，無法用人工監督來杜絕這個行為（或者說可以監督但成本太高）。

使用 eslint 外掛，自定義錯誤規則和修復程式，可以完美解決這兩個問題。

建立外掛 eslint-plugin-huoli

如果首次建立外掛，建議先閱讀官方檔案Create Plugins。

或者參考我的專案eslint-plugin-huoli。

外掛的寫法很簡單，就是針對某個 AST 節點型別進行處理。你可以在ast 官網檢視某條程式碼對應的 AST 資料結構和節點型別。

注意點

遍歷節點時機：enter、exit

可能大家更熟悉 babel 外掛，瞭解遍歷 AST 節點有兩個時機：進入和退出：

module.exports = {
  ...
  AssignmentExpression: {
    enter: node => {},
    exit: node => {},
  }
}

eslint 也有一樣，不過寫法略有不同：

module.exports = {
  ...
  AssignmentExpression() {},
  'AssignmentExpression:exit'(node) {},
}

如何除錯外掛

開發外掛過程中，如果能輕鬆的進行 debug 會極大提升開發效率。參考eslint-plugin-huoli

首先，使用Ruletester建立測試用例。

然後，在package.json中增加指令碼：

{
  scripts: {
    ...
    "debug": "node node_modules/jest/bin/jest",
  }
}

使用 vscode 進行除錯

相關文章