在 Visual Studio Code 中使用 React
React 是一个由 Facebook 开发的、用于构建用户界面的流行 JavaScript 库。Visual Studio Code 编辑器开箱即用地支持 React.js 的智能感知和代码导航。
欢迎来到 React
在本教程中,我们将使用 create-react-app
生成器。要使用该生成器以及运行 React 应用程序服务器,你需要安装 Node.js JavaScript 运行时和 npm (Node.js 包管理器)。npm 包含在 Node.js 中,你可以从 Node.js 下载页面下载并安装。
提示:要测试你的机器上是否正确安装了 Node.js 和 npm,你可以在终端或命令提示符中输入
node --version
和npm --version
。
现在你可以通过输入以下命令来创建一个新的 React 应用程序:
npx create-react-app my-app
其中 my-app
是你应用程序的文件夹名称。创建 React 应用程序并安装其依赖项可能需要几分钟时间。
注意:如果你之前曾通过
npm install -g create-react-app
全局安装了create-react-app
,我们建议你使用npm uninstall -g create-react-app
卸载该包,以确保 npx 总是使用最新版本。
让我们快速运行我们的 React 应用程序。导航到新文件夹并输入 npm start
来启动 Web 服务器并在浏览器中打开应用程序:
cd my-app
npm start
你应该会在浏览器的 https://:3000 地址看到 React 徽标和一个“Learn React”的链接。在我们用 VS Code 查看应用程序时,将保持 Web 服务器运行。
要在 VS Code 中打开你的 React 应用程序,请打开另一个终端或命令提示符窗口,导航到 my-app
文件夹并输入 code .
:
cd my-app
code .
Markdown 预览
在文件资源管理器中,你会看到的一个文件是应用程序的 README.md
Markdown 文件。它包含大量关于该应用程序和 React 的有用信息。查看 README 的一个好方法是使用 VS Code 的Markdown 预览功能。你可以在当前编辑器组中打开预览(Markdown: Open Preview ⇧⌘V (Windows, Linux Ctrl+Shift+V)),或者在旁边的新的编辑器组中打开(Markdown: Open Preview to the Side ⌘K V (Windows, Linux Ctrl+K V))。你将获得漂亮的格式、到标题的超链接导航以及代码块中的语法高亮。
语法高亮和括号匹配
现在展开 src
文件夹并选择 index.js
文件。你会注意到 VS Code 对各种源代码元素都有语法高亮,并且如果你将光标放在一个括号上,匹配的括号也会被选中。
智能感知 (IntelliSense)
当你在 index.js
中开始输入时,你会看到智能建议或补全。
在你选择一个建议并输入 .
后,你会通过智能感知看到对象上的类型和方法。
VS Code 使用 TypeScript 语言服务为其 JavaScript 代码提供智能感知,它有一个名为自动类型获取 (ATA) 的功能。ATA 会为 package.json
中引用的 npm 模块下载 npm 类型声明文件 (*.d.ts
)。
如果你选择一个方法,你还会得到参数帮助:
转到定义,速览定义
通过 TypeScript 语言服务,VS Code 还可以通过转到定义 (F12) 或速览定义 (⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10)) 在编辑器中提供类型定义信息。将光标放在 App
上,右键单击并选择速览定义。一个速览窗口将会打开,显示来自 App.js
的 App
定义。
按 Escape 关闭速览窗口。
Hello World
让我们将示例应用程序更新为 "Hello World!"。在 index.js
中创建一个名为 HelloWorld
的组件,它包含一个带有 "Hello, world!" 的 H1 标题,并将 root.render
中的 <App />
标签替换为 <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.js
文件,正在运行的服务器实例将更新网页,当你刷新浏览器时,你会看到 "Hello World!"。
提示:VS Code 支持自动保存,默认情况下它会在延迟后保存你的文件。在文件菜单中勾选自动保存选项以开启自动保存,或直接配置
files.autoSave
用户设置。
调试 React
要调试客户端的 React 代码,我们将使用内置的 JavaScript 调试器。
注意:本教程假设你已安装 Edge 浏览器。如果你想使用 Chrome 进行调试,请将启动
type
替换为chrome
。还有一个适用于 Firefox 浏览器的调试器。
设置断点
要在 index.js
中设置断点,请单击行号左侧的空白区域。这会设置一个断点,它将显示为一个红色的圆圈。
配置调试器
我们需要首先配置调试器。为此,请转到运行和调试视图 (⇧⌘D (Windows, Linux Ctrl+Shift+D)) 并选择 create a launch.json file 链接来创建一个 launch.json
调试器配置文件。从选择调试器下拉列表中选择 Web App (Edge)。这将在你的项目中的一个新 .vscode
文件夹内创建一个 launch.json
文件,其中包含一个用于启动网站的配置。
我们需要为我们的示例做一个更改:将 url
的端口从 8080
改为 3000
。你的 launch.json
应该看起来像这样:
{
"version": "0.2.0",
"configurations": [
{
"type": "msedge",
"request": "launch",
"name": "Launch Edge against localhost",
"url": "https://:3000",
"webRoot": "${workspaceFolder}"
}
]
}
确保你的开发服务器正在运行 (npm start
)。然后按 F5 或绿色箭头来启动调试器并打开一个新的浏览器实例。设置断点的源代码在调试器附加之前就在启动时运行了,所以直到我们刷新网页,我们才会命中该断点。刷新页面,你应该会命中你的断点。
你可以单步执行你的源代码 (F10),检查诸如 HelloWorld
之类的变量,并查看客户端 React 应用程序的调用堆栈。
有关调试器及其可用选项的更多信息,请查看我们关于浏览器调试的文档。
实时编辑和调试
如果你将 webpack 与你的 React 应用一起使用,你可以利用 webpack 的 HMR 机制获得更高效的工作流程,这使你能够直接在 VS Code 中进行实时编辑和调试。你可以在这篇直接在 VS Code 中实时编辑和调试你的 React 应用的博客文章和webpack 热模块替换文档中了解更多信息。
代码检查
Linter(代码检查工具)会分析你的源代码,并在你运行应用程序之前警告你潜在的问题。VS Code 附带的 JavaScript 语言服务默认支持语法错误检查,你可以在问题面板中看到它的作用 (视图 > 问题 ⇧⌘M (Windows, Linux Ctrl+Shift+M))。
试着在你的 React 源代码中犯一个小错误,你会在问题面板中看到一个红色波浪线和一个错误。
Linter 可以提供更复杂的分析,强制执行编码规范并检测反模式。一个流行的 JavaScript linter是 ESLint。ESLint 与 ESLint VS Code 扩展结合使用,提供了出色的产品内 linting 体验。
首先,安装 ESLint 命令行工具:
npm install -g eslint
然后通过转到扩展视图并输入 'eslint' 来安装 ESLint 扩展。
一旦 ESLint 扩展安装完毕并重新加载 VS Code,你会想要创建一个 ESLint 配置文件 .eslintrc.js
。你可以使用扩展的 ESLint: Create ESLint configuration 命令从命令面板 (⇧⌘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
文件中修改 ESLint 的规则。
让我们为多余的分号添加一个错误规则:
"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 App 网站上的添加 TypeScript页面查看详细信息。
Angular
Angular 是另一个流行的 Web 框架。如果你想看一个 Angular 与 VS Code 协同工作的例子,请查看使用 Angular CLI 调试的指南。它将引导你创建一个 Angular 应用程序并为 JavaScript 调试器配置 launch.json
文件。
常见问题
我可以在声明式 JSX 中获得智能感知吗?
是的。例如,如果你打开 create-react-app
项目的 App.js
文件,你可以在 render()
方法内的 React JSX 中看到智能感知。