ESLint 將在 11 月 3 日發(fā)布的 v8.53.0 版本中棄用代碼風(fēng)格規(guī)則，也就是那些強(qiáng)制執(zhí)行關(guān)于空格、分號(hào)、字符串格式等的代碼約定的規(guī)則。這樣，同時(shí)使用 ESlint 和 Prettier 時(shí)就不會(huì)出現(xiàn)沖突問(wèn)題了！

ESlint 是一個(gè)代碼檢測(cè)工具，其可以進(jìn)行代碼質(zhì)量和代碼風(fēng)格的靜態(tài)分析，捕獲潛在錯(cuò)誤和不一致的編碼習(xí)慣。而 Prettier 是一個(gè)代碼格式化工具，其可以對(duì)代碼進(jìn)行格式化，確保整個(gè)項(xiàng)目中的代碼風(fēng)格保持一致。對(duì)于代碼中的一些問(wèn)題，ESlint 可能無(wú)法正確格式化，這時(shí)候 Prettier 就可以很好地完成格式化的任務(wù)。因此，我們通常會(huì)組合使用 ESlint 和 Prettier，來(lái)保證代碼質(zhì)量和風(fēng)格統(tǒng)一（ ESlint 負(fù)責(zé)檢測(cè)代碼質(zhì)量，Prettier 負(fù)責(zé)格式化代碼）。

但是兩者都有格式化代碼風(fēng)格的規(guī)則，ESlint 將代碼進(jìn)行格式化后，會(huì)重新被 Prettier 再次格式化。因此最終的格式化效果是 Prettier 提供的。而代碼校驗(yàn)使用的是 ESLint，因此可能會(huì)出現(xiàn)沖突。ESlint 棄用代碼風(fēng)格規(guī)則后就可以專(zhuān)注于監(jiān)測(cè)代碼質(zhì)量，而 Prettier 專(zhuān)注于監(jiān)測(cè)代碼風(fēng)格。

背景

ESLint 于 2013 年發(fā)布，當(dāng)時(shí)關(guān)于是否應(yīng)該將源代碼格式化作為代碼規(guī)范工具的一部分是存在爭(zhēng)議的。JSLint 是最早出現(xiàn)的 JavaScript 代碼規(guī)范工具，將其作者的代碼格式化偏好編碼到了該工具中，這些偏好在 JSLint 的繼任者 JSHint 中有所保留。2013 年，JSHint 宣布他們將廢除與代碼風(fēng)格相關(guān)的選項(xiàng)，并計(jì)劃在下一個(gè)主要版本中刪除它們。盡管這些選項(xiàng)從未被實(shí)際刪除，但 JSHint 仍然給出了此警告，提醒用戶(hù)該選項(xiàng)已被棄用：

Warning This option has been deprecated and will be removed in the next major release of JSHint。
// 警告：此選項(xiàng)已被棄用，并將在 JSHint 的下一個(gè)主要版本中刪除。

JSHint is limiting its scope to issues of code correctness. If you would like to enforce rules relating to code style, check out the JSCS project.
// JSHint 將其范圍限制在代碼正確性問(wèn)題上。如果你想強(qiáng)制執(zhí)行與代碼風(fēng)格相關(guān)的規(guī)則，請(qǐng)查看 JSCS 項(xiàng)目。

JSCS 項(xiàng)目的誕生就是為了滿足 JavaScript 開(kāi)發(fā)人員對(duì)代碼格式設(shè)置的日益具體化的需求。與 ESLint 同時(shí)出現(xiàn)的 JSCS 在早期曾經(jīng)歷了一段試驗(yàn)期，人們嘗試著使用不同組合的 JSHint、JSCS 和 ESLint 來(lái)滿足他們的格式化需求。

起初，ESLint 要想與 JSHint 合理競(jìng)爭(zhēng)，就必須確保 ESLint 具備所有 JSHint 規(guī)則的等效功能。盡管 ESLint 的優(yōu)勢(shì)在于自定義規(guī)則，但如果每個(gè)人都需要重新創(chuàng)建 JSHint 規(guī)則，ESLint 就可能無(wú)法得到廣泛采用。因此，最初的計(jì)劃是提供幾十個(gè)核心規(guī)則，將其余規(guī)則作為插件實(shí)現(xiàn)。

隨著時(shí)間的推移，ESLint 收到越來(lái)越多的請(qǐng)求，希望將格式和風(fēng)格規(guī)則納入核心功能。許多請(qǐng)求都提到，他們不想使用兩個(gè)工具（ESLint 和 JSCS）來(lái)處理代碼，如果 ESLint 能夠?qū)崿F(xiàn) JSCS 的所有功能，他們可以放棄 JSCS，只使用 ESLint。因此，ESLint 團(tuán)隊(duì)專(zhuān)注于實(shí)現(xiàn)功能的平衡，以滿足這種需求。最終，取得了巨大成功，JSCS 的使用量下降，并將其合并到了 ESLint 中。

當(dāng)時(shí)，ESlint 團(tuán)隊(duì)并沒(méi)有意識(shí)到 JSHint 的想法（棄用代碼風(fēng)格規(guī)則）是正確的，盡管 ESLint 已經(jīng)成為 JavaScript 的主導(dǎo)代碼規(guī)范工具。

JavaScript 的爆炸式增長(zhǎng)和維護(hù)負(fù)擔(dān)

在接下來(lái)的幾年里，尤其是在 ECMAScript 6 和 React 發(fā)展的推動(dòng)下，編寫(xiě) JavaScript 的方式發(fā)生了巨大的變化。Airbnb 和 Standard 等越來(lái)越流行的風(fēng)格指南鼓勵(lì) JavaScript 開(kāi)發(fā)人員更具體地了解他們的代碼是如何編寫(xiě)的。因此，ESLint 收到了大量關(guān)于格式化規(guī)則的例外和選項(xiàng)的請(qǐng)求。在過(guò)去的十年中，出現(xiàn)了各種奇怪的代碼風(fēng)格，并伴隨著對(duì)將它們強(qiáng)制應(yīng)用于 ESLint 核心規(guī)則的請(qǐng)求。每當(dāng)引入新的語(yǔ)法時(shí)，ESlint 團(tuán)隊(duì)都會(huì)收到一系列請(qǐng)求，要求更新現(xiàn)有規(guī)則并實(shí)施新規(guī)則。

當(dāng) ESlint 的核心規(guī)則接近 300 條時(shí)，ESlint 團(tuán)隊(duì)試圖通過(guò)凍結(jié)風(fēng)格規(guī)則來(lái)減輕維護(hù)負(fù)擔(dān)，這樣就不再追蹤極端情況來(lái)支持每個(gè)人的個(gè)人偏好。這在一定程度上有所幫助，但還不夠：

• 規(guī)則沖突：用戶(hù)期望核心規(guī)則能夠很好地配合，這意味著任何兩個(gè)規(guī)則都不應(yīng)標(biāo)記相同的問(wèn)題，任何兩個(gè)核心規(guī)則也不應(yīng)該給出相互沖突的建議。雖然當(dāng)核心規(guī)則少于 30 條時(shí)，這很容易實(shí)現(xiàn)，但當(dāng)規(guī)則超過(guò) 300 條時(shí)，實(shí)現(xiàn)這一點(diǎn)就變得很困難，甚至不可能。
• 不切實(shí)際的期望：有了大量的核心格式規(guī)則，用戶(hù)希望可以?xún)H通過(guò)核心規(guī)則而不涉及插件就能實(shí)現(xiàn)所有可能的代碼風(fēng)格指南。這給團(tuán)隊(duì)增加了更多壓力，要求不斷添加選項(xiàng)，這也增加了核心的大小。
• 努力與價(jià)值不匹配：持續(xù)添加新選項(xiàng)和例外以支持所有人的代碼風(fēng)格指南的維護(hù)負(fù)擔(dān)落在了 ESLint 團(tuán)隊(duì)身上，而價(jià)值只被少數(shù)用戶(hù)獲得。
• 缺乏興趣：雖然 ESLint 受益于外部貢獻(xiàn)，但這些貢獻(xiàn)者對(duì)一些邊緣情況并不感興趣。ESLint 團(tuán)隊(duì)將這些規(guī)則的優(yōu)先級(jí)設(shè)得比其他工作低得多，這經(jīng)常導(dǎo)致問(wèn)題長(zhǎng)期未被解決。
• 一致性問(wèn)題：由于 ESLint 的規(guī)則被設(shè)計(jì)為原子性規(guī)則，沒(méi)有訪問(wèn)其他規(guī)則的能力，因此會(huì)遇到無(wú)法正確修復(fù)錯(cuò)誤的問(wèn)題，因?yàn)樗栊畔⒃诹硪粋€(gè)規(guī)則中。例如，如果自動(dòng)修復(fù)需要添加一行新代碼，它需要知道文件的縮進(jìn)方式才能應(yīng)用正確的修復(fù)方法。然而，縮進(jìn)規(guī)則控制 ESLint 的縮進(jìn)，這意味著其他規(guī)則需要在沒(méi)有縮進(jìn)的情況下應(yīng)用修復(fù)，然后相信縮進(jìn)規(guī)則會(huì)在后續(xù)的處理中修復(fù)縮進(jìn)問(wèn)題。

所有這些問(wèn)題隨著 ESLint 的發(fā)展而不斷增加，現(xiàn)在 ESlint 終究是到了一個(gè)無(wú)法跟上這些問(wèn)題的地步。

解決方案

推薦使用源代碼格式化工具而不是 ESLint 來(lái)對(duì)代碼進(jìn)行格式化。源代碼格式化程序旨在理解整個(gè)文件并在整個(gè)文件中應(yīng)用一致的格式。推薦以下兩個(gè)格式化工具：

• Prettier：基于 JavaScript 的格式化程序，支持格式化多種語(yǔ)言；
• dprint：基于 Rust 的格式化程序，支持較少的語(yǔ)言。

如果不想用專(zhuān)門(mén)的格式化工具，可以使用 @stylistic/eslint-plugin-js（針對(duì)JavaScript）或 @stylistic/eslint-plugin-ts（針對(duì)TypeScript）。這些包分別包含ESLint核心和 typescript-eslint 中的被棄用的格式化規(guī)則，這些規(guī)則會(huì)繼續(xù)維護(hù)。

已棄用的規(guī)則

以下列表包含 v8.53.0 中將棄用的所有規(guī)則：

• array-bracket-newline
• array-bracket-spacing
• array-element-newline
• arrow-parens
• arrow-spacing
• block-spacing
• brace-style
• comma-dangle
• comma-spacing
• comma-style
• computed-property-spacing
• dot-location
• eol-last
• func-call-spacing
• function-call-argument-newline
• function-paren-newline
• generator-star-spacing
• implicit-arrow-linebreak
• indent
• jsx-quotes
• key-spacing
• keyword-spacing
• linebreak-style
• lines-between-class-members
• lines-around-comment
• max-len
• max-statements-per-line
• multiline-ternary
• new-parens
• newline-per-chained-call
• no-confusing-arrow
• no-extra-parens
• no-extra-semi
• no-floating-decimal
• no-mixed-operators
• no-mixed-spaces-and-tabs
• no-multi-spaces
• no-multiple-empty-lines
• no-tabs
• no-trailing-spaces
• no-whitespace-before-property
• nonblock-statement-body-position
• object-curly-newline
• object-curly-spacing
• object-property-newline
• one-var-declaration-per-line
• operator-linebreak
• padded-blocks
• padding-line-between-statements
• quote-props
• quotes
• rest-spread-spacing
• semi
• semi-spacing
• semi-style
• space-before-blocks
• space-before-function-paren
• space-in-parens
• space-infix-ops
• space-unary-ops
• spaced-comment
• switch-colon-spacing
• template-curly-spacing
• template-tag-spacing
• wrap-iife
• wrap-regex
• yield-star-spacing

這些規(guī)則將在下一個(gè)版本中被棄用，但在至少 ESLint v10.0.0 之前不會(huì)被移除。仍然可以使用它們，但在 ESLint CLI 中可能會(huì)看到看用警告。

參考：https://eslint.org/blog/2023/10/deprecating-formatting-rules/