作為React開發人員，您工作中最大的改進就是花費最少的時間來學習。今天就努力應用這些技巧，我保證你將在日常編碼中節省許多繁瑣的工作，並且享受React的更多樂趣。

1.厭倦了為每個JSX元素編寫結束標記？使用Emmet。

作為一個React開發人員，您編寫了許多JSX元素，其中大多數包含一個開啟和關閉標籤。

如果您沒有在React中設定Emmet，則必須為每個元素手動編寫這兩個標籤。更好的方法是使用一個名為Emmet的工具，該工具會在您建立開始標籤時自動建立結束標籤。

在VSCode中使用React設定Emmet：

轉到程式碼（在螢幕的頂部），然後首選項，然後設定在VSCode在左側的選項中，選擇擴充套件，然後選擇Emmet滾動到“包含語言”部分，在專案輸入中新增javascript，然後在值輸入中新增javascriptreact，然後點選“新增專案”

就像那樣，Emmet使您的編碼速度提高了100％：

​

2.厭倦了手工格式化程式碼？使用更漂亮。

您是否可以計算程式碼未對齊的次數，以便嘗試自己調整間距？我什至不想考慮我花了多少時間來格式化自己的程式碼！

如果您仍在嘗試手動設定程式碼格式，則需要Prettier。

漂亮的名稱恰當地命名為：它將未對齊的程式碼轉換為更漂亮的格式化版本。

這是設定Prettier以便在VSCode中的所有專案中使用的方法：

依次轉到“程式碼”，“首選項”和“擴充套件”在搜尋輸入中搜索更漂亮的內容，然後按Enter（它應該是第一個出現）選擇副檔名，然後點選“安裝”（可能需要重新載入以應用副檔名）依次轉到“程式碼”，“首選項”和“設定”搜尋“儲存時格式化”，然後選中“儲存時格式化”選項旁邊的複選框

現在，每次儲存時，您編寫的所有程式碼都將被完美格式化：

​

3.你是否需要寫出你使用React片段編寫的每個元件？

通常，在React和JavaScript專案中建立很多東西需要很多樣板。每次編寫元件時，您都必須鍵入它的每個部分-匯入React，建立一個函式，然後從檔案中匯出它。

您是否對執行此操作感到厭倦？大家都這樣做。這就是存在React的片段的原因。

為了避免一次又一次地編寫相同程式碼的所有額外工作，請使用React程式碼段。程式碼段使您可以使用鍵盤快捷鍵立即編寫React程式碼的每個部分，而不必手動將其全部鍵入。

例如，import React from 'react'您無需書寫，而只需書寫imr並按Tab鍵即可立即建立相同的內容。摘錄是一個巨大的節省時間。

以下是在VSCode中使用React程式碼段的方法：

依次轉到“程式碼”，“設定”和“擴充套件程式”搜尋React程式碼段。有很多不錯的程式碼片段擴充套件可供選擇。安裝了程式碼片段擴充套件後，請檢視可用的快捷方式並將最合適的快捷方式寫下來。當您鍵入快捷方式時，等待該建議出現在您的程式碼編輯器中，然後單擊Tab（如果您希望使用其他快捷方式，可以在列表中箭頭導航）

您會以如此快的速度製造元件而感到震驚：

​

4.是否手動匯入所有元件？請改用自動匯入。

建立React應用程式中最繁瑣的事情之一就是從其他檔案匯入包和元件。

這是非常重複的操作，並且可能需要大量的精力才能手動匯入每件事（加上在輸入錯誤時進行更正）。

不必記住，查詢和手動匯入元件和包，而讓程式碼編輯器為您完成。您可以透過按Tab鍵選擇要匯入的內容來自動匯入任何內容。

以下是在VSCode中自動匯入包和元件的方法：

依次轉到“程式碼”，“首選項”和“設定”搜尋自動匯入，並確保選中“啟用自動匯入”複選框返回專案，輸入要匯入的名稱，在編輯器建議的選項中箭頭，然後按Tab即可立即為其建立匯入語句。

使用自動匯入時，它使任何規模的工作專案都變得更加容易，因為您不再花費一半的時間來編寫匯入語句。

​

轉到檢視，然後選擇命令面板。搜尋組織匯入並將其選中。現在應該組織您的匯入，並刪除所有未使用的匯入。

請注意，您也可以使用鍵盤快捷鍵command/control + shift + o。

​