在開始一個新項目時，有一種在 React 開發(fā)人員中很常見的經(jīng)歷。您開始對代碼的干凈和可讀性感到滿意，只是編寫了一些函數(shù)或組件，然后慢慢地看著您的代碼庫陷入混亂。您發(fā)現(xiàn)自己從上到下、從左到右滾動，反復(fù)重讀代碼行，并從一個文件移動到另一個文件。完成某個功能后，您希望永遠(yuǎn)不必再次打開該文件，因為您知道找到單個函數(shù)或變量需要多長時間，更不用說編輯或更改該功能了。

在本文中，我們將研究格式化在使代碼庫干凈且可讀方面所扮演的角色。我們還將探索實現(xiàn)一致格式的行業(yè)標(biāo)準(zhǔn)和最佳實踐。

為什么要格式化你的代碼？

格式對于代碼的可讀性和可維護(hù)性至關(guān)重要。但如何呢？

格式良好的代碼有助于在視覺上分隔代碼的不同部分，從而更容易遵循邏輯流程。正確的縮進(jìn)突出了父組件、子組件、元素或選擇器之間的關(guān)系。一致的格式可以增強您快速調(diào)試、修復(fù)和維護(hù)代碼的能力。當(dāng)與遵循相同格式規(guī)則的團(tuán)隊成員協(xié)作時，可以更輕松地理解彼此的代碼而不會混淆。

減少精神負(fù)擔(dān)是良好格式化的另一個好處。干凈的代碼需要更少的腦力去理解，讓您能夠更多地專注于解決新問題，而不是破譯格式不良的代碼塊。

當(dāng)團(tuán)隊堅持一致的風(fēng)格時，每個人都可以做出貢獻(xiàn)，而無需浪費時間重新格式化代碼塊以滿足個人喜好。良好的格式也為代碼庫帶來了紀(jì)律和專業(yè)精神。

最后，工具兼容性是一個顯著的優(yōu)勢。開發(fā)人員使用依賴于一致格式的 linter、插件和 IDE。為了充分利用這些工具并從自動完成和錯誤突出顯示等功能中受益，您的代碼庫需要正確的格式。但如何實現(xiàn)這一目標(biāo)呢？

格式化代碼庫涉及什么？

當(dāng)談到格式化代碼庫時，我們通常指幾個方面：縮進(jìn)、行長、命名約定、間距、大括號和圓括號、引號的一致使用、分號的使用、文件和文件夾結(jié)構(gòu)以及適當(dāng)?shù)氖褂迷u論。現(xiàn)在讓我們了解如何使用和實施這些標(biāo)準(zhǔn)的行業(yè)標(biāo)準(zhǔn)。

1. 縮進(jìn)
   縮進(jìn)是使用空格以直觀方式將代碼組織成層次結(jié)構(gòu)。這里的行業(yè)標(biāo)準(zhǔn)是使用 2 或 4 個空格并避免使用制表符。根據(jù) Airbnb 的 JavaScript 和 React 風(fēng)格指南，您應(yīng)該使用 2 個空格。這是因為它保持了一致的嵌套級別并提高了代碼的整體可讀性。

2. 線長度
   這里的行長度是指您在一行上編寫的代碼應(yīng)該延伸多遠(yuǎn)。這里的行業(yè)標(biāo)準(zhǔn)是將一行保持在 80 到 100 個字符之間。很多指南，特別是 PEP 8 和 prettier 推薦 80 個字符。這是因為它可以防止水平滾動，并且通常在不同的屏幕尺寸上都能很好地工作。但這是否意味著在編碼時必須進(jìn)行計數(shù)？不，至少當(dāng)您使用像 vscode 這樣的代碼編輯器時不會。下圖顯示了如何判斷特定行上有多少個字符。下圖顯示您位于第 44 行，第 93 個字符。如果您還沒有觸及默認(rèn)設(shè)置，您可以在 vsCode 編輯器的右下角找到它。

1. 命名約定
   
   這是指以一致的方式命名事物的一組規(guī)則。清晰、有意義且精確的命名對于編寫易于閱讀、理解和維護(hù)的代碼至關(guān)重要。變量和函數(shù)最流行的命名約定是使用駝峰命名法（一種通過將每個單詞的第一個字母大寫而不使用空格來分隔短語中的單詞的方法）。對于 React 組件，應(yīng)該使用 PascalCase，特別是因為組件的第一個字母應(yīng)該大寫，如 React 文檔中所述，對于常量，建議使用大寫蛇形大小寫。本節(jié)沒有做到命名公正。如果我要深入命名這篇文章會變得太長。如果您有興趣了解更多信息，請查看這篇有關(guān)命名約定的文章。

2. 間距
   為了清晰起見，建議在運算符周圍添加空格，特別是因為某些運算符在組合使用時會執(zhí)行不同的操作。還建議使用空行來分隔代碼的邏輯部分。嘗試對函數(shù)聲明和邏輯進(jìn)行分組并使用空行空間變量聲明和賦值。

3. 大括號和括號
   根據(jù) Airbnb 風(fēng)格指南，不應(yīng)有懸空大括號，這意味著您應(yīng)將所有右大括號或括號與相應(yīng)的左大括號或括號正確對齊。

4. 一致的報價
   使用引號時，建議在整個項目中使用單引號 '' 或雙引號 ""，同時盡量避免不必要地使用兩者的組合。

5. 分號
   就像使用引號一樣，您決定要么使用分號來結(jié)束表達(dá)式、賦值和代碼行，要么根本不使用分號，但無論您的決定是什么，請堅持并保持一致。我個人建議使用分號以避免自動分號插入帶來的問題。

6. 文件和文件夾結(jié)構(gòu)
   對于文件和文件夾結(jié)構(gòu)，項目大小和技術(shù)堆棧等因素主要決定文件和文件夾的結(jié)構(gòu)，但有 2 個一般規(guī)則需要遵循。 1 將相關(guān)文件分組在一起。 2 使用有意義的文件名。

7. 評論
   代碼庫很容易與代碼聚集在一起，因此不要因過度使用注釋而使情況變得更糟。如果您有良好的命名約定并編寫沒有反模式的干凈代碼，那么您通常應(yīng)該能夠避免使用注釋。就像羅伯特·C.馬丁說“注釋本質(zhì)上并不是壞事”，但它們通常是“未能在代碼本身中表達(dá)意圖的標(biāo)志”。注釋確實在代碼中占有一席之地，它們顯示了代碼存在的原因，而不是代碼塊的工作原理，因此如果您的代碼涉及不明顯的決定或解決方法，則應(yīng)使用注釋。因此，避免反模式可以消除解釋代碼的方式的需要，并避免解釋代碼已經(jīng)表達(dá)的內(nèi)容。

以下是一些行業(yè)設(shè)置風(fēng)格指南的鏈接

Airnbnb Javascript 風(fēng)格指南。
StandardJs 風(fēng)格指南
更漂亮的默認(rèn)值
.

所以總而言之，正確格式化你的代碼不僅僅是為了美觀。它極大地提高了代碼庫的可讀性、可維護(hù)性和可擴展性，并且通過采用流行的行業(yè)標(biāo)準(zhǔn)，您可以確保代碼的一致性和干凈

以上是從混亂到清晰：格式化 React 代碼以獲得干凈可讀的代碼庫的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！