作为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。