作为React开发人员，您工作中最大的改进就是花费最少的时间来学习。今天就努力应用这些技巧，我保证你将在日常编码中节省许多繁琐的工作，并且享受React的更多乐趣。
1.厌倦了为每个JSX元素编写结束标记？使用Emmet。
作为一个React开发人员，您编写了许多JSX元素，其中大多数包含一个打开和关闭标签。
如果您没有在React中设置Emmet，则必须为每个元素手动编写这两个标签。更好的方法是使用一个名为Emmet的工具，该工具会在您创建开始标签时自动创建结束标签。
在VSCode中使用React设置Emmet：
- 转到代码（在屏幕的顶部），然后首选项，然后设置在VSCode
- 在左侧的选项中，选择扩展，然后选择Emmet
- 滚动到“包含语言”部分，在项目输入中添加javascript，然后在值输入中添加javascriptreact，然后点击“添加项目”
就像那样，Emmet使您的编码速度提高了100％：
2.厌倦了手工格式化代码？使用更漂亮。
您是否可以计算代码未对齐的次数，以便尝试自己调整间距？我什至不想考虑我花了多少时间来格式化自己的代码！
如果您仍在尝试手动设置代码格式，则需要Prettier。
漂亮的名称恰当地命名为：它将未对齐的代码转换为更漂亮的格式化版本。
Prettier可以作为devDependency用于单个JavaScript项目，也可以通过Prettier VSCode扩展在所有项目中使用它。使用VSCode扩展的好处是，每次您点击保存时，您都可以自动格式化JavaScript代码。
这是设置Prettier以便在VSCode中的所有项目中使用的方法：
- 依次转到“代码”，“首选项”和“扩展”
- 在搜索输入中搜索更漂亮的内容，然后按Enter（它应该是第一个出现）
- 选择扩展名，然后点击“安装”（可能需要重新加载以应用扩展名）
- 依次转到“代码”，“首选项”和“设置”
- 搜索“保存时格式化”，然后选中“保存时格式化”选项旁边的复选框
现在，每次保存时，您编写的所有代码都将被完美格式化：
3.你是否需要写出你使用React片段编写的每个组件？
通常，在React和JavaScript项目中创建很多东西需要很多样板。每次编写组件时，您都必须键入它的每个部分-导入React，创建一个函数，然后从文件中导出它。
您是否对执行此操作感到厌倦？大家都这样做。这就是存在React的片段的原因。
为了避免一次又一次地编写相同代码的所有额外工作，请使用React代码段。代码段使您可以使用键盘快捷键立即编写React代码的每个部分，而不必手动将其全部键入。
例如，import React from 'react'您无需书写，而只需书写imr并按Tab键即可立即创建相同的内容。摘录是一个巨大的节省时间。
以下是在VSCode中使用React代码段的方法：
- 依次转到“代码”，“设置”和“扩展程序”
- 搜索React代码段。有很多不错的代码片段扩展可供选择。
- 安装了代码片段扩展后，请查看可用的快捷方式并将最合适的快捷方式写下来。
- 当您键入快捷方式时，等待该建议出现在您的代码编辑器中，然后单击Tab（如果您希望使用其他快捷方式，可以在列表中箭头导航）
您会以如此快的速度制造组件而感到震惊：
4.是否手动导入所有组件？请改用自动导入。
创建React应用程序中最繁琐的事情之一就是从其他文件导入包和组件。
这是非常重复的操作，并且可能需要大量的精力才能手动导入每件事（加上在输入错误时进行更正）。
不必记住，查找和手动导入组件和包，而让代码编辑器为您完成。您可以通过按Tab键选择要导入的内容来自动导入任何内容。
以下是在VSCode中自动导入包和组件的方法：
- 依次转到“代码”，“首选项”和“设置”
- 搜索自动导入，并确保选中“启用自动导入”复选框
- 返回项目，输入要导入的名称，在编辑器建议的选项中箭头，然后按Tab即可立即为其创建导入语句。
使用自动导入时，它使任何规模的工作项目都变得更加容易，因为您不再花费一半的时间来编写导入语句。
5.您是否手动删除未使用的进口商品？使用组织导入快捷方式。
随着有更漂亮的一切，我们写的代码，VSCode给了我们一个所谓的快捷方式组织进口，不只是这一点。实际上，它有两件事：
- 它按字母顺序组织了我们的进口声明
- 删除未使用的导入语句（立即修复有关未使用的导入的警告）
最重要的是，此快捷方式无需设置。使用方法如下：
- 转到查看，然后选择命令面板。
- 搜索组织导入并将其选中。
- 现在应该组织您的导入，并删除所有未使用的导入。
请注意，您也可以使用键盘快捷键command/control + shift + o。
