React 的十大 VSCode 扩展

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

本文将涵盖哪些内容？

我们将介绍 10 个 React 开发者必备的 Visual Studio Code 扩展。这些扩展将帮助您更快、更简洁、更轻松地编写代码。

React 的十大 VS Code 扩展

1. ES7 React/Redux/GraphQL/React-Native 代码片段
2. 更美观 – 代码格式化
3. 括号对着色器
4. 自动重命名标签
5. VSCode React 重构
6. ESLint
7. npm Intellisense
8. 选项卡输出
9. 更改大小写
10. VS Code 的 EditorConfig

ES7 React/Redux/GraphQL/React-Native 代码片段扩展

适用于 VS Code 的JavaScript 和 React/Redux 代码片段（ES7+），并支持 Babel 插件功能

安装它

更美观 – 代码格式化

Prettier 是一款带有鲜明个人风格的代码格式化工具。它会解析你的代码，并根据自身的规则重新输出，从而强制执行一致的代码风格。这些规则会考虑最大行长度，并在必要时自动换行。

更美观 – 代码格式化

安装它

高亮匹配标签

此扩展程序会高亮显示匹配的开始和/或结束标签。它还可以选择在状态栏中显示标签的路径。虽然 VSCode 也具备一些基本的标签匹配功能，但仅限于此。此扩展程序会尝试匹配任何位置的标签：标签属性、字符串内部、任何文件，同时还提供丰富的样式选项，方便用户自定义标签的高亮显示方式。

高亮匹配标签

安装它

自动重命名标签

自动重命名配对的 HTML/XML 标签，与 Visual Studio IDE 的功能相同。

自动重命名标签

安装它

VSCode React 重构

这个简单的扩展程序为 React 开发人员提供 JSX 重构代码操作。

VSCode React 重构

安装它

ESLint

ESLint 会对代码进行静态分析，快速查找问题。大多数文本编辑器都内置了 ESLint，你也可以在持续集成流程中运行 ESLint。

安装它

npm Intellisense

它可以自动补全导入语句中的 npm 模块。

npm Intellisense

安装它

选项卡输出

此扩展程序允许您使用 Tab 键省略引用、括号等。

安装它

更改大小写

这是一个针对 Visual Studio Code 的node-change-case 函数的封装  。可以快速更改当前选中项或当前单词的大小写。

更改大小写

安装它

VS Code 的 EditorConfig

此插件 尝试 使用文件中的设置覆盖用户/工作区设置 .editorconfig 。无需其他文件或 VS Code 特有的文件。与所有 EditorConfig 插件一样，如果 root=true 未指定，EditorConfig 将继续 在项目外部查找 文件 。.editorconfig

安装它

以上就是 React 开发者必备的 10 个 VS Code 扩展。希望这篇文章能帮助你找到一些最适合 React 应用开发的扩展。这些扩展可以显著提升你的开发效率。如果你在日常 React 开发中使用了其他扩展，也欢迎分享给我们。我们也乐于使用它们。下次再见 😊

想查看更多博文，请访问我的博客网站