VSCode 中的 10 个实践，加速你的 React 开发流程

在Medium上找到我

如果您是 Visual Studio Code 用户并且喜欢在 React 中开发项目，那么您可能已经遇到过大量烦人的重复代码，例如React.useState、、等等React.useContext。React.useReducer(reducer, initialState)

这些单独的键分散在键盘上的各个方向，如果我们可怜的小手指在所有 React 项目中一遍又一遍地写这些字符，就会变得很烦人。

如果您在键盘上打字React.useState，您的指尖将朝以下方向移动：

我可能对这个简单的问题有些夸张，但我写这篇文章的目的并非关于按键，而是关于我们今天使用 React 开发应用时按键以及许多其他方面的问题。我认识到，我们应该尽可能利用所有可用的机会来减轻不必要的压力，因为我们的健康和时间非常宝贵。

话虽如此，我想花点时间写这篇文章来帮助像你我这样的 React 开发人员找到尽可能节省时间和精力的方法，通过告诉你一些有用的方法来加快你的 React 开发流程！

1.扩展：用户代码片段

作为 React 开发人员，我见证了其历史上发生的许多伟大的事情，而用户片段就是其中之一。

这个方便的 VSCode 扩展允许您定义自己的自定义代码片段，只需按几个字母即可在整个项目中无限次重复使用这些代码片段。

我所在的公司正在使用 React 构建他们的平台，令我惊讶的是，有些人使用 React 进行开发却不知道这个功能的存在。

那么它有什么作用呢？

此功能允许您创建任何自定义代码片段，只需输入几个字母（使用自定义前缀声明）即可在代码顶部生成该代码片段。

例如，当我们创建一个将要使用React.useReducerAPI 的新组件时，我们可能必须声明一个初始状态、一个 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 />",
      "}"
    ]
  }
}

您只需按下rsr，系统就会自动为您写出此代码：

以下是我在 React 项目中使用的一些常见代码片段：

通过为 CSS 元素添加临时边框来快速测试它们是否正确：

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

我通常在每个项目中都有一个components包含通用原始组件的文件夹Button，例如：

{
  "import Button from 'components/Button'": {
    "prefix": "btt",
    "body": "import Button from '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 React from 'react'"
  }
}

这不是我使用的片段的完整列表，但我希望它能让您了解利用用户片段可以节省多少时间和精力。

奖励：使用Project Snippets将其提升到一个新的水平，VSCode 除了在工作区级别提供相同的功能。

2.扩展：Prettier

如果您还没有使用 Prettier，那么我恳求您放下一切并使用它。

3.扩展+包：TypeScript+ESLint

大约四年前，当 Promises 正式进入ECMAScript 2015 规范时，React 生态系统正蓬勃发展，革命性的技术改变了我们今天开发 Web 应用程序的方式。

当时 TypeScript 就是其中之一，它正在进入 React 生态系统，并逐渐被社区广泛采用——而且理由充分！

TypeScript 是一个非常强大的工具，它可以让你在潜在的错误发生之前节省大量的时间和精力。

除了它通常提供的功能之外，它还可以帮助记录您的反应组件，防止将来发生错误，并教您很多有关 JavaScript 语言本身的知识，而无需您花一分钱购买电子书来学习该语言中的奇怪内容。

在你的 React 项目中采用 TypeScript 和 ESLint 将有助于你在不了解 React 如何工作的情况下：

4. 快捷方式：复制行上/下

Ctrl + D将会节省你很多时间。

5. 快捷方式：查找当前文件中的所有匹配项

在文件中突出显示您选择的关键字，然后按下Ctrl + Shift + L将选择该关键字的所有出现位置。

当您想要重命名组件时这很有用，因为显然当组件有子组件时我们总是至少会出现三次：

import React from 'react'

function App() {
  return <h2>Useful content</h2>
}

function Root() {
  return (
    <App>
      <p>Will I even be rendered?</p>
    </App>
  )
}

如果我们想重命名App为其他名称，我们必须选择组件声明以及Root渲染块中的两个出现。

6. 快捷方式：在项目中查找文件

当你查找特定文件时，总是使用文件资源管理器很容易让人感到沮丧。当你想分析node_modules目录中的文件时，这会成为一个大问题，因为 VSCode 会帮你这样做：

红线表示剩余内容量，蓝线表示滚动条的大小，内容越多，滚动条越小。这会影响滚动条展开时的性能。

您可以通过搜索文件名称轻松找到并打开位于项目中任何位置的文件，而无需移动鼠标一毫米。

只需按下Ctrl + T，输入文件名即可完成。

7.扩展：自定义TODO高亮

这个扩展可能看起来很有价值，但随着时间的推移，它在严肃的环境中对我来说已经成为一个非常强大的工具。

首先，把待办事项写在某个地方，只要你能随时想起，就非常重要。它可以是 Evernote 应用、作文簿、撕碎的纸片等等。如果你像我一样使用TODO 高亮功能，就可以把待办事项直接放在你正在注释的代码上方。它与TODO 高亮扩展TODO:程序配合使用非常有用，因为当你在一行代码前面加上类似下面的前缀时，它们会在屏幕上以颜色编码显示：