代码详解：10个VSCode实践加速React开发进程

如果你是VisualStudiocode用户，喜欢用React开发项目，那么你可能遇到过这样的困境——一大堆烦人的重复代码，比如React.useState,React.useContext,React.useReducer(reducer,initialState)等等，真是让人摸不着头脑。这些单独的键分散在键盘上的各个不同方向，在你所有的React项目中，让可怜的小手指一遍又一遍地写这些字符会很烦人。如果您在键盘上键入React.useState，您的指尖将朝以下方向移动：我可能对这个简单的问题有些夸张，但我在这篇文章中的重点不是击键。今天，当我们使用React开发应用程序时，它涉及击键和许多其他事情。寸土寸金，我们应该尽量利用一切机会，减少不必要的压力，因为健康和时间都是宝贵的。为了帮助React开发者找到尽可能节省时间和精力的方法，小新整理了这份实用的方法来加快React开发进程。快来看看吧~1.Extensions:Highlightsforcustomizedwhattodo这是一个看起来很有价值和有趣的扩展，但随着时间的推移，它已经成为严肃情况下的强大工具。首先，有地方写下你的待办事项非常重要：它可以在Evernote应用程序、你的作文笔记本、一张撕碎的纸等。如果你像我一样使用TODOHighlight，那么你把-dos就在您注释的代码上方。TODOHighlight扩展非常有用，因为当您在行前加上TODO:时，待办事项会在屏幕上进行颜色编码，如下所示：但是，当您开始创建自定义关键字并为其添加颜色效果时，TODOHighlight开始的强大功能更加闪耀：这已成为一项有价值的功能，因为无论我回到哪里，我都能够快速重新集中注意力并查看每个文件中的内容。我最喜欢的TODOHighlight关键字是BUG：因为它是红色的。我们通常将红色与错误或危险的事物联系在一起，因此这很容易将我的注意力吸引到代码的关键部分：2.Extensions:ES7React/Redux/GraphQL/ReactNativesnippets这将对你很有帮助。我个人不再使用它，因为我使用自己的片段。但在过去，它对我的??开发工作流程产生了巨大的积极影响。3.快捷方式：在项目中查找文件在查找特定文件时不得不一直使用文件资源管理器可能会非常令人沮丧。这在分析node_modules目录中的文件时成为一个巨大的问题，因为VSCode执行以下操作：红线表示还有多少内容需要滚动，蓝色表示滚动条的大小（随着内容的增长而缩小）.这会影响缩放时的性能。通过搜索项目名称，您无需移动鼠标一毫米，即可轻松找到并打开位于项目中任何位置的文件。只需按Ctrl+T，输入文件名。完成的。4.扩展+封装：TypeScript+ESLint大约四年前，当Promises正式进入ECMAScript2015规范时，React生态系统蓬勃发展，这项革命性的技术改变了当今Web应用程序的开发方式。此时，TypeScript就是其中之一，它正在进入React生态系统，并逐渐在社区中得到广泛采用。有充分的理由！TypeScript是一个非常强大的工具，可以让你在潜在的错误发生之前节省大量的时间和精力。除了它通常提供的功能外，它还有助于记录React组件，防止将来出现错误，并教你很多关于JavaScript语言本身的知识，而无需花一分钱在电子书上学习语言中的奇怪东西。在React项目中采用TypeScript和ESLint将有助于我们忽略React如何工作的情况：5.扩展：VisualStudio市场中用于开发React应用程序的任何酷炫主题和酷炫的VSCode颜色主题都是让我继续前进的关键娱乐资产，从而提高代码质量。使用自己喜欢的主题非常重要，因为React组件的颜色代码具有特定的外观或感觉，这将帮助您更轻松地开发React应用程序，如下：non-components:components:6.extensions:prettierifyou使用不漂亮，那我求求你放下一切并使用它。7.特征：面包屑天哪，时间过得真快。感觉就像我昨天用VScode发布了Breadcrumbs。这让我在开发React时更轻松，即使是在我最不期望的时候。鉴于React的组件子/父层次结构的性质，在React中开发时这恰好很好（只要目录结构是根据层次结构构建的），因为它基本上表明组件文件是从父目录派生的（在大多数情况下，父目录始终是从index.tsx文件导出的默认目录）：上面的面包屑显示Add是Birthdays的子级，这是管理组件中的一个路由。默认情况下启用面包屑。但关键是不要将面包屑功能视为理所当然。它会以意想不到的方式悄悄地变得有帮助，所以要多加注意。8.Scaling:UserSnippets随着React的发展，我们见证了许多伟大的事情发生，用户片段就是其中之一。这个方便的VSCode扩展允许定义您自己的自定义代码片段，您可以通过按几个字母在整个项目中无限次重复使用这些代码片段。我在一家平台基于React构建的公司工作，让我感到惊讶的是，有些人在使用React进行开发时并不知道这个特性。那么它有什么作用呢？使用此功能，您可以创建任何自定义代码片段，只需键入几个字母（使用自定义前缀声明）即可在代码顶部生成这些片段。例如，当我们创建一个将使用React.usereducerAPI的新组件时，我们可能需要声明一个初始状态、一个reducer函数，以及类似[state,dispatch]=React.useReducer(reducer,initialState)的东西，至少要让它发生：constinitialState={//}functionreducer(state=initialState,action){switch(action.type){default:returnstate}}functionMyComponent(){const[state,dispatch]=React.useReducer(reducer,initialState)return