在Visual Studio Code中使用React

React 是 Facebook 开发的一个流行的 JavaScript 库，用于构建用户界面。Visual Studio Code 编辑器开箱即用支持 React.js IntelliSense 和代码导航。

欢迎来到 React

我们将使用create-react-app 本教程的生成器。要使用生成器并运行 React 应用服务器，Node.js你需要安装 JavaScript 运行时和 npm（Node.js包管理器）。NPM随Node.js包含，你可以从下载Node.js下载安装。

提示：为了测试你机器上是否正确安装了Node.js和NPM，你可以输入节点 --版本以及NPM——版本在终端或命令提示符中。

你现在可以通过输入以下方式创建新的 React 应用程序：

npx create-react-app my-app

其中我的应用是你申请文件夹的名称。创建 React 应用程序并安装依赖可能需要几分钟时间。

注意：如果你之前安装过create-react-app全球NPM install -g create-react-app我们建议你用以下方式卸载该软件包NPM uninstall -g create-react-app以确保NPX始终使用最新版本。

让我们快速运行React应用，进入新文件夹并输入NPM 启动启动网页服务器并在浏览器中打开应用：

cd my-app
npm start

你应该会在浏览器里看到React的标志和“学习React”的链接 http://localhost:3000。我们会让网页服务器运行，同时用 VS Code 查看应用。

要在VS Code中打开你的React应用，打开另一个终端或命令提示符窗口，导航到以下内容。我的应用文件夹和类型代码。:

cd my-app
code .

Markdown 预览

在文件资源管理器中，你会看到一个文件是应用程序README.mdMarkdown 文件。这里有很多关于应用和React的宝贵信息。回顾README的一个好方法是使用VS Code Markdown预览。你可以在当前编辑器组（Markdown：打开预览 ⇧⌘V（Windows，Linux Ctrl+Shift+V））或在旁边的新编辑器组（Markdown：侧面打开预览 ⌘K V（Windows，Linux Ctrl+K V））中打开预览。你会得到很好的格式化、指向头部的超链接导航，以及代码块中的语法高亮。

语法高亮与括号匹配

现在展开SRC文件夹并选择index.js档案。你会注意到VS Code会为各种源代码元素高亮语法，如果你把光标放在括号上，也会选中相应的括号。

IntelliSense

当你开始输入时index.js你会看到智能建议或补全。

选择建议并输入后.你通过IntelliSense看到对象上的类型和方法。

VS Code 使用 TypeScript 语言服务来提供 JavaScript 代码智能，并具有名为自动类型获取（ATA）的功能。ATA 会拉取 npm 类型声明文件（*.d.ts对于package.json.

如果你选择了一种方法，你还会得到参数帮助：

前往定义，查看定义

通过 TypeScript 语言服务，VS Code 还可以通过 Go to Definition（F12）或窥视定义（⌥F12，Windows Alt+F12，Linux Ctrl+Shift+F10））在编辑器中提供类型定义信息。把光标放在应用右键点击并选择“查看定义”。一个窥视窗口将打开，显示应用定义来源App.js.

按Esc键关闭“窥视窗口”。

你好，世界

让我们把示例应用更新为“Hello World！”。在内部创建一个组件index.js叫HelloWorld其中包含一个带有“Hello， world！”的H1头部，并替换了<应用 />Tabroot.render其中<HelloWorld />.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

function HelloWorld() {
  return <h1 className="greeting">Hello, world!</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <HelloWorld />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

一旦你保存了index.jsfile，服务器的运行实例会更新网页，刷新浏览器时你会看到“Hello World！”。

提示：VS Code 支持自动保存，默认情况下会在延迟后保存文件。在文件菜单中查看自动保存选项，开启自动保存，或者直接配置files.autoSave用户设置。

调试 React

为了调试客户端的 React 代码，我们将使用内置的 JavaScript 调试器。

注意：本教程假设你安装了Edge浏览器。如果你想用Chrome调试，可以替换启动类型其中镀铬.Firefox浏览器还有调试器。

设定一个断点

在 中设置断点index.js点击行号左侧的排水沟。这会设置一个断点，断点会以红色圆圈的形式可见。

配置调试器

我们需要先配置调试器。作方法是进入运行和调试视图（⇧⌘D（Windows，Linux Ctrl+Shift+D）），选择创建launch.json文件链接以创建launch.json调试器配置文件。从“选择调试器”下拉菜单中选择“Web 应用（Edge）。这将产生launch.json文件在新的.vscode该文件夹包含启动网站的配置。

我们需要对示例做一个修改：更改 的端口网址来自8080到3000.你的launch.json应该是这样的：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "msedge",
      "request": "launch",
      "name": "Launch Edge against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}"
    }
  ]
}

确保你的开发服务器正在运行（NPM 启动).然后按 F5 或绿色箭头启动调试器并打开新的浏览器实例。断点所在的源代码在启动时运行，调试器尚未附加，所以我们只有刷新网页才会触发断点。刷新页面，你应该会达到断点。

你可以逐步查看源代码（F10），检查诸如HelloWorld，并查看客户端React应用的调用栈。

想了解更多关于调试器及其可用选项的信息，请查看我们关于浏览器调试的文档。

实时编辑与调试

如果你同时使用 webpack 和 React 应用，利用 webpack 的 HMR 机制，可以实现更高效的工作流程，它允许你直接从 VS Code 进行实时编辑和调试。你可以在这篇实时编辑和调试 React 应用中，直接通过 VS Code 博客文章和 webpack 热模块替换文档了解更多。

绒毛

Linter会分析你的源代码，并在你运行应用前提醒你潜在的问题。VS Code 自带的 JavaScript 语言服务默认支持语法错误检查，你可以在问题面板（查看>题目 ⇧⌘M（Windows，Linux Ctrl+Shift+M））中看到具体作。

试着在你的React源代码里犯一个小错误，你会看到一个红色曲线和问题面板上的错误。

林特可以提供更复杂的分析，执行编码规范并检测反模式。一个流行的JavaScript linter是ESLint。ESLint 结合 ESLint VS Code 扩展，提供了出色的产品内 linting 体验。

首先，安装ESLint命令行工具：

npm install -g eslint

然后通过扩展视图输入“eslint”安装ESLint扩展。

安装ESLint扩展并重新加载VS Code后，你需要创建一个ESLint配置文件，.eslintrc.js.你可以使用扩展的 ESLint 创建一个：从命令面板创建 ESLint 配置命令（⇧⌘P（Windows，Linux Ctrl+Shift+P））。

该命令会提示你在终端面板中回答一系列问题。取默认值，它会生成.eslintrc.js在你的项目根目录里的文件，看起来大致是这样的：

module.exports = {
  env: {
    browser: true,
    es2020: true
  },
  extends: ['eslint:recommended', 'plugin:react/recommended'],
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 11,
    sourceType: 'module'
  },
  plugins: ['react'],
  rules: {}
};

ESLint 现在会分析打开的文件，并显示警告index.js关于“App”被定义但从未使用。

你可以在.eslintrc.js档案。

我们为多余的分号添加一个错误规则：

 "rules": {
        "no-extra-semi":"error"
    }

现在，当你错误地在一行上加了多个分号时，你会在编辑器中看到错误（红色曲线），问题面板中会出现错误条目。

热门入门套装

在这个教程中，我们使用了create-react-app生成器，创建一个简单的React应用程序。有很多很棒的样本和入门工具包，可以帮助你构建第一个React应用。

VS Code React 示例

这是一个示例 React 应用程序，创建了一个简单的 TODO 应用程序，并包含了 Node.js Express 服务器的源代码。它还展示了如何使用Babel ES6转译器，然后用webpack将网站资源捆绑起来。

TypeScript React

如果你对 TypeScript 和 React 感兴趣，也可以创建一个 TypeScript 版本的create-react-app通过指定你想使用 TypeScript 模板来应用：

npx create-react-app my-app --template typescript

详情请参见Create React应用网站上的“添加TypeScript”页面。

Angular

Angular 是另一个流行的网络框架。如果你想看 Angular 与 VS Code 合作的示例，可以看看 Angular CLI 调试的公式。它会带你创建Angular应用并配置launch.jsonJavaScript调试器的文件。

常见问题

我可以在声明式JSX中加入IntelliSense吗？

是的。例如，如果你打开create-react-app项目App.js文件中，你可以在 React JSX 中看到 IntelliSenserender（）方法。