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

[[314853]]

這些單獨的鍵分散在鍵盤上的各個不同方向，讓可憐的小手指在所有的React項目中一遍又一遍地寫下這些字符會讓人惱火。

如果在鍵盤上鍵入React.useState，指尖將朝以下方向移動：

對于這個簡單的問題，我可能表現得過于夸張了，但我在這篇文章中的重點不是按鍵。

今天，當我們使用React開發應用程序時，它涉及到擊鍵和許多其他事情。

一寸光陰一寸金，我們應該盡可能地利用所有的機會來減輕不必要的壓力，因為健康和時間是寶貴的。

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

快來看看吧~

1. 擴展：自定義要做的突出顯示

這是一個看起來很有價值又好玩的擴展，但隨著時間的推移在嚴肅場合下，它已成為一個很強大的工具。

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

如果你像我一樣使用TODO Highlight，那么你就把to-dos放在你注釋的代碼的正上方。TODOHighlight擴展非常有用，因為在TODO:前面加上一行時，to dos會在屏幕上變成彩色編碼，如下所示：

但是，當你開始創建自定義關鍵字并為它們添加顏色效果時，TODO Highlight的力量開始更加閃耀：

這已經成為一個有價值的特性，因為我能夠快速地重新獲得焦點，并了解每個文件中的內容，無論我返回到哪里。

我最喜歡的TODO Highlight關鍵字是BUG:因為它是紅色的。我們通常將紅色與錯誤或危險的東西聯系起來，所以這很容易引起我對代碼關鍵部分的注意：

2. 擴展：ES7 React/Redux/GraphQL/React Native snippets

這對你會很有幫助的。

我個人不再用這個了，因為我用自己的片段。但在過去，它對我的開發工作流程產生了巨大的積極影響。

3. 快捷方式：在項目中查找文件

當你在尋找一個特定的文件時，必須一直使用文件資源管理器，這很容易讓人沮喪。當要分析node_modules目錄中的文件時，這將成為一個巨大的問題，因為VSCode會執行以下操作：

紅線表示還有多少內容要滾動，藍色表示滾動條的大小(隨著內容的增多而縮小)。這會影響擴展時的性能。

通過搜索項目名稱，你可以輕松找到并打開位于項目中任何位置的文件，而無需移動鼠標上的一毫米。

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

4. 擴展+包：TypeScript+ESLint

大約四年前，當Promises正式進入ECMAScript 2015規范時，React生態系統蓬勃發展，革命性的技術改變了今天開發Web應用程序的方式。

在這個時候，TypeScript就是其中之一，因為它正在進入React生態系統，并逐漸在社區中被廣泛采用。有充分的理由!

TypeScript是一個非常強大的工具，它允許你在潛在的錯誤發生之前節省大量的時間和精力

除了通常提供的功能外，它還幫助記錄React組件，防止將來出現錯誤，并教會你很多關于JavaScript語言本身的知識，而無需花一分錢在電子書上學習該語言中的怪異內容。

在react項目中采用帶有ESLint的TypeScript將在我們忽視react工作原理的情況下提供幫助：

5. 擴展：Visual Studio市場中任何酷的主題

開發React應用程序和一個酷的VSCode顏色主題是讓我保持娛樂性的關鍵資產，從而產生更好的代碼質量。

使用喜歡的主題非常重要，因為React組件的顏色代碼有特定的外觀或感覺，這將幫助你更輕松地開發React應用程序，如下所示：

非組件：

組件：

6. 擴展：更漂亮

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

7. 特點：面包屑導航(Breadcrumbs)

天哪，時間過得真快。感覺就像昨天用VScode發布Breadcrumbs一樣。

這讓我在開發React時更加輕松，即使是在我最不希望的時候。考慮到React的組件子/父層次結構的性質，在React中開發時(只要根據層次結構構建了目錄結構)，這種情況恰好很好，因為它基本上表明組件文件是從父目錄派生的(在大多數情況下，父目錄總是從index.tsx文件導出的默認值)：

上面的Breadcrumbs顯示Add是Birthdays的子級，這是管理組件中的一個路由。

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

8. 擴展：用戶代碼段

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

這個方便的VSCode擴展允許定義自己的自定義代碼片段，你可以通過按幾個字母在整個項目中重復使用無限次。

我在一個平臺是依靠React建立起來的公司工作，讓我吃驚的是，在用React做開發時有一些人并不知道這一特性。

那它有什么作用呢?

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

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

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> 
  ) 
}