5 个适用于 React 开发人员的 VSCode 扩展

在本文中，我们将学习 React 开发人员必备的 5 个 VSCode 扩展。我个人在日常生活中经常使用这五个扩展，它们自然而然地提升了工作效率。

ESLint
这是生成更高质量代码的救星扩展。它基本上将 ESLint 集成到了 VS Code 中。如果您是 ESLint 新手，请查看文档。

该扩展使用已打开的工作区文件夹中安装的 ESLint 库。如果该文件夹未提供，扩展会查找全局安装版本。如果您尚未在本地或全局安装 ESLint，请在工作区文件夹中运行 npm install eslint 进行本地安装，或运行 npm install -g eslint 进行全局安装。

代码名称：dbaeumer.vscode-eslint
下载次数：7,515,220

打开原生终端
使用 cd 命令在不同目录之间切换实在太麻烦了。这个小扩展可以帮助你直接从 VS Code 当前工作区目录打开原生终端。你可以从任意路径打开原生终端，只需单击鼠标右键，然后选择“在原生终端（当前文件夹）中打开”或“在原生终端（根文件夹）中打开”即可。

代码名称：alexeyvax.vscode-open-native-terminal
下载次数：3,386

React PropTypes 生成
手动添加 proptypes 非常耗时。此扩展将自动生成 propTypes，您只需点击组件，然后按 Ctrl + Shift + ALT + P 即可。这是 VS Code 的扩展，可自动为 React 组件生成 PropTypes 代码，类似于 Jetbrains 平台中的 ReactPropTypes。

代码名称：suming.react-proptypes-generate
下载次数：3,512

React.js 代码片段
每当我们创建新文件时，我们都会手动添加组件框架，我们的组件可以是类、函数式、基于 Hooks、基于 Redux 等等。此扩展只需几个键即可创建所有这些代码片段。它包含 React.js 的代码片段，并基于强大的 babel-sublime-snippets 包。此扩展拥有大约 50 个不同的代码片段。

支持的语言（文件扩展名）

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
代号：xabikos.reactsnippets
下载次数：475,575

VSCode React Refactor
这个简单的扩展为 React 开发人员提供了重构代码操作。

重新组合你冗长的 JSX，无需担心传入的数据。这个扩展会帮你完成这些繁琐的工作，而不会破坏你的代码。

特征

将 JSX 元素提取到文件或函数
支持 TypeScript 和 TSX
适用于类、函数和箭头函数
处理关键属性和函数绑定
与新的 Hooks API 配合良好
代码名称：planbcoding.vscode-react-refactor
下载次数：12,978

奖金

Turbo Console Log
在多个区域添加控制台非常耗时。为了解决这个问题，我使用了 Turbo Console Log，它基本上创建了一个快捷方式的控制台，而且它的亮点在于，这个扩展还会在控制台中添加一些有用的信息，例如函数名称和变量名称。

代号：chakrounanas.turbo-console-log
下载次数：91,835

如果您想了解组件类型，您可以在这里学习。

博客React