從混亂到清晰：格式化 React 程式碼以獲得乾淨可讀的程式碼庫

在開始一個新專案時，有一種在 React 開發人員中很常見的經驗。您開始對程式碼的乾淨和可讀性感到滿意，只是編寫了一些函數或元件，然後慢慢地看著您的程式碼庫陷入混亂。您發現自己從上到下、從左到右滾動，反覆重讀程式碼行，並從一個檔案移動到另一個檔案。完成某個功能後，您希望永遠不必再次開啟該文件，因為您知道找到單一函數或變數需要多長時間，更不用說編輯或更改該功能了。

在本文中，我們將研究格式化在使程式碼庫乾淨且可讀方面所扮演的角色。我們還將探索實現一致格式的行業標準和最佳實踐。

為什麼要格式化你的程式碼？

格式對於程式碼的可讀性和可維護性至關重要。但如何呢？

格式良好的程式碼有助於在視覺上分隔程式碼的不同部分，從而更容易遵循邏輯流程。正確的縮排突顯了父元件、子元件、元素或選擇器之間的關係。一致的格式可以增強您快速偵錯、修復和維護程式碼的能力。當與遵循相同格式規則的團隊成員合作時，可以更輕鬆地理解彼此的程式碼而不會混淆。

減少精神負擔是良好格式化的另一個好處。乾淨的程式碼需要更少的腦力去理解，讓您能夠更專注於解決新問題，而不是破解格式不良的程式碼區塊。

當團隊堅持一致的風格時，每個人都可以做出貢獻，而無需浪費時間重新格式化程式碼區塊以滿足個人喜好。良好的格式也為程式碼庫帶來了紀律和專業精神。

最後，工具相容性是一個顯著的優勢。開發人員使用依賴一致格式的 linter、插件和 IDE。為了充分利用這些工具並從自動完成和錯誤突出顯示等功能中受益，您的程式碼庫需要正確的格式。但如何實現這一目標呢？

格式化程式碼庫涉及什麼？

當談到格式化程式碼庫時，我們通常指幾個面向：縮排、行長、命名約定、間距、大括號和圓括號、引號的一致使用、分號的使用、檔案和資料夾結構以及適當的使用評論。現在讓我們了解如何使用和實施這些標準的行業標準。

1. 縮排
   縮排是使用空格以直覺方式將程式碼組織成層次結構。這裡的行業標準是使用 2 或 4 個空格並避免使用製表符。根據 Airbnb 的 JavaScript 和 React 風格指南，您應該使用 2 個空格。這是因為它保持了一致的嵌套層級並提高了程式碼的整體可讀性。

2. 線長度
   這裡的行長度是指您在一行上編寫的程式碼應該延伸多遠。這裡的行業標準是將一行保持在 80 到 100 個字元之間。很多指南，特別是 PEP 8 和 prettier 推薦 80 個字元。這是因為它可以防止水平滾動，並且通常在不同的螢幕尺寸上都能很好地工作。但這是否意味著在編碼時必須進行計數？不，至少當您使用像 vscode 這樣的程式碼編輯器時不會。下圖顯示如何判斷特定行上有多少個字元。下圖顯示您位於第 44 行，第 93 個字元。如果您還沒有觸及預設設置，您可以在 vsCode 編輯器的右下角找到它。

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

2. 間距
   為了清晰起見，建議在運算符周圍添加空格，特別是因為某些運算符在組合使用時會執行不同的操作。也建議使用空白行來分隔程式碼的邏輯部分。嘗試對函數宣告和邏輯進行分組並使用空行空間變數宣告和賦值。

3. 大括號與括號
   根據 Airbnb 風格指南，不應有懸空大括號，這意味著您應將所有右大括號或括號與相應的左大括號或括號正確對齊。

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

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

6. 檔案與資料夾結構
   對於文件和資料夾結構，項目大小和技術堆疊等因素主要決定文件和資料夾的結構，但有 2 個一般規則需要遵循。 1 將相關文件分組在一起。 2 使用有意義的檔案名稱。

7. 評論
   程式碼庫很容易與程式碼聚集在一起，因此不要因過度使用註解而使情況變得更糟。如果您有良好的命名約定並編寫沒有反模式的乾淨程式碼，那麼您通常應該能夠避免使用註解。就像羅伯特·C.馬丁說“註釋本質上並不是壞事”，但它們通常是“未能在代碼本身中表達意圖的標誌”。註解確實在程式碼中佔有一席之地，它們顯示了程式碼存在的原因，而不是程式碼區塊的工作原理，因此如果您的程式碼涉及不明顯的決定或解決方法，則應使用註解。因此，避免反模式可以消除解釋程式碼的方式的需要，並避免解釋程式碼已經表達的內容。

以下是一些行業設定風格指南的連結

Airnbnb Javascript 風格指南。
StandardJs 風格指南
更漂亮的預設值
.

所以總而言之，正確格式化你的程式碼不僅僅是為了美觀。它大大提高了程式碼庫的可讀性、可維護性和可擴展性，並且透過採用流行的行業標準，您可以確保程式碼的一致性和乾淨

以上是從混亂到清晰：格式化 React 程式碼以獲得乾淨可讀的程式碼庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！