2022年10个提高生产力的React VS Code扩展方案

我最喜欢的VS Code扩展来享受编码的乐趣

[

Inna Sinicka

[

2 天前-4

我们都希望工作得更好、更快，提高我们的生产力，按时交付令人敬畏的产品。不幸的是，有时我们花了太多的时间在保持代码的干净和清晰，格式化和重组上。

当你有预定的规则时，有效的工作就会容易得多，你就不会把时间浪费在过度思考如何组织你的项目，如何构造组件，在哪里放样式或测试，如何快速测试你的功能，等等。我不是一个人在做项目，我必须定义这些规则，这就是为什么我一直在寻找更好的方法和伟大的工具，这可以帮助我尽可能的自动化。

我使用不同的VS Code扩展，但我想告诉你那些帮助我和我的团队更快地写出更干净的代码，而不用复制粘贴旧的代码。值得一提的是，我的有用的扩展列表在2022年变得有点短，因为我们不再需要额外的工具来调试和给括号上色。

你需要它们两个!如果你想在你的项目中拥有漂亮的格式化和检查的代码，你必须使用格式化器和linter。

我通常有一些配置文件（.prettierrc 和.eslintrc.json ），在那里我定义了我的代码应该是什么样子的，以及如何检查它。

在eslint 配置中，定义哪些插件将被使用是很重要的（顺序很重要）--因为你不希望eslint和prettier之间有冲突。

扩展程序显示了我的代码中所有不正确的地方，我可以很容易地在保存时将其格式化 (editor.formatOnSave 必须是true 在与代码 settings.json ) 。

我一直在寻找一个扩展，它可以从预定义的模板中生成ReactJs组件，但我也想要一种方法来改变模板的结构并创建非常具体的模板。

这就是为什么我最喜欢这个。它并不只是绑定在react上，我可以创建任何我想要的东西。

例如，我有一个创建视图的模板，它创建了一个组件，该组件导入了我们的List组件和用于数据获取和状态管理的特定自定义钩子。

由于我们的团队使用这种方法，我们不需要考虑组件的结构，我们只需要选择类型和名称，我们就可以得到带有默认导入、测试文件、样式、故事（对于Storybook）等的组件。

它在图书馆中特别有用，因为所有的组件都以一种方式结构化，这很好。

预定义模板

这个是一个很好的扩展。它有助于创建新的组件、函数和更多。最重要的是，它的速度很快，可以很容易地编写useEffect,useCallback 或任何其他钩子。

在下面的图片中，你可以看到它在代码中的样子以及prettier/eslint插件的反应。

使用eslint和prettier建议的useEffect的片段

有时我们都需要重构所有的代码，如果有一个工具可以帮助我们，那就太好了。有了这个扩展，我们可以很容易地选择那些应该被提取到新组件中的代码行，仅此而已。

我通常喜欢用预定义的模板来创建新的组件，但有时组件是如此简单和小，以至于你根本不需要这种方法。

我喜欢这个，简直无法想象没有它的生活。

我通常要打开2个以上的项目，孔雀对我来说是个省时的工具。

通过颜色识别正确的项目要容易得多--而不仅仅是通过项目名称。