ESLint arrow-spacing 規則完全指南規范化箭頭函數兩側空格【免費下載鏈接】eslintFind and fix problems in your JavaScript code.項目地址: https://gitcode.com/GitHub_Trending/es/eslint箭頭函數是現代 JavaScript 中使用頻率最高的語法之一而其前后的空格風格在不同開發者之間往往千差萬別。本指南圍繞 ESLint 核心規則arrow-spacing完整講解其配置選項、正確與錯誤示例、底層實現原理與自動修復機制幫助讀者在項目中一鍵統一箭頭函數的空格風格。讀完本文你將掌握該規則的全部配置能力并能從源碼層面理解它如何定位token、如何統計與修正空格。規則概述arrow-spacing是一條布局layout類規則作用是規范化箭頭函數箭頭前后before/after的空格風格。它保證同一代碼庫中所有箭頭函數的兩側空格保持一致// { before: true, after: true } (a) {} // { before: false, after: false } (a){}該規則在 ESLint 中定位為rule_type: layout且不屬于eslint:recommended推薦集源碼 lib/rules/arrow-spacing.js 中recommended: false需要團隊顯式開啟。同時它是一條可自動修復fixable: whitespace的規則使用eslint --fix即可一鍵統一風格。從版本歷史上看arrow-spacing自1.0.0-rc-1起便已加入 ESLint見 docs/src/_data/rule_versions.json是歷史最悠久的核心規則之一。規則選項與默認配置該規則接收一個對象參數包含before和after兩個布爾屬性默認配置為{ before: true, after: true }選項類型默認值含義beforebooleantruetrue表示之前應有一個或多個空格false表示不能有空格afterbooleantruetrue表示之后應有一個或多個空格false表示不能有空格選項的 JSON Schema 定義在源碼 lib/rules/arrow-spacing.js 中before與after均為布爾類型且additionalProperties: false即傳入任何未定義的額外屬性都會被判定為配置非法。在配置文件中啟用{ rules: { arrow-spacing: [error, { before: true, after: true }] } }若省略第二個參數不傳選項對象規則將直接采用默認值{ before: true, after: true }。值得注意的是源碼中通過rule.before rule.before ! false和rule.after rule.after ! false合并選項lib/rules/arrow-spacing.js因此只要選項值不是顯式的false就會被視為true——這與 Schema 中聲明的默認值行為一致。規則詳情與示例本節完整覆蓋四種選項組合的正確/錯誤代碼示例。所有示例均假設在配置中啟用該規則error級別。默認配置{ before: true, after: true }要求兩側各有一個或多個空格。錯誤代碼示例/*eslint arrow-spacing: error*/ () {}; () {}; (a) {}; (a) {}; a a; a a; () {\n}; () {\n};正確代碼示例/*eslint arrow-spacing: error*/ () {}; (a) {}; a a; () {\n};選項{ before: false, after: false }要求兩側均不得有空格緊湊風格。錯誤代碼示例/*eslint arrow-spacing: [error, { before: false, after: false }]*/ () {}; (a) {}; () {\n};正確代碼示例/*eslint arrow-spacing: [error, { before: false, after: false }]*/ (){}; (a){}; (){\n};選項{ before: false, after: true }要求之前無空格、之后有空格。錯誤代碼示例/*eslint arrow-spacing: [error, { before: false, after: true }]*/ () {}; (a) {}; (){\n};正確代碼示例/*eslint arrow-spacing: [error, { before: false, after: true }]*/ () {}; (a) {}; () {\n};{ before: true, after: false }的組合邏輯與此對稱之前有空格、之后無空格。跨行場景與測試佐證規則同樣適用于后換行的寫法。在測試文件 tests/lib/rules/arrow-spacing.js 中(a) \n{}、(a) \r\n{}、(a) \n 0均被判定為有效代碼——只要之后存在換行即使換行后緊接內容即滿足有空格的要求不會誤報。這一點在將規則應用于多行箭頭函數如 JSX 回調、鏈式調用時尤為重要。源碼級原理規則如何工作arrow-spacing的實現非常精簡整個邏輯集中在 lib/rules/arrow-spacing.js 的create(context)函數中由三個核心步驟構成1. 定位tokengetTokens規則監聽ArrowFunctionExpression節點lib/rules/arrow-spacing.js對每個箭頭函數節點調用getTokens(node)const arrow sourceCode.getTokenBefore( node.body, astUtils.isArrowToken, ); return { before: sourceCode.getTokenBefore(arrow), arrow, after: sourceCode.getTokenAfter(arrow), };其思路是先找到函數體node.body之前的、符合isArrowToken判定的那個 token即再分別取它前一個和后一個 token。isArrowToken定義在 lib/rules/utils/ast-utils.js 中用于從 token 流中精確識別符號。2. 統計空格數countSpaces借助 token 的range源碼位置區間計算兩側的空格數量const before tokens.arrow.range[0] - tokens.before.range[1]; const after tokens.after.range[0] - tokens.arrow.range[1]; return { before, after };即用起點減去前一個 token 的終點得到前的空格數用后一個 token 的起點減去的終點得到后的空格數。3. 校驗并報告spacesspaces(node)根據合并后的rule.before/rule.after進行判定lib/rules/arrow-spacing.jsrule.before為true且countSpace.before 0→ 報告expectedBeforeMissing space before .修復方式為在前插入一個空格rule.before為false且countSpace.before 0→ 報告unexpectedBeforeUnexpected space before .修復方式為刪除前的整段空白rule.after的判定邏輯完全對稱對應消息expectedAfter/unexpectedAfter。所有四條消息文案定義在源碼的meta.messages中lib/rules/arrow-spacing.js。注意空格數量只做是否為 0 / 是否大于 0的判斷因此多個空格也會被統一修復為單個空格或完全移除。自動修復的完整行為由于fixable: whitespace執行eslint --fix時規則會調用fixer.insertTextBefore、fixer.insertTextAfter或fixer.removeRange自動改寫代碼。測試文件 tests/lib/rules/arrow-spacing.js 中的invalid用例完整驗證了修復后的輸出例如輸入配置修復輸出aa{before:true, after:true}a aa a{after:false, before:true}a aa a{before:false, after:false}aa(a) \n{}{after:false}(a) {}其中最后一個用例tests/lib/rules/arrow-spacing.js對應 GitHub issue #7079 的回歸場景后緊跟換行時after: false會移除換行前殘留的空格但不會移除換行本身。嵌套箭頭函數的處理ArrowFunctionExpression監聽對所有箭頭函數生效包括嵌套場景。測試中(a ()0)1被修復為(a () 0) 1tests/lib/rules/arrow-spacing.js說明規則會依次處理外層與內層每個一次--fix即可同時修正全部問題。在代碼庫中的元數據與生態定位規則元數據同樣維護在文檔站點數據中docs/src/_data/rules_meta.json 記錄了其type: layout、fixable: whitespace、非推薦recommended: false以及棄用信息docs/src/_data/rules.json 的條目包含replacedBy字段指明遷移去向。關于棄用狀態的提醒依據源碼頭部注釋lib/rules/arrow-spacing.js與meta.deprecated字段arrow-spacing已在ESLint v8.53.0被標記為棄用格式化類規則正逐步移出 ESLint 核心官方建議遷移到由 ESLint Stylistic 維護的stylistic/eslint-plugin插件對應規則stylistic/arrow-spacing該規則將在ESLint v11.0.0從核心中移除。文檔數據中同樣保留這一棄用與替代信息見 docs/src/_data/rules_meta.json。因此在實際項目中若使用 ESLint v8.53.0 及以上版本建議已有配置中仍可繼續使用arrow-spacing但會在 IDE 與 CLI 中收到棄用提示新項目或正在升級的項目優先安裝stylistic/eslint-plugin并改用其arrow-spacing規則選項與行為保持兼容遷移成本極低若團隊暫不遷移可固定 ESLint 版本或接受棄用警告規則本身在 v11 之前依然可用。實戰建議沿用社區主流默認值絕大多數風格指南包括 ESLint 自身示例采用{ before: true, after: true }這也是規則的默認配置開啟規則即可通常無需顯式傳參。與arrow-parens搭配使用arrow-parens控制箭頭函數參數的括號風格與arrow-spacing同屬箭頭函數格式化規則二者常同時開啟分別約束括號與空格。放心使用--fix該規則僅處理空白字符不改變任何語義可安全地加入 pre-commit 鉤子或 CI 的eslint --fix流程中。警惕多空格被統一規則對兩側多空格會一并修正為單空格或零空格若團隊存在對齊排版需求如對齊多個需知悉這一行為后自行權衡。參考路徑匯總規則文檔docs/src/rules/arrow-spacing.md規則源碼lib/rules/arrow-spacing.js規則測試tests/lib/rules/arrow-spacing.jsToken 判定工具lib/rules/utils/ast-utils.js規則元數據docs/src/_data/rules_meta.json規則列表與替代信息docs/src/_data/rules.json版本歷史docs/src/_data/rule_versions.json【免費下載鏈接】eslintFind and fix problems in your JavaScript code.項目地址: https://gitcode.com/GitHub_Trending/es/eslint創作聲明：本文部分內容由AI輔助生成（AIGC），僅供參考