則完全指南:禁止行尾尾隨空白并自動(dòng)修復(fù))
ESLint no-trailing-spaces 規(guī)則完全指南禁止行尾尾隨空白并自動(dòng)修復(fù)【免費(fèi)下載鏈接】eslintFind and fix problems in your JavaScript code.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/eslint在代碼編輯過(guò)程中行尾經(jīng)常會(huì)殘留多余的空格或制表符。這些不可見的尾隨空白雖然不會(huì)引發(fā)任何功能問(wèn)題卻會(huì)被版本控制系統(tǒng)捕捉為無(wú)關(guān)的 diff干擾代碼評(píng)審也讓許多團(tuán)隊(duì)的編碼規(guī)范在提交前強(qiáng)制要求清理。ESLint 內(nèi)置的no-trailing-spaces規(guī)則正是為了解決這一痛點(diǎn)而設(shè)計(jì)它負(fù)責(zé)檢測(cè)并清除每行末尾的多余空白字符并支持通過(guò)--fix一鍵自動(dòng)修復(fù)。本文將圍繞 docs/src/rules/no-trailing-spaces.md 文檔結(jié)合本倉(cāng)庫(kù)中的規(guī)則實(shí)現(xiàn)與測(cè)試用例完整講解該規(guī)則的用法、兩個(gè)配置選項(xiàng)的語(yǔ)義以及它在源碼層面的工作原理。規(guī)則概述禁止行尾尾隨空白no-trailing-spaces是一條layout布局類型規(guī)則其核心職責(zé)是禁止行尾出現(xiàn)尾隨空白字符trailing whitespace包括空格、制表符Tab以及其他 Unicode 空白字符。規(guī)則元數(shù)據(jù)定義在 lib/rules/no-trailing-spaces.js 中module.exports { meta: { type: layout, fixable: whitespace, docs: { description: Disallow trailing whitespace at the end of lines, recommended: false, }, messages: { trailingSpace: Trailing spaces not allowed., }, // ... }, };幾個(gè)值得注意的關(guān)鍵信息fixable: whitespace該規(guī)則支持自動(dòng)修復(fù)運(yùn)行eslint --fix時(shí)可直接刪除行尾的尾隨空白無(wú)需人工逐行清理。recommended: false該規(guī)則不在 ESLint 的推薦配置集中需要顯式開啟。默認(rèn)消息Trailing spaces not allowed.觸發(fā)時(shí)會(huì)在報(bào)告中顯示該 messageId。該規(guī)則屬于舊版核心規(guī)則其元數(shù)據(jù)中標(biāo)注了deprecatedSince: 8.53.0、availableUntil: 11.0.0自 ESLint v8.53.0 起核心格式化類規(guī)則逐步遷移至stylistic/eslint-plugin見 lib/rules/no-trailing-spaces.js 中的replacedBy字段。本文當(dāng)前倉(cāng)庫(kù)中的實(shí)現(xiàn)仍完整可用。規(guī)則詳解與代碼示例規(guī)則的觸發(fā)條件是一行代碼的末尾存在空白字符空格、Tab 或 Unicode 空白字符。不正確的代碼示例以下代碼在每行末尾都帶有多余的空格均會(huì)被該規(guī)則報(bào)告/*eslint no-trailing-spaces: error*/ var foo 0;/* trailing whitespace */ var baz 5;/* trailing whitespace */ /* trailing whitespace */正確的代碼示例當(dāng)行尾沒(méi)有任何空白時(shí)代碼通過(guò)檢查/*eslint no-trailing-spaces: error*/ var foo 0; var baz 5;需要特別說(shuō)明的是尾隨空白的判定對(duì)象是文本行末尾即行尾換行符之前的所有空白。因此行首縮進(jìn)、行中空白都不會(huì)被誤報(bào)只有緊貼行尾的空白才會(huì)命中。配置選項(xiàng)Options該規(guī)則接受一個(gè)對(duì)象選項(xiàng)包含兩個(gè)布爾配置項(xiàng)選項(xiàng)類型默認(rèn)值含義skipBlankLinesbooleanfalse默認(rèn)不允許空行上的尾隨空白設(shè)為true后允許空行僅含空白的行保留尾隨空白ignoreCommentsbooleanfalse默認(rèn)不允許注釋塊中的尾隨空白設(shè)為true后允許注釋區(qū)域內(nèi)的尾隨空白這兩個(gè)選項(xiàng)在源碼中通過(guò)如下方式解析見 lib/rules/no-trailing-spaces.jsconst options context.options[0] || {}, skipBlankLines options.skipBlankLines || false, ignoreComments options.ignoreComments || false;同時(shí)規(guī)則的schema見 lib/rules/no-trailing-spaces.js會(huì)對(duì)配置做嚴(yán)格校驗(yàn)skipBlankLines與ignoreComments都必須是布爾類型且不允許出現(xiàn)未聲明的額外屬性additionalProperties: false配置寫錯(cuò)時(shí) ESLint 會(huì)直接拋出配置校驗(yàn)錯(cuò)誤而不是靜默忽略。skipBlankLines是否放行空行skipBlankLines決定整行只有空白無(wú)任何代碼或注釋時(shí)是否報(bào)錯(cuò)。默認(rèn)false下一個(gè)只含空格的空行會(huì)被視為違規(guī)設(shè)為true后這類空白行被允許。/*eslint no-trailing-spaces: [error, { skipBlankLines: true }]*/ var foo 0; var baz 5; // ↓ a line with whitespace only ↓該選項(xiàng)對(duì)以空白填充來(lái)分隔代碼塊的格式化風(fēng)格非常實(shí)用例如很多團(tuán)隊(duì)習(xí)慣在函數(shù)之間用帶縮進(jìn)的空行分組此時(shí)開啟skipBlankLines: true可以避免大量誤報(bào)。ignoreComments是否放行注釋區(qū)域ignoreComments決定注釋所在的行包括單行注釋//、多行注釋/* */、以及 shebang 行上的尾隨空白是否被忽略。默認(rèn)false會(huì)檢查注釋行設(shè)為true后注釋區(qū)域內(nèi)的尾隨空白不再報(bào)告/*eslint no-trailing-spaces: [error, { ignoreComments: true }]*/ // ↓ these comments have trailing whitespace → // /** * baz * * bar */從實(shí)現(xiàn)上看該選項(xiàng)的判斷邏輯是先收集所有注釋節(jié)點(diǎn)覆蓋的行號(hào)集合getCommentLineNumbers見 lib/rules/no-trailing-spaces.js其中塊注釋Block會(huì)覆蓋從起始行到end.line - 1的全部行行注釋Line只覆蓋自身所在行隨后當(dāng)某一行命中尾隨空白時(shí)若ignoreComments為真且該行號(hào)在注釋行集合中則跳過(guò)不報(bào)見 lib/rules/no-trailing-spaces.js。值得注意的是ignoreComments: true只豁免注釋本身所在的行如果一行是注釋后跟代碼如/* */foo行尾空白依然會(huì)被報(bào)告這一點(diǎn)在測(cè)試用例中也有覆蓋見 tests/lib/rules/no-trailing-spaces.js。源碼實(shí)現(xiàn)原理基于正則的文本掃描該規(guī)則沒(méi)有依賴 AST 節(jié)點(diǎn)的遍歷而是在Program節(jié)點(diǎn)上對(duì)源碼文本做正則匹配。源碼中的注釋說(shuō)明了原因見 lib/rules/no-trailing-spaces.jsEspree does not return whitespace nodes, fetch the source code and do matching via regexps.ESLint 的解析器不會(huì)產(chǎn)出空白節(jié)點(diǎn)因此該規(guī)則直接讀取sourceCode.lines按行分割的文本數(shù)組逐行執(zhí)行正則匹配。核心正則定義如下見 lib/rules/no-trailing-spaces.jsconst BLANK_CLASS [ \t\u00a0\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u200b\u3000], SKIP_BLANK ^${BLANK_CLASS}*$, NONBLANK ${BLANK_CLASS}$;BLANK_CLASS是一個(gè)字符類覆蓋了空格、制表符\t、不間斷空格\u00a0、Unicode 空格族\u2000~\u200b以及全角空格\u3000NONBLANK[...]$用于匹配行尾的非空空白序列是主要的檢測(cè)正則SKIP_BLANK^[...]*$用于判斷某行是否為純空白行供skipBlankLines選項(xiàng)使用。掃描過(guò)程中的幾個(gè)實(shí)現(xiàn)細(xì)節(jié)值得了解行號(hào)與列號(hào)計(jì)算每行的列范圍從matches.index首個(gè)尾隨空白的位置到行尾由于修復(fù)時(shí)需要精確刪除空白區(qū)間代碼還會(huì)把每行的長(zhǎng)度累加為totalLength將行列號(hào)換算成全局字符區(qū)間range最終通過(guò)fixer.removeRange(fixRange)刪除空白見 lib/rules/no-trailing-spaces.js。CRLF 兼容計(jì)算行范圍時(shí)會(huì)把換行符本身也計(jì)入\r\n長(zhǎng)度為 2、\n長(zhǎng)度為 1確保在 Windows 的 CRLF 換行文件上修復(fù)結(jié)果也不會(huì)破壞行結(jié)構(gòu)見 lib/rules/no-trailing-spaces.js。測(cè)試用例中專門構(gòu)造了\r\n混合換行的場(chǎng)景來(lái)驗(yàn)證見 tests/lib/rules/no-trailing-spaces.js。模板字符串TemplateLiteral豁免如果尾隨空白位于模板字符串內(nèi)部通過(guò)sourceCode.getNodeByRangeIndex定位到TemplateElement且區(qū)間完全落在模板內(nèi)則該行不會(huì)被報(bào)告見 lib/rules/no-trailing-spaces.js。這是為了避免破壞模板字符串中的空白內(nèi)容——測(cè)試用例let str \${a}\n \n$; 驗(yàn)證了這一點(diǎn)見 tests/lib/rules/no-trailing-spaces.js。實(shí)戰(zhàn)配置建議在 flat configeslint.config.js中啟用當(dāng)前倉(cāng)庫(kù)采用 flat config 體系啟用該規(guī)則的典型寫法如下// eslint.config.js export default [ { rules: { no-trailing-spaces: [error, { skipBlankLines: false, ignoreComments: false }], }, }, ];若希望保留空白行分隔又不誤報(bào)可將skipBlankLines設(shè)為true若希望注釋區(qū)域不受打擾可將ignoreComments設(shè)為true。與 --fix 結(jié)合使用由于規(guī)則聲明了fixable: whitespace直接運(yùn)行npx eslint --fix .即可讓 ESLint 自動(dòng)清除所有行尾的尾隨空白無(wú)需人工逐行處理這也是將該規(guī)則納入 CI 或 pre-commit 鉤子的常見做法??偨Y(jié)no-trailing-spaces是一個(gè)簡(jiǎn)單卻高頻實(shí)用的布局規(guī)則默認(rèn)嚴(yán)格禁止行尾的一切尾隨空白空格、Tab、Unicode 空白通過(guò)skipBlankLines與ignoreComments兩個(gè)布爾選項(xiàng)可以靈活豁免純空白行與注釋區(qū)域并憑借fixable: whitespace支持--fix自動(dòng)清理。其底層實(shí)現(xiàn)不依賴 AST 遍歷而是用精心構(gòu)造的 Unicode 空白字符類對(duì)源碼逐行做正則掃描同時(shí)妥善處理了 CRLF 換行、模板字符串與注釋行號(hào)等邊界情況。相關(guān)實(shí)現(xiàn)與測(cè)試可在 lib/rules/no-trailing-spaces.js 與 tests/lib/rules/no-trailing-spaces.js 中繼續(xù)深入閱讀。另外提醒一點(diǎn)該規(guī)則在 ESLint 核心中的生命周期已進(jìn)入棄用階段自 v8.53.0 起長(zhǎng)期維護(hù)可關(guān)注其遷移方向但當(dāng)前倉(cāng)庫(kù)版本中的功能依然完整可用?!久赓M(fèi)下載鏈接】eslintFind and fix problems in your JavaScript code.項(xiàng)目地址: https://gitcode.com/GitHub_Trending/es/eslint創(chuàng)作聲明:本文部分內(nèi)容由AI輔助生成(AIGC),僅供參考