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

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

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

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

關(guān)鍵要點(diǎn)

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

語(yǔ)言支持

首次安裝VS Code時(shí)，它會(huì)為你提供許多開(kāi)箱即用的功能——例如JavaScript的語(yǔ)法高亮顯示以及對(duì)TypeScript和JSX代碼的支持。

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

你需要在這裡進(jìn)行初始設(shè)置。由於我們的重點(diǎn)是React，我們將從設(shè)置JavaScript語(yǔ)言擴(kuò)展開(kāi)始，它將為我們提供對(duì)編碼效率工作流程至關(guān)重要的附加功能。

JavaScript語(yǔ)言擴(kuò)展

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

JavaScript語(yǔ)言擴(kuò)展提供多種功能，包括：

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

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

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

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

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

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

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

TypeScript支持

如果你打算構(gòu)建大型的、複雜的React項(xiàng)目，強(qiáng)烈建議使用TypeScript。這是因?yàn)門(mén)ypeScript提供類(lèi)型安全，從而減少在前端應(yīng)用程序中交付錯(cuò)誤代碼的可能性。 VS Code通過(guò)提供許多功能（例如：）開(kāi)箱即用地提供TypeScript語(yǔ)言支持：

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

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

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

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

或者，你可以安裝Compile Hero Pro擴(kuò)展程序，它為T(mén)ypeScript和許多其他語(yǔ)言提供編譯器，包括：

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

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

Flow

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

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

按鍵映射設(shè)置

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

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

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

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

請(qǐng)閱讀你的鍵盤(pán)快捷鍵擴(kuò)展程序提供的說(shuō)明，了解如何設(shè)置你的快捷鍵?？梢酝ㄟ^(guò)簡(jiǎn)單地點(diǎn)擊擴(kuò)展欄中的按鍵映射擴(kuò)展程序來(lái)找到文檔。

Emmet JSX支持

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

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

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

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

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

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

官方React團(tuán)隊(duì)確實(shí)建議對(duì)React代碼使用.js擴(kuò)展名。根據(jù)我的個(gè)人經(jīng)驗(yàn)，最好將所有包含React代碼的文件重命名為.jsx，並對(duì)包含純JavaScript代碼的文件使用.js擴(kuò)展名。這樣，你就可以更輕鬆地使用所有開(kāi)發(fā)工具。

格式化

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

EditorConfig

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

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

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

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

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

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

接下來(lái)讓我們看看Prettier。

Prettier

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

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

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

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

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

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

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

5. 通過(guò)將此命令添加到你的scripts部分來(lái)更新package.json：

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

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

或者，你可以運(yùn)行命令npm run format來(lái)運(yùn)行Prettier。

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

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

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

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

HTML到JSX

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

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

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

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

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