高效React开发的VS Code配置指南：提升你的编码效率
React开发者需要一个能够高效编写React代码的代码编辑器。VS Code的市场上有数千个免费扩展程序可以帮助你提升开发工作流程。本文将重点介绍一些扩展程序和设置，它们将把你的React编码效率提升到专业水平。
文中列出的一些扩展程序并非React专用，但它们仍然可以提高你的效率和编码速度。实际上，你日常编码中只有少数几个扩展程序真正有用。
本文列出的工具和技术可能会为你节省数小时的开发工作——这些时间原本会浪费在解决许多细小但至关重要的难题上。它们还可以帮助你减少编码错误。提高生产力的关键在于尽可能多地自动化任务。以下扩展程序和设置将帮助你实现这个目标。
关键要点
语言支持
首次安装VS Code时，它会为你提供许多开箱即用的功能——例如JavaScript的语法高亮显示以及对TypeScript和JSX代码的支持。
以下是欢迎选项卡的快照。你始终可以在“帮助”菜单下找到它。
你需要在这里进行初始设置。由于我们的重点是React，我们将从设置JavaScript语言扩展开始，它将为我们提供对编码效率工作流程至关重要的附加功能。
在欢迎选项卡的“工具和语言”部分，点击JavaScript链接进行安装。将出现一个重新加载提示，你应该点击它才能使新功能生效。
JavaScript语言扩展提供多种功能，包括：
这些功能的完整列表和文档可以在VS Code文档中找到。我强烈建议你阅读每个功能，以便了解如何在你的开发工作流程中使用它们。
下图是Intellisense和自动导入实际操作的示例。
按下Tab键时，Header组件将导入到顶部。必须输入结束的>符号，代码将自动完成为：。
安装JavaScript语言功能后，VS Code可能会提示你在项目的根目录下提供一个jsconfig.json文件。这不是必需的，但设置此文件将有助于IntelliSense提供更准确的提示。这是一个示例配置：
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>上述配置告诉JavaScript语言服务器哪些文件属于你的源代码，哪些文件不属于。这确保语言服务只分析你的源代码，因此性能很快。完整的配置已在此处记录，解释了可以在jsconfig.js中使用的所有可能值。
如果你打算构建大型的、复杂的React项目，强烈建议使用TypeScript。这是因为TypeScript提供类型安全，从而减少在前端应用程序中交付错误代码的可能性。VS Code通过提供许多功能（例如：）开箱即用地提供TypeScript语言支持：
完整的列表记录在此处。使用TypeScript时，JSX代码以.tsx文件扩展名编写。编译后，输出将生成一个扩展名为.jsx的文件。
请注意，VS Code不提供TypeScript编译器。你必须在全局Node.js环境中安装一个，如下所示：
<code>npm install -g typescript</code>
或者，你可以安装Compile Hero Pro扩展程序，它为TypeScript和许多其他语言提供编译器，包括：
该扩展程序在何时以及如何编译TypeScript和样式代码方面提供了更多可配置的选项。如果你想了解更多关于设置React和TypeScript的信息，我建议你查看我们的另一篇文章“使用TypeScript的React：最佳实践”，以获得更详细的解释。
Flow是Facebook对TypeScript的替代方案。它提供相同的功能，但仅适用于React项目，并且不太流行。VS Code并不原生支持它，但你可以安装Flow Language Support扩展程序，它提供有限数量的功能，例如IntelliSense和重命名。
(以下部分内容与原文类似，但进行了措辞和句式上的调整，以达到伪原创的目的。)
按键映射设置
如果你要从另一个代码编辑器迁移到VS Code，你会很高兴知道你可以继续使用你已经习惯的相同的键盘快捷键。如果你不熟悉代码编辑器，请跳过本节。但是，如果你以前使用过代码编辑器，你可能知道重新训练肌肉记忆是没有效率的，而且需要时间来调整。
在欢迎选项卡的“设置和按键绑定”部分，你会看到安装Vim、Sublime、Atom和其他键盘快捷键的链接。如果你点击“其他”链接，你将获得可以安装的完整按键映射列表。
在切换到VS Code之前，我曾经是Atom用户。在VS Code中设置Atom的按键映射就像点击Atom链接一样简单。这将为我安装Atom Keymap扩展程序。需要在settings.json中进行以下配置，才能使VS Code更像“Atom”：
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>请阅读你的键盘快捷键扩展程序提供的说明，了解如何设置你的快捷键。可以通过简单地点击扩展栏中的按键映射扩展程序来找到文档。
Emmet JSX支持
Emmet是一个Web开发工具包，允许你更有效地编写HTML代码。如果你不熟悉Emmet，请查看演示以了解其工作原理。
VS Code内置了Emmet，并且已经支持JSX语法。不幸的是，大多数React入门项目都使用.js扩展名。问题在于VS Code不将此类文件识别为React代码，因此JSX功能未激活。有两种解决方法：
<code>npm install -g typescript</code>
要访问settings.json，只需转到顶部菜单选项卡，然后点击“查看”>“命令面板”。输入“settings”，然后选择“首选项：打开设置（JSON）”选项。或者，你可以按Ctrl P，然后输入“settings.json”以快速打开该文件。你也可以使用快捷键Ctrl ,在新选项卡中打开设置的UI版本。当你点击第一个右上角的图标按钮时，它将打开settings.json。
第二个选项似乎是最简单的途径。不幸的是，这会导致其他JavaScript开发工具（例如eslint-config-airbnb）出现问题，该工具具有一个规则集，强制对React代码使用.jsx文件扩展名。禁用该规则稍后会导致其他问题。
官方React团队确实建议对React代码使用.js扩展名。根据我的个人经验，最好将所有包含React代码的文件重命名为.jsx，并对包含纯JavaScript代码的文件使用.js扩展名。这样，你就可以更轻松地使用所有开发工具。
格式化
编写高质量的代码需要你编写一致的代码。作为开发者，我们是人，很容易忘记我们为自己设定的标准。在本节中，我们将了解一些必不可少的工具，它们将帮助我们自动编写一致的代码。
EditorConfig是一个简单的配置文件，其中只包含格式化规则。你必须安装一个扩展程序，才能让VS Code读取这些规则并覆盖其自身的规则。只需按照以下步骤进行设置：
<code>{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"baseUrl": ".",
"paths": {
"~/*": ["./*"],
"@/*": ["./src/*"],
"~~/*": ["./*"],
"@@/*": ["./*"]
}
},
"exclude": ["node_modules", ".cache", "dist"]
}</code>VS Code现在将遵守这些规则来格式化你的代码。让我们快速讨论一下换行符。Windows使用CRLF来指示行的终止，而基于UNIX的系统使用LF。如果你碰巧使用混合换行符的文件，在提交文件时会遇到许多问题。你可以配置Git如何处理换行符。
我更喜欢的方法是在任何平台上强制所有项目文件使用LF换行符。请注意，EditorConfig不会转换现有文件的换行符。它只会为新文件设置LF。要转换所有现有文件，你有两种选择：
接下来让我们看看Prettier。
Prettier是最易于为JavaScript代码设置的代码格式化程序。它支持JavaScript、TypeScript、JSX、CSS、SCSS、Less和GraphQL。要进行设置，请执行以下步骤：
<code>npm install -g typescript</code>
<code>// 控制提示是否显示 "atomKeymap.promptV3Features": true, // 更改多光标鼠标绑定 "editor.multiCursorModifier": "ctrlCmd", // 在新窗口中打开文件夹（项目），而不会替换当前窗口 "window.openFoldersInNewWindow": "on",</code>
<code> "emmet.includeLanguages": {
"javascript": "javascriptreact"
}</code>对于步骤3-5，你必须为每个希望Prettier支持的项目执行此操作。你现在可以点击VS Code上npm脚本面板下的格式化命令，如下面的屏幕截图所示。
或者，你可以运行命令npm run format来运行Prettier。
这将导致所有文件根据Prettier的默认规则以及你在.prettierrc和.editorconfig文件中覆盖的规则正确且一致地重新格式化。换行符也将保持一致。
你可能已经注意到，代码格式设置现在位于三个不同的位置。你可能想知道如果我们有冲突的规则会发生什么。激活Prettier后，它将根据以下优先级处理这些规则：
如果发生冲突，Prettier配置将优先。
任何真正的开发者都知道，从互联网上的某个地方复制HTML代码并将其粘贴到你的React代码中是很常见的。这通常需要你将HTML属性转换为有效的JSX语法。幸运的是，有一个名为html to JSX的扩展程序可以为你执行转换。安装后，它可以轻松地：
这意味着诸如class之类的属性将转换为className。这是一个非常好的省时方法。
(其余部分内容与原文类似，但进行了措辞和句式上的调整，以达到伪原创的目的。 保持图片格式不变。)
以上是如何设置与React开发的代码的详细内容。更多信息请关注PHP中文网其他相关文章！
