如何为React开发设置VS代码（附实例）

热门技术勘探工
231 阅读6分钟

React开发者需要一个代码编辑器，使他们能够富有成效地编写React代码。在VS Code的市场上有成千上万的免费扩展，可以帮助提高你的开发工作流程。在这篇文章中，我将重点介绍一些扩展和设置，它们将推动你的React编码效率达到专业水平。

我在这里列出的一些扩展并不是针对React的，但它们还是会提高你的效率和编码速度。实际上，你只会发现少数几个扩展会对你的日常编码计划真正有用。

实施本文中列出的工具和技术可能会节省你几个小时的开发工作--这些时间本来是浪费在解决许多小而关键的问题上。它们也会帮助你减少编码错误。生产力的关键是尽可能多地将任务自动化。下面的扩展和设置将帮助你实现这一目标。

语言支持

当你第一次安装VS Code时，它将为你提供很多开箱即用的功能，而不需要使用任何扩展--比如JavaScript的语法高亮，以及对TypeScript和JSX代码的支持。

下面是 "欢迎"选项卡的快照。你总是可以在帮助菜单下找到它。

fresh vscode install

这是你需要进行初始设置的地方。由于我们的重点是React，我们将从设置JavaScript语言扩展开始，这将为我们提供编码生产力工作流程所需的额外功能。

JavaScript语言扩展

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

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

  • 智能提示
  • 片断
  • 支持JSDoc
  • 悬停信息
  • 自动导入

这些功能的完整列表和文档可以在VS Code文档中找到。我强烈建议你阅读每个功能，以了解如何在你的开发工作流程中使用它们。

下图是一个Intellisense和自动导入的例子。

autocomplete demo

当按下tab键时，Header 组件被导入到顶部。关闭的> 符号必须被输入，这将自动完成代码的输入。<Header><Header/>.

安装了JavaScript语言功能后，VS Code可能会提示你在项目的根部提供一个jsconfig.json 文件。这不是必须的，但设置这个会帮助IntelliSense提供更准确的提示。这里有一个配置样本。

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es6",
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./src/*"],
      "~~/*": ["./*"],
      "@@/*": ["./*"]
    }
  },
  "exclude": ["node_modules", ".cache", "dist"]
}

上面的配置告诉JavaScript语言服务器哪些文件是你的源代码的一部分，哪些不是。这确保了语言服务只分析你的源代码，因此执行得很快。完整的配置已经记录在这里，解释了所有可能的值，可以在jsconfig.js 。

TypeScript支持

如果你想建立大规模、复杂的React项目，强烈建议使用TypeScript。这是因为TypeScript提供了类型安全，从而减少了在你的前端应用程序中提供错误代码的机会。VS Code确实提供了TypeScript语言的支持，提供了一些功能，例如。

  • 语法和语义高亮
  • 智能提示
  • 片断
  • JS文档支持
  • 悬停信息和签名帮助
  • 格式化
  • JSX和自动关闭标签

完整的清单在这里有记录。通过TypeScript，JSX代码被写入.tsx 文件扩展名。当编译时，输出将产生一个扩展名为.jsx 的文件。

请注意，VS Code并没有为TypeScript提供编译器。你必须像这样在你的全局Node.js环境中安装一个。

npm install -g typescript

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

  • Less
  • Sass, SCSS
  • Stylus
  • 翡翠
  • Pug

该扩展提供了更多可配置的选项，可以选择何时以及如何编译你的TypeScript和样式代码。如果你想了解更多关于React和TypeScript的设置，我建议你查看我们的另一篇文章，"React与TypeScript。最佳实践"，以获得更详细的解释。

流

Flow是Facebook对TypeScript的替代。它提供了相同的功能，但只适用于React项目，而且不太受欢迎。VS Code不支持它，但你可以安装扩展Flow语言支持，它提供了有限的功能，如IntelliSense和Rename。

键图设置

如果你从其他代码编辑器迁移到VS Code，你会很高兴地知道你可以继续使用你已经习惯的键盘快捷键。如果你是代码编辑器的新手，请跳过这一部分。然而，如果你以前使用过代码编辑器，你可能知道重新训练你的肌肉记忆是没有效果的，而且需要时间来适应。

在欢迎选项卡上，在设置和键绑定部分，你会看到安装Vim、Sublime、Atom和其他键盘快捷方式的链接。如果你点击其他链接，你会得到一个你可以安装的键盘映射的完整列表。

vscode keymaps

在我转到VS Code之前，我曾经是Atom的用户。在VS Code中设置Atom的键图，就像点击Atom链接一样简单。这将为我安装Atom Keymap扩展。为了使VS Code更 "像Atom"，需要在settings.json 中进行以下配置。

// Controls whether the prompt will show
"atomKeymap.promptV3Features": true,

// Changes the multi cursor mouse binding
"editor.multiCursorModifier": "ctrlCmd",

// Open folders(projects) in new window without replacing the current one
"window.openFoldersInNewWindow": "on",

请阅读你的键盘快捷键扩展提供的关于如何设置的说明。只需点击扩展栏中的键盘图扩展，就可以找到该文档。

Emmet JSX支持

Emmet是一个网络开发工具包，可以让你更有效地编写HTML代码。如果你是Emmet的新手，请查看演示，看看它是如何工作的。

VS Code内置了Emmet，它已经支持JSX语法。不幸的是，大多数React启动项目使用.js 扩展。这方面的问题是，VS Code不承认这样的文件是React代码，所以JSX功能没有被激活。有两种方法可以解决这个问题。

  1. 将你所有带有JSX代码的文件重命名为.jsx 扩展名**(推荐**)

  2. 配置VS Code以识别所有.js 文件为React文件。更新你的settings.json ，如下所示。

    "emmet.includeLanguages": {
  "javascript": "javascriptreact"
}

要访问settings.json ，只需进入顶部的菜单标签，然后点击视图>命令调色板。输入 "settings"，然后选择Preferences选项。打开设置(JSON)。或者，你可以按Ctrl+P然后输入 "settings.json "来快速打开该文件。你也可以使用快捷键Ctrl+ ，在一个新的标签中打开UI版的 "设置"。当你点击右上角的第一个图标按钮时，将打开settings.json 。

第二个选项似乎是最简单的途径。不幸的是，这将导致与其他JavaScript开发工具的问题，如eslint-config-airbnb，它有一个规则集，为React代码执行.jsx 文件扩展名。禁用该规则将导致以后的其他问题。

React官方团队确实建议React代码使用.js 扩展名。根据我的个人经验，最好将所有包含React代码的文件重命名为.jsx ，并为包含普通JavaScript代码的文件使用.js 扩展名。这样一来，你在使用所有开发工具时就会有一个更容易的工作流程。

继续阅读：如何在 SitePoint上为React开发设置VS代码。

avatar
文章
阅读
粉丝