如何设置与React开发的代码

高效React开发的VS Code配置指南：提升你的编码效率

React开发者需要一个能够高效编写React代码的代码编辑器。VS Code的市场上有数千个免费扩展程序可以帮助你提升开发工作流程。本文将重点介绍一些扩展程序和设置，它们将把你的React编码效率提升到专业水平。

文中列出的一些扩展程序并非React专用，但它们仍然可以提高你的效率和编码速度。实际上，你日常编码中只有少数几个扩展程序真正有用。

本文列出的工具和技术可能会为你节省数小时的开发工作——这些时间原本会浪费在解决许多细小但至关重要的难题上。它们还可以帮助你减少编码错误。提高生产力的关键在于尽可能多地自动化任务。以下扩展程序和设置将帮助你实现这个目标。

关键要点

• 安装VS Code中的JavaScript语言扩展：通过提供Intellisense、代码片段和自动导入等功能，提高React开发效率。
• 对大型项目使用TypeScript：提供类型安全并减少错误，对于复杂的React应用程序至关重要。记住，VS Code不包含TypeScript编译器；请通过Node.js全局安装一个。
• 为JSX配置Emmet：确保VS Code将.js文件识别为React文件，或将其重命名为.jsx以获得更好的Emmet支持，从而提高HTML代码效率。
• 使用Prettier和EditorConfig进行一致的格式化：自动执行代码格式化，以保持React代码库的一致性，这对于协作项目至关重要。
• 使用ESLint进行代码质量检查：与VS Code集成，实时突出显示和修复编码错误，从而推广最佳实践和干净的代码库。
• 利用React专用扩展：诸如ES7 React/Redux/GraphQL/React-Native snippets之类的扩展程序通过提供可立即使用的代码片段来提高编码速度。

语言支持

首次安装VS Code时，它会为你提供许多开箱即用的功能——例如JavaScript的语法高亮显示以及对TypeScript和JSX代码的支持。

以下是欢迎选项卡的快照。你始终可以在“帮助”菜单下找到它。

你需要在这里进行初始设置。由于我们的重点是React，我们将从设置JavaScript语言扩展开始，它将为我们提供对编码效率工作流程至关重要的附加功能。

JavaScript语言扩展

在欢迎选项卡的“工具和语言”部分，点击JavaScript链接进行安装。将出现一个重新加载提示，你应该点击它才能使新功能生效。

JavaScript语言扩展提供多种功能，包括：

• Intellisense
• 代码片段
• JSDoc支持
• 悬停信息
• 自动导入

这些功能的完整列表和文档可以在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中使用的所有可能值。

TypeScript支持

如果你打算构建大型的、复杂的React项目，强烈建议使用TypeScript。这是因为TypeScript提供类型安全，从而减少在前端应用程序中交付错误代码的可能性。VS Code通过提供许多功能（例如：）开箱即用地提供TypeScript语言支持：

• 语法和语义高亮显示
• IntelliSense
• 代码片段
• JS Doc支持
• 悬停信息和签名帮助
• 格式化
• JSX和自动闭合标签

完整的列表记录在此处。使用TypeScript时，JSX代码以.tsx文件扩展名编写。编译后，输出将生成一个扩展名为.jsx的文件。

请注意，VS Code不提供TypeScript编译器。你必须在全局Node.js环境中安装一个，如下所示：

<code>npm install -g typescript</code>

或者，你可以安装Compile Hero Pro扩展程序，它为TypeScript和许多其他语言提供编译器，包括：

• Less
• Sass、SCSS
• Stylus
• Jade
• Pug

该扩展程序在何时以及如何编译TypeScript和样式代码方面提供了更多可配置的选项。如果你想了解更多关于设置React和TypeScript的信息，我建议你查看我们的另一篇文章“使用TypeScript的React：最佳实践”，以获得更详细的解释。

Flow

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功能未激活。有两种解决方法：

1. 将所有包含JSX代码的文件重命名为.jsx扩展名（推荐）
2. 将VS Code配置为将所有.js文件识别为React文件。更新你的settings.json如下：

<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

EditorConfig是一个简单的配置文件，其中只包含格式化规则。你必须安装一个扩展程序，才能让VS Code读取这些规则并覆盖其自身的规则。只需按照以下步骤进行设置：

1. 安装VS Code的EditorConfig扩展程序。请注意，这将使用.editorconfig文件中找到的设置覆盖用户/工作区设置。
2. 在项目的根目录下创建一个.editorconfig文件，并复制此示例配置：

<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。要转换所有现有文件，你有两种选择：

• 手动进行（点击状态栏上的文本CRLF进行切换）
• 使用Prettier格式化所有文件

接下来让我们看看Prettier。

Prettier

Prettier是最易于为JavaScript代码设置的代码格式化程序。它支持JavaScript、TypeScript、JSX、CSS、SCSS、Less和GraphQL。要进行设置，请执行以下步骤：

1. 安装Prettier代码格式化程序扩展程序。
2. 确保VS Code使用Prettier作为其默认格式化程序。更新settings.json如下：

<code>npm install -g typescript</code>

3. 在你的项目中安装Prettier作为开发依赖项：npm install --save-dev prettier或yarn add -D prettier。
4. 创建.prettierrc并复制以下示例规则：

<code>// 控制提示是否显示
"atomKeymap.promptV3Features": true,

// 更改多光标鼠标绑定
"editor.multiCursorModifier": "ctrlCmd",

// 在新窗口中打开文件夹（项目），而不会替换当前窗口
"window.openFoldersInNewWindow": "on",</code>

5. 通过将此命令添加到你的scripts部分来更新package.json：

<code>    "emmet.includeLanguages": {
      "javascript": "javascriptreact"
    }</code>

对于步骤3-5，你必须为每个希望Prettier支持的项目执行此操作。你现在可以点击VS Code上npm脚本面板下的格式化命令，如下面的屏幕截图所示。

或者，你可以运行命令npm run format来运行Prettier。

这将导致所有文件根据Prettier的默认规则以及你在.prettierrc和.editorconfig文件中覆盖的规则正确且一致地重新格式化。换行符也将保持一致。

你可能已经注意到，代码格式设置现在位于三个不同的位置。你可能想知道如果我们有冲突的规则会发生什么。激活Prettier后，它将根据以下优先级处理这些规则：

1. Prettier配置文件
2. .editorconfig
3. VS Code设置（如果存在任何其他配置，则忽略）

如果发生冲突，Prettier配置将优先。

HTML到JSX

任何真正的开发者都知道，从互联网上的某个地方复制HTML代码并将其粘贴到你的React代码中是很常见的。这通常需要你将HTML属性转换为有效的JSX语法。幸运的是，有一个名为html to JSX的扩展程序可以为你执行转换。安装后，它可以轻松地：

• 将现有的HTML代码转换为JSX
• 在粘贴时将HTML代码转换为有效的JSX语法

这意味着诸如class之类的属性将转换为className。这是一个非常好的省时方法。

(其余部分内容与原文类似，但进行了措辞和句式上的调整，以达到伪原创的目的。 保持图片格式不变。)

以上是如何设置与React开发的代码的详细内容。更多信息请关注PHP中文网其他相关文章！