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

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

文中列出的一些擴展程序并非React專用，但它們?nèi)匀豢梢蕴岣吣愕男屎途幋a速度。實際上，你日常編碼中只有少數(shù)幾個擴展程序真正有用。

本文列出的工具和技術(shù)可能會為你節(jié)省數(shù)小時的開發(fā)工作——這些時間原本會浪費在解決許多細(xì)小但至關(guān)重要的難題上。它們還可以幫助你減少編碼錯誤。提高生產(chǎn)力的關(guān)鍵在于盡可能多地自動化任務(wù)。以下擴展程序和設(shè)置將幫助你實現(xiàn)這個目標(biāo)。

關(guān)鍵要點

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

語言支持

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

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

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

JavaScript語言擴展

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

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

• Intellisense
• 代碼片段
• JSDoc支持
• 懸停信息
• 自動導(dǎo)入

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

下圖是Intellisense和自動導(dǎo)入實際操作的示例。

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

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

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

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

TypeScript支持

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

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

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

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

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

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

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

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

Flow

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

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

按鍵映射設(shè)置

如果你要從另一個代碼編輯器遷移到VS Code，你會很高興知道你可以繼續(xù)使用你已經(jīng)習(xí)慣的相同的鍵盤快捷鍵。如果你不熟悉代碼編輯器，請?zhí)^本節(jié)。但是，如果你以前使用過代碼編輯器，你可能知道重新訓(xùn)練肌肉記憶是沒有效率的，而且需要時間來調(diào)整。

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

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

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

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

Emmet JSX支持

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

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

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

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

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

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

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

格式化

編寫高質(zhì)量的代碼需要你編寫一致的代碼。作為開發(fā)者，我們是人，很容易忘記我們?yōu)樽约涸O(shè)定的標(biāo)準(zhǔn)。在本節(jié)中，我們將了解一些必不可少的工具，它們將幫助我們自動編寫一致的代碼。

EditorConfig

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

1. 安裝VS Code的EditorConfig擴展程序。請注意，這將使用.editorconfig文件中找到的設(shè)置覆蓋用戶/工作區(qū)設(shè)置。
2. 在項目的根目錄下創(chuàng)建一個.editorconfig文件，并復(fù)制此示例配置：

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

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

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

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

接下來讓我們看看Prettier。

Prettier

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

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

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

3. 在你的項目中安裝Prettier作為開發(fā)依賴項：npm install --save-dev prettier或yarn add -D prettier。
4. 創(chuàng)建.prettierrc并復(fù)制以下示例規(guī)則：

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

// 更改多光標(biāo)鼠標(biāo)綁定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打開文件夾（項目），而不會替換當(dāng)前窗口
"window.openFoldersInNewWindow": "on",</code>

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

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

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

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

這將導(dǎo)致所有文件根據(jù)Prettier的默認(rèn)規(guī)則以及你在.prettierrc和.editorconfig文件中覆蓋的規(guī)則正確且一致地重新格式化。換行符也將保持一致。

你可能已經(jīng)注意到，代碼格式設(shè)置現(xiàn)在位于三個不同的位置。你可能想知道如果我們有沖突的規(guī)則會發(fā)生什么。激活Prettier后，它將根據(jù)以下優(yōu)先級處理這些規(guī)則：

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

如果發(fā)生沖突，Prettier配置將優(yōu)先。

HTML到JSX

任何真正的開發(fā)者都知道，從互聯(lián)網(wǎng)上的某個地方復(fù)制HTML代碼并將其粘貼到你的React代碼中是很常見的。這通常需要你將HTML屬性轉(zhuǎn)換為有效的JSX語法。幸運的是，有一個名為html to JSX的擴展程序可以為你執(zhí)行轉(zhuǎn)換。安裝后，它可以輕松地：

• 將現(xiàn)有的HTML代碼轉(zhuǎn)換為JSX
• 在粘貼時將HTML代碼轉(zhuǎn)換為有效的JSX語法

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

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

以上是如何設(shè)置與React開發(fā)的代碼的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！