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