如何設置與React開發的代碼

高效React開發的VS Code配置指南：提升你的編碼效率

React開發者需要一個能夠高效編寫React代碼的代碼編輯器。 VS Code的市場上有數千個免費擴展程序可以幫助你提升開發工作流程。本文將重點介紹一些擴展程序和設置，它們將把你的React編碼效率提升到專業水平。

文中列出的一些擴展程序並非React專用，但它們仍然可以提高你的效率和編碼速度。實際上，你日常編碼中只有少數幾個擴展程序真正有用。

本文列出的工具和技術可能會為你節省數小時的開發工作——這些時間原本會浪費在解決許多細小但至關重要的難題上。它們還可以幫助你減少編碼錯誤。提高生產力的關鍵在於盡可能多地自動化任務。以下擴展程序和設置將幫助你實現這個目標。

關鍵要點

• 安裝VS Code中的JavaScript語言擴展：通過提供Intellisense、代碼片段和自動導入等功能，提高React開發效率。
• 對大型項目使用TypeScript：提供類型安全並減少錯誤，對於復雜的React應用程序至關重要。記住，VS Code不包含TypeScript編譯器；請通過Node.js全局安裝一個。
• 為JSX配置Emmet：確保VS Code將.js文件識別為React文件，或將其重命名為.jsx以獲得更好的Emmet支持，從而提高HTML代碼效率。
• 使用Prettier和EditorConfig進行一致的格式化：自動執行代碼格式化，以保持React代碼庫的一致性，這對於協作項目至關重要。
• 使用ESLint進行代碼質量檢查：與VS Code集成，實時突出顯示和修復編碼錯誤，從而推廣最佳實踐和乾淨的代碼庫。
• 利用React專用擴展：諸如ES7 React/Redux/GraphQL/React-Native snippets之類的擴展程序通過提供可立即使用的代碼片段來提高編碼速度。

語言支持

首次安裝VS Code時，它會為你提供許多開箱即用的功能——例如JavaScript的語法高亮顯示以及對TypeScript和JSX代碼的支持。

以下是歡迎選項卡的快照。你始終可以在“幫助”菜單下找到它。

你需要在這裡進行初始設置。由於我們的重點是React，我們將從設置JavaScript語言擴展開始，它將為我們提供對編碼效率工作流程至關重要的附加功能。

JavaScript語言擴展

在歡迎選項卡的“工具和語言”部分，點擊JavaScript鏈接進行安裝。將出現一個重新加載提示，你應該點擊它才能使新功能生效。

JavaScript語言擴展提供多種功能，包括：

• Intellisense
• 代碼片段
• JSDoc支持
• 懸停信息
• 自動導入

這些功能的完整列表和文檔可以在VS Code文檔中找到。我強烈建議你閱讀每個功能，以便了解如何在你的開發工作流程中使用它們。

下圖是Intellisense和自動導入實際操作的示例。

按下Tab鍵時，Header組件將導入到頂部。必須輸入結束的>符號，代碼將自動完成為：。

安裝JavaScript語言功能後，VS Code可能會提示你在項目的根目錄下提供一個jsconfig.json文件。這不是必需的，但設置此文件將有助於IntelliSense提供更準確的提示。這是一個示例配置：

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

上述配置告訴JavaScript語言服務器哪些文件屬於你的源代碼，哪些文件不屬於。這確保語言服務只分析你的源代碼，因此性能很快。完整的配置已在此處記錄，解釋了可以在jsconfig.js中使用的所有可能值。

TypeScript支持

如果你打算構建大型的、複雜的React項目，強烈建議使用TypeScript。這是因為TypeScript提供類型安全，從而減少在前端應用程序中交付錯誤代碼的可能性。 VS Code通過提供許多功能（例如：）開箱即用地提供TypeScript語言支持：

• 語法和語義高亮顯示
• IntelliSense
• 代碼片段
• JS Doc支持
• 懸停信息和簽名幫助
• 格式化
• JSX和自動閉合標籤

完整的列表記錄在此處。使用TypeScript時，JSX代碼以.tsx文件擴展名編寫。編譯後，輸出將生成一個擴展名為.jsx的文件。

請注意，VS Code不提供TypeScript編譯器。你必須在全局Node.js環境中安裝一個，如下所示：

<code>npm install -g typescript</code>

或者，你可以安裝Compile Hero Pro擴展程序，它為TypeScript和許多其他語言提供編譯器，包括：

• Less
• Sass、SCSS
• Stylus
• Jade
• Pug

該擴展程序在何時以及如何編譯TypeScript和样式代碼方面提供了更多可配置的選項。如果你想了解更多關於設置React和TypeScript的信息，我建議你查看我們的另一篇文章“使用TypeScript的React：最佳實踐”，以獲得更詳細的解釋。

Flow

Flow是Facebook對TypeScript的替代方案。它提供相同的功能，但僅適用於React項目，並且不太流行。 VS Code並不原生支持它，但你可以安裝Flow Language Support擴展程序，它提供有限數量的功能，例如IntelliSense和重命名。

(以下部分內容與原文類似，但進行了措辭和句式上的調整，以達到偽原創的目的。)

按鍵映射設置

如果你要從另一個代碼編輯器遷移到VS Code，你會很高興知道你可以繼續使用你已經習慣的相同的鍵盤快捷鍵。如果你不熟悉代碼編輯器，請跳過本節。但是，如果你以前使用過代碼編輯器，你可能知道重新訓練肌肉記憶是沒有效率的，而且需要時間來調整。

在歡迎選項卡的“設置和按鍵綁定”部分，你會看到安裝Vim、Sublime、Atom和其他鍵盤快捷鍵的鏈接。如果你點擊“其他”鏈接，你將獲得可以安裝的完整按鍵映射列表。

在切換到VS Code之前，我曾經是Atom用戶。在VS Code中設置Atom的按鍵映射就像點擊Atom鏈接一樣簡單。這將為我安裝Atom Keymap擴展程序。需要在settings.json中進行以下配置，才能使VS Code更像“Atom”：

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

請閱讀你的鍵盤快捷鍵擴展程序提供的說明，了解如何設置你的快捷鍵。可以通過簡單地點擊擴展欄中的按鍵映射擴展程序來找到文檔。

Emmet JSX支持

Emmet是一個Web開發工具包，允許你更有效地編寫HTML代碼。如果你不熟悉Emmet，請查看演示以了解其工作原理。

VS Code內置了Emmet，並且已經支持JSX語法。不幸的是，大多數React入門項目都使用.js擴展名。問題在於VS Code不將此類文件識別為React代碼，因此JSX功能未激活。有兩種解決方法：

1. 將所有包含JSX代碼的文件重命名為.jsx擴展名（推薦）
2. 將VS Code配置為將所有.js文件識別為React文件。更新你的settings.json如下：

<code>npm install -g typescript</code>

要訪問settings.json，只需轉到頂部菜單選項卡，然後點擊“查看”>“命令面板”。輸入“settings”，然後選擇“首選項：打開設置（JSON）”選項。或者，你可以按Ctrl P，然後輸入“settings.json”以快速打開該文件。你也可以使用快捷鍵Ctrl ,在新選項卡中打開設置的UI版本。當你點擊第一個右上角的圖標按鈕時，它將打開settings.json。

第二個選項似乎是最簡單的途徑。不幸的是，這會導致其他JavaScript開發工具（例如eslint-config-airbnb）出現問題，該工具具有一個規則集，強制對React代碼使用.jsx文件擴展名。禁用該規則稍後會導致其他問題。

官方React團隊確實建議對React代碼使用.js擴展名。根據我的個人經驗，最好將所有包含React代碼的文件重命名為.jsx，並對包含純JavaScript代碼的文件使用.js擴展名。這樣，你就可以更輕鬆地使用所有開發工具。

格式化

編寫高質量的代碼需要你編寫一致的代碼。作為開發者，我們是人，很容易忘記我們為自己設定的標準。在本節中，我們將了解一些必不可少的工具，它們將幫助我們自動編寫一致的代碼。

EditorConfig

EditorConfig是一個簡單的配置文件，其中只包含格式化規則。你必須安裝一個擴展程序，才能讓VS Code讀取這些規則並覆蓋其自身的規則。只需按照以下步驟進行設置：

1. 安裝VS Code的EditorConfig擴展程序。請注意，這將使用.editorconfig文件中找到的設置覆蓋用戶/工作區設置。
2. 在項目的根目錄下創建一個.editorconfig文件，並複制此示例配置：

<code>{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}</code>

VS Code現在將遵守這些規則來格式化你的代碼。讓我們快速討論一下換行符。 Windows使用CRLF來指示行的終止，而基於UNIX的系統使用LF。如果你碰巧使用混合換行符的文件，在提交文件時會遇到許多問題。你可以配置Git如何處理換行符。

我更喜歡的方法是在任何平台上強制所有項目文件使用LF換行符。請注意，EditorConfig不會轉換現有文件的換行符。它只會為新文件設置LF。要轉換所有現有文件，你有兩種選擇：

• 手動進行（點擊狀態欄上的文本CRLF進行切換）
• 使用Prettier格式化所有文件

接下來讓我們看看Prettier。

Prettier

Prettier是最易於為JavaScript代碼設置的代碼格式化程序。它支持JavaScript、TypeScript、JSX、CSS、SCSS、Less和GraphQL。要進行設置，請執行以下步驟：

1. 安裝Prettier代碼格式化程序擴展程序。
2. 確保VS Code使用Prettier作為其默認格式化程序。更新settings.json如下：

<code>npm install -g typescript</code>

3. 在你的項目中安裝Prettier作為開發依賴項：npm install --save-dev prettier或yarn add -D prettier。
4. 創建.prettierrc並複制以下示例規則：

<code>// 控制提示是否显示
"atomKeymap.promptV3Features": true,

// 更改多光标鼠标绑定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打开文件夹（项目），而不会替换当前窗口
"window.openFoldersInNewWindow": "on",</code>

5. 通過將此命令添加到你的scripts部分來更新package.json：

<code>    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }</code>

對於步驟3-5，你必須為每個希望Prettier支持的項目執行此操作。你現在可以點擊VS Code上npm腳本面板下的格式化命令，如下面的屏幕截圖所示。

或者，你可以運行命令npm run format來運行Prettier。

這將導致所有文件根據Prettier的默認規則以及你在.prettierrc和.editorconfig文件中覆蓋的規則正確且一致地重新格式化。換行符也將保持一致。

你可能已經註意到，代碼格式設置現在位於三個不同的位置。你可能想知道如果我們有衝突的規則會發生什麼。激活Prettier後，它將根據以下優先級處理這些規則：

1. Prettier配置文件
2. .editorconfig
3. VS Code設置（如果存在任何其他配置，則忽略）

如果發生衝突，Prettier配置將優先。

HTML到JSX

任何真正的開發者都知道，從互聯網上的某個地方復制HTML代碼並將其粘貼到你的React代碼中是很常見的。這通常需要你將HTML屬性轉換為有效的JSX語法。幸運的是，有一個名為html to JSX的擴展程序可以為你執行轉換。安裝後，它可以輕鬆地：

• 將現有的HTML代碼轉換為JSX
• 在粘貼時將HTML代碼轉換為有效的JSX語法

這意味著諸如class之類的屬性將轉換為className。這是一個非常好的省時方法。

(其餘部分內容與原文類似，但進行了措辭和句式上的調整，以達到偽原創的目的。 保持圖片格式不變。)

以上是如何設置與React開發的代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！