如果你是一個(gè)Visual Studio代碼用戶，并且喜歡用React開(kāi)發(fā)項(xiàng)目，那么你可能曾遇到這樣的困境——大量煩人的重復(fù)代碼，如React.useState、React.useContext、React.useReducer(reducer、initialState)等等，著實(shí)令人頭大。

[[314853]]

這些單獨(dú)的鍵分散在鍵盤(pán)上的各個(gè)不同方向，讓可憐的小手指在所有的React項(xiàng)目中一遍又一遍地寫(xiě)下這些字符會(huì)讓人惱火。

如果在鍵盤(pán)上鍵入React.useState，指尖將朝以下方向移動(dòng)：

對(duì)于這個(gè)簡(jiǎn)單的問(wèn)題，我可能表現(xiàn)得過(guò)于夸張了，但我在這篇文章中的重點(diǎn)不是按鍵。

今天，當(dāng)我們使用React開(kāi)發(fā)應(yīng)用程序時(shí)，它涉及到擊鍵和許多其他事情。

一寸光陰一寸金，我們應(yīng)該盡可能地利用所有的機(jī)會(huì)來(lái)減輕不必要的壓力，因?yàn)榻】岛蜁r(shí)間是寶貴的。

為了幫助React開(kāi)發(fā)人員找到盡可能多地節(jié)省時(shí)間和精力的方法，小芯整理了這篇加快React開(kāi)發(fā)流程的實(shí)用方法。

快來(lái)看看吧~

1. 擴(kuò)展：自定義要做的突出顯示

這是一個(gè)看起來(lái)很有價(jià)值又好玩的擴(kuò)展，但隨著時(shí)間的推移在嚴(yán)肅場(chǎng)合下，它已成為一個(gè)很強(qiáng)大的工具。

首先，在某個(gè)地方寫(xiě)下待辦事項(xiàng)是非常重要的：它可以出現(xiàn)在Evernote應(yīng)用程序、你的作文本、一張撕破的紙上等等。

如果你像我一樣使用TODO Highlight，那么你就把to-dos放在你注釋的代碼的正上方。TODOHighlight擴(kuò)展非常有用，因?yàn)樵赥ODO:前面加上一行時(shí)，to dos會(huì)在屏幕上變成彩色編碼，如下所示：

但是，當(dāng)你開(kāi)始創(chuàng)建自定義關(guān)鍵字并為它們添加顏色效果時(shí)，TODO Highlight的力量開(kāi)始更加閃耀：

這已經(jīng)成為一個(gè)有價(jià)值的特性，因?yàn)槲夷軌蚩焖俚刂匦芦@得焦點(diǎn)，并了解每個(gè)文件中的內(nèi)容，無(wú)論我返回到哪里。

我最喜歡的TODO Highlight關(guān)鍵字是BUG:因?yàn)樗羌t色的。我們通常將紅色與錯(cuò)誤或危險(xiǎn)的東西聯(lián)系起來(lái)，所以這很容易引起我對(duì)代碼關(guān)鍵部分的注意：

2. 擴(kuò)展：ES7 React/Redux/GraphQL/React Native snippets

這對(duì)你會(huì)很有幫助的。

我個(gè)人不再用這個(gè)了，因?yàn)槲矣米约旱钠?。但在過(guò)去，它對(duì)我的開(kāi)發(fā)工作流程產(chǎn)生了巨大的積極影響。

3. 快捷方式：在項(xiàng)目中查找文件

當(dāng)你在尋找一個(gè)特定的文件時(shí)，必須一直使用文件資源管理器，這很容易讓人沮喪。當(dāng)要分析node_modules目錄中的文件時(shí)，這將成為一個(gè)巨大的問(wèn)題，因?yàn)閂SCode會(huì)執(zhí)行以下操作：

紅線表示還有多少內(nèi)容要滾動(dòng)，藍(lán)色表示滾動(dòng)條的大小(隨著內(nèi)容的增多而縮小)。這會(huì)影響擴(kuò)展時(shí)的性能。

通過(guò)搜索項(xiàng)目名稱(chēng)，你可以輕松找到并打開(kāi)位于項(xiàng)目中任何位置的文件，而無(wú)需移動(dòng)鼠標(biāo)上的一毫米。

只需按Ctrl+T，輸入文件名。完成了。

4. 擴(kuò)展+包：TypeScript+ESLint

大約四年前，當(dāng)Promises正式進(jìn)入ECMAScript 2015規(guī)范時(shí)，React生態(tài)系統(tǒng)蓬勃發(fā)展，革命性的技術(shù)改變了今天開(kāi)發(fā)Web應(yīng)用程序的方式。

在這個(gè)時(shí)候，TypeScript就是其中之一，因?yàn)樗谶M(jìn)入React生態(tài)系統(tǒng)，并逐漸在社區(qū)中被廣泛采用。有充分的理由!

TypeScript是一個(gè)非常強(qiáng)大的工具，它允許你在潛在的錯(cuò)誤發(fā)生之前節(jié)省大量的時(shí)間和精力

除了通常提供的功能外，它還幫助記錄React組件，防止將來(lái)出現(xiàn)錯(cuò)誤，并教會(huì)你很多關(guān)于JavaScript語(yǔ)言本身的知識(shí)，而無(wú)需花一分錢(qián)在電子書(shū)上學(xué)習(xí)該語(yǔ)言中的怪異內(nèi)容。

在react項(xiàng)目中采用帶有ESLint的TypeScript將在我們忽視r(shí)eact工作原理的情況下提供幫助：

5. 擴(kuò)展：Visual Studio市場(chǎng)中任何酷的主題

開(kāi)發(fā)React應(yīng)用程序和一個(gè)酷的VSCode顏色主題是讓我保持娛樂(lè)性的關(guān)鍵資產(chǎn)，從而產(chǎn)生更好的代碼質(zhì)量。

使用喜歡的主題非常重要，因?yàn)镽eact組件的顏色代碼有特定的外觀或感覺(jué)，這將幫助你更輕松地開(kāi)發(fā)React應(yīng)用程序，如下所示：

非組件：

組件：

6. 擴(kuò)展：更漂亮

如果你用的不是更漂亮的，那么請(qǐng)求你放下一切，使用它。

7. 特點(diǎn)：面包屑導(dǎo)航(Breadcrumbs)

天哪，時(shí)間過(guò)得真快。感覺(jué)就像昨天用VScode發(fā)布Breadcrumbs一樣。

這讓我在開(kāi)發(fā)React時(shí)更加輕松，即使是在我最不希望的時(shí)候?？紤]到React的組件子/父層次結(jié)構(gòu)的性質(zhì)，在React中開(kāi)發(fā)時(shí)(只要根據(jù)層次結(jié)構(gòu)構(gòu)建了目錄結(jié)構(gòu))，這種情況恰好很好，因?yàn)樗旧媳砻鹘M件文件是從父目錄派生的(在大多數(shù)情況下，父目錄總是從index.tsx文件導(dǎo)出的默認(rèn)值)：

上面的Breadcrumbs顯示Add是Birthdays的子級(jí)，這是管理組件中的一個(gè)路由。

默認(rèn)情況下，Breadcrumbs已啟用。但關(guān)鍵是不要想當(dāng)然地使用Breadcrumbs特性。它會(huì)以意想不到的方式悄無(wú)聲息地變得有幫助，所以把更多的注意力放在它上面吧。

8. 擴(kuò)展：用戶代碼段

隨著React的發(fā)展，我們見(jiàn)證了許多偉大的事情發(fā)生，用戶代碼片段就是其中之一。

這個(gè)方便的VSCode擴(kuò)展允許定義自己的自定義代碼片段，你可以通過(guò)按幾個(gè)字母在整個(gè)項(xiàng)目中重復(fù)使用無(wú)限次。

我在一個(gè)平臺(tái)是依靠React建立起來(lái)的公司工作，讓我吃驚的是，在用React做開(kāi)發(fā)時(shí)有一些人并不知道這一特性。

那它有什么作用呢?

通過(guò)此功能，你可以創(chuàng)建任何自定義代碼片段，只需鍵入幾個(gè)字母(使用自定義前綴聲明)即可在代碼頂部生成這些代碼片段。

例如，當(dāng)我們創(chuàng)建一個(gè)將使用React.use reducer API的新組件時(shí)，可能需要聲明一個(gè)初始狀態(tài)、一個(gè)reducer函數(shù)，以及像[state，dispatch]=React.useReducer(reducer，initialState)這樣的東西，至少要使它發(fā)生：

const initialState ={ 
  // 
}function reducer(state = initialState, action) { 
  switch (action.type) { 
    default: 
      return state 
  } 
}function MyComponent() { 
  const [state, dispatch] =React.useReducer(reducer, initialState) return <div /> 
} 

{ 
   "my React.useReducer snippet": { 
    "prefix": "rsr", 
    "body": [ 
      "const initialState =  {", 
      "  //$1", 
      "}", 
      "", 
      "function reducer(state =  initialState, action) {", 
      "  switch (action.type) {", 
      "    default:", 
      "      return state", 
      "  }", 
      "}", 
      "", 
      "function MyComponent()  {", 
      "  const [state, dispatch] =  React.useReducer(reducer, initialState)", 
      "  ", 
      "  return <div />", 
      "}" 
    ] 
   } 
} 

{ 
  "border test": { 
    "prefix": "b1", 
    "body": "border: 1pxsolid red;" 
  }, 
  "border test2": { 
    "prefix": "b2", 
    "body": "border: 1pxsolid green;" 
  }, 
  "border test3": { 
    "prefix": "b3", 
    "body": "border: 1pxsolid magenta;" 
  }, 
  "border test4": { 
    "prefix": "b4", 
    "body": "border: 1pxsolid blue;" 
  }, 
  "border test5": { 
    "prefix": "b5", 
    "body": "border: 1px solid#fe7200;" 
  } 
} 

{ 
  "import Button from'components/Button'": { 
    "prefix": "btt", 
    "body": "import Buttonfrom 'components/Button'" 
  } 
} 

{ 
  "beforeEach(() => {})": { 
    "prefix": "bfe", 
    "body":["beforeEach(() => {", " $1", "})"] 
  } 
} 

{ 
  "// @ts-ignore": { 
    "prefix": "tsg", 
    "body": "//@ts-ignore" 
  }, 
  "eslint disable line": { 
    "prefix": "eds", 
    "body": "//eslint-disable-line" 
  } 
} 

{ 
  "import react": { 
    "prefix": "reaa", 
    "body": "import Reactfrom 'react'" 
  } 
} 

import React from'react'function App() { 
  return <h2>Usefulcontent</h2> 
}function Root() { 
  return ( 
    <App> 
      <p>Will I even berendered?</p> 
    </App> 
  ) 
}