React 支持
React 是一个用于通过封装的组件构建复杂交互式用户界面的 JavaScript 库。 在 React 官方网站 了解有关该库的更多信息。
PyCharm 与 React 集成，可为您的应用程序在配置、编辑、代码检查、运行、调试和维护方面提供帮助。
开始之前
请确保您的计算机上已安装 Node.js。
请确保在 设置 | 插件 页面、 已安装 选项卡中启用了必需的 JavaScript and TypeScript 和 JavaScript Debugger 插件。 有关详细信息，请参阅 管理插件。
在 设置 | 插件 页面、 Marketplace 选项卡上安装 React 和 Vite 插件，具体请参阅 从 JetBrains Marketplace 安装插件。
创建新的 React 应用程序
启动新的 React 单页应用程序的推荐方式是使用 create-vite 包，PyCharm 将使用 npx 为您下载并运行它。 因此，您的开发环境已预先配置为将 Vite 与 React 和 TypeScript 一起使用，详情请参阅 Vite 官方网站。
使用 create-vite 生成 React 应用程序
在主菜单中点击 。 或者，在欢迎屏幕的左侧窗格中点击 。
新建 项目 对话框 随即打开。
在左侧窗格中，选择 Vite。
在右侧窗格中：
指定用于存储与项目相关文件的文件夹路径。
在 Node.js 运行时 字段中，指定要使用的 Node.js 运行时。 从列表中选择已配置的运行时，或选择 添加 以配置新的运行时。
在 Vite 列表中，选择 npx create-vite。
在 模板 列表中，选择
react。可选：
要使用 TSX 而非 JSX，请选择 创建TypeScript 项目(T) 复选框。 PyCharm 将为您的应用程序生成 .tsx 文件以及一个 tsconfig.json 配置文件。
当您点击 创建 时，PyCharm 会生成一个特定于 React 的项目，其中包含所有必需的配置文件，并下载所需的依赖项。 PyCharm 还会创建 npm start 和 JavaScript Debug 配置，使用默认设置来运行或调试您的应用程序。
在空的 PyCharm 项目中安装 React
在这种情况下，您需要按照下文 构建 React 应用程序 中的说明自行配置构建流水线。 在 React 官方网站 了解将 React 添加到项目的更多信息。
创建空的 PyCharm 项目
在主菜单中点击 。 或者，在欢迎屏幕的左侧窗格中点击 。
新建 项目 对话框 随即打开。
在左侧窗格中，选择 空 项目。 在右侧窗格中，指定应用程序文件夹并点击 创建。
在空项目中安装 React
打开您将使用 React 的空项目。
在内置的 终端 （Alt+F12 ）中，键入：
npm install --save react react-dom
从现有的 React 应用程序开始
要继续开发现有的 React 应用程序，请在 PyCharm 中将其打开并下载所需的依赖项。
打开您计算机上已有的应用程序源代码
在 欢迎屏幕 屏幕左侧窗格中点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存储源代码的文件夹。
从版本控制中检出应用程序源代码
在 欢迎屏幕 屏幕左侧窗格中点击 克隆。
或者，从主菜单中选择 或 或 。
主菜单中可能不会显示 Git ，而是显示与您的项目关联的其他任何版本控制系统。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要检出应用程序源代码的存储库。 有关详细信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详情请参阅 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口 Alt+1 中，从 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全
当您打开一个在 PyCharm 之外创建并导入到其中的项目时，PyCharm 会显示一个对话框，您可以在其中决定如何处理包含不受信任源代码的此项目。
选择以下选项之一：
在安全模式中预览 ：在这种情况下，PyCharm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行/调试您的项目。
PyCharm 会在编辑器区域顶部显示通知，您可以随时点击 信任项目… 链接来加载您的项目。
信任项目 ：在这种情况下，PyCharm 会打开并加载项目。 这意味着项目已初始化、项目的插件已解析、依赖项已添加，并且所有 PyCharm 功能均可用。
不打开 ：在这种情况下，PyCharm 不会打开项目。
详细了解请参阅 项目安全性。
代码补全
PyCharm 在 JavaScript 代码中为 React API 和 JSX 提供代码补全。 代码补全适用于 React 方法、React 特定的属性、HTML 标签和组件名称、 React 事件 、组件属性等。 详细信息请参阅 React 官方网站。
要获得 React 方法和 React 特定属性的代码补全，您的项目中需要包含 react.js 库文件。 通常该库已位于您的 node_modules 文件夹中。
补全 React 方法、属性和事件
默认情况下，您在键入时会自动显示代码补全弹出窗口。 例如：
在 JSX 标签中，PyCharm 为 React 特定的属性 （例如 className 或 classID ）以及 非 DOM 属性 （例如 key 或 ref ）提供编码辅助。 此外，自动补全同样适用于项目 CSS 文件中定义的类名：
所有 React 事件 （例如 onClick 或 onChange ）也可与花括号  ={} 或引号 "" 一起自动补全。
默认情况下，会插入花括号。 您可以让 PyCharm 始终添加引号，或根据 TypeScript 定义文件（d.ts） 中的类型在引号与花括号之间进行选择。 要更改默认设置，请打开 设置 对话框（Ctrl+Alt+S ），转到 ，并从 为 JSX 属性添加引号 列表中选择适用的选项。
补全同样适用于花括号内的 JavaScript 表达式。 这适用于您定义的所有方法和函数：
补全 HTML 标签和组件名称
PyCharm 为您在 JavaScript 的方法中或在其他组件内定义的 HTML 标签和组件名称提供代码补全：
补全同样适用于使用 ES6 风格语法导入的组件：
补全组件属性
PyCharm 为使用 propTypes 定义的组件属性提供代码补全，并对其进行解析，使您可以快速跳转或预览其定义：
当您自动补全组件名称时，PyCharm 会自动添加其所有必需属性。 如果在使用组件时缺少某些必需属性，PyCharm 会向您发出警告。
向函数式组件添加 state
PyCharm 通过在特定位置定义未解析的引用，建议使用快速修复将 useState Hook 添加到函数式 React 组件。 PyCharm 会为 useState Hook 自动插入 import 语句。 state 的类型会根据定义引用的位置进行推断。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后从列表中选择 在 < functional component name> 组件中创建 <unresolved reference> 状态。
添加 props
PyCharm 通过在特定位置定义未解析的引用，建议使用快速修复向 React 组件添加新属性。
PyCharm 会生成包含所添加属性的组件代码。 属性的类型会根据对应引用的定义位置进行推断。
该快速修复同样可应用于基于类的组件。 在此类情况下，插入新属性后，未解析的引用会替换为 this.props.${reference_name}。
将插入符号置于未解析的引用处，按 Alt+Enter ，然后从列表中选择 在 <component name> 组件中创建 <unresolved reference> prop。
将 HTML 属性转换为 JSX
当您复制一段包含 class 属性或 on 事件处理程序的 HTML 代码并将其粘贴到 JSX 中时，PyCharm 会自动将这些属性替换为 React 特定的属性（className、 onClick、 onChange 等）。
这同样适用于 TSX：
当您复制一段包含单标签的 HTML 代码并将其粘贴到 JSX 中时，PyCharm 会在每个单标签的末尾自动添加一个斜杠 /。
若要按原样将 HTML 代码复制到 JSX 或 TSX，请使用 Paste Simple Ctrl+Alt+Shift+V ，或打开 设置 对话框（Ctrl+Alt+S ），转到 设置页面，并清除 在将代码粘贴到 JSX 文件时闭合 HTML 单标签 和 在粘贴到 JSX 文件时转换 HTML 属性名 复选框。
React 代码片段
PyCharm 随附了超过 50 个代码片段的集合，这些片段可展开为 React 应用中经常使用的不同语句和代码块，其中包括 React Hooks。 下面的示例展示了如何使用 rcjc 缩写来创建一个定义新 React 组件的类：
从片段创建 React 代码构造
在编辑器中键入所需的缩写并按 Tab。
按 Ctrl+J 并选择相关片段。 要缩小搜索范围，请开始键入该缩写，然后在 补全列表 中选择它。
有关详细信息，请参阅 实时模板。
查看所有可用的 React 片段列表
在 设置 对话框（Ctrl+Alt+S ）中，点击 实时模板 （位于 编辑器 下），然后展开 React 或 React 钩子 节点。
在 JSX 中使用 Emmet
借助 PyCharm，您不仅可以在 HTML 中使用 Emmet ，还可以在 JSX 代码中使用它，并利用一些 React 的特殊规则。 例如，缩写 div.my-class 在 JSX 中会展开为 <div className=”my-class"></div> ，而不会像在 HTML 中那样展开为 <div class=”my-class"></div>：
在 React 应用程序中导航
除了 基本导航 外，PyCharm 还可帮助您在 React 特定的代码元素之间跳转。
要跳转到某个方法或花括号
{}内的 JavaScript 表达式的声明，请选择该方法或表达式并按 Ctrl+B。要跳转到组件的声明，请选择组件名称并按 Ctrl+B。
要查看组件定义，请按 Ctrl+Shift+I。
要查看组件的快速文档，请按 Ctrl+Q。 详细了解请参阅 JavaScript 文档查找。
使用结构视图进行导航
结构 工具窗口和 结构 弹出窗口可为您提供更清晰的 React 代码结构洞察，便于导航，并有助于更好地理解 React 组件及相关元素。
结构 工具窗口显示以下 React 特定的节点：
由 Hook 初始化的变量会作为其节点下的子节点显示。
对 React 应用程序进行代码检查
所有 PyCharm 内置的针对 JavaScript 和 HTML 的 代码检查 同样适用于 JSX 代码。 PyCharm 会在存在未使用的变量和函数、缺少闭合标签、缺少语句等情况下提醒您。
对于某些检查，PyCharm 提供快速修复，例如建议添加缺少的方法。 要查看快速修复弹出窗口，请按 Alt+Enter。
要自定义检查列表，请打开 设置 对话框（Ctrl+Alt+S ），转到 Editor | Inspections，并禁用您不想看到的检查或更改其严重性级别。 详细了解请参阅 禁用与启用检查 和 更改检查严重性。
ESLint
除提供内置代码检查外，PyCharm 还针对 JSX 代码集成了 Linter，例如 ESLint。 ESLint 提供了广泛的检查规则，并且可以通过插件进行扩展。 在您键入时，PyCharm 会直接在编辑器中显示由 ESLint 报告的警告和错误。 借助 ESLint，您还可以使用 JavaScript Standard Style ，并 对 TypeScript 代码进行 Lint。
有关详细信息，请参阅 ESLint。
要让 ESLint 正确理解 React JSX 语法，您需要 eslint-plugin-react。 有了该插件，例如当未为 React 组件设置显示名称，或使用了某些危险的 JSX 属性时，您会收到警告：
在 React 项目中安装并配置 ESLint
在内置的 终端 （ ）中，键入：
npm install --save-dev eslint npm install --save-dev eslint-plugin-react向您的项目添加一个 ESLint 配置文件。
在 设置 对话框（Ctrl+Alt+S ）中，转到 语言与框架 | JavaScript | 代码质量工具 | ESLint ，并选择 自动 ESLint 配置。 PyCharm 会在您的项目 node_modules 文件夹中自动定位 ESLint，然后使用 .eslintrc.* 文件中的默认配置，或使用 package.json 中的
eslintConfig属性。或者，选择 手动 ESLint 配置 以使用自定义 ESLint 包和配置。
详情请参阅 在 PyCharm 中激活并配置 ESLint。
.eslintrc 结构示例（ESLint 1.x 搭配 react 插件）
在
ecmaFeatures对象中，添加"jsx" = true。 在此，您还可以指定希望使用的其他语言特性，例如 ES6 类、模块等。在
plugins对象中，添加react。在
rules对象中，您可以列出希望启用的 ESLint 内置规则 ，以及通过 react 插件提供的规则。{ "parser": "babel-eslint", "env": { "browser": true, "es6": true, "jest": true }, "rules": { "arrow-parens": ["error", "as-needed", { "requireForBlockBody": true }], "react/jsx-props-no-spreading": "off", "react/jsx-sort-props": ["error", { "reservedFirst": ["key"] }], "react/require-default-props": "off", "react/sort-prop-types": "error", "react/state-in-constructor": ["error", "never"], "semi-spacing": "warn" }, "overrides": [ { "files": [ "sample/**", "test/**" ], "rules": { "import/no-unresolved": "off" } } ] }
在 ESLint 官方网站 了解有关 ESLint 及 react 插件配置的更多信息。
在 React 应用程序中进行代码重构
除了 常见的 PyCharm 重构 之外，在 React 应用程序中，您还可以对 React 组件执行 重命名 ，并使用 提取组件 创建新组件。
重命名组件
下面是对仅在单个文件中定义并使用的组件进行重命名的示例：
同样，您可以重命名在一个文件中定义并通过命名导出导入到另一个文件的组件：
将插入符号置于组件名称内，然后按 Shift+F6 ，或从上下文菜单中选择 。
请遵循 React 命名约定 指定新的组件名称。
重命名 state 值
当您重命名 state 值时，PyCharm 会建议重命名相应的 setter（在 React useState Hook 中更新此 state 值的函数）。
将插入符号置于 state 值的名称内，然后按 Shift+F6 ，或从主菜单或上下文菜单中选择 。
指定新的值名称并按 Enter。 插入符号会移动到 setter，在其中会建议新的值名称。 按 Enter 接受建议。
提取组件
您可以通过从现有组件的 render 方法中提取 JSX 代码来创建新的 React 组件。 新组件可以定义为函数或类，请参阅 React 官方网站上的 函数式组件与类组件。
选择要提取的代码，然后从上下文菜单中选择 。
或者，在主菜单中转到 ，或按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 提取组件。
在打开的对话框中，指定新组件的名称及其类型。 默认情况下，会创建函数式组件。 如果您想将新组件定义为类，请选择 类。
点击 确定。 新组件将定义在现有组件旁边，并在其中使用。
可选： 使用 移动符号重构 将新组件和所有所需的导入移动到单独的文件中。
可选： 修改 PyCharm 用于新组件的代码模板。 在 设置 对话框（Ctrl+Alt+S ）中，转到 ，打开 代码 选项卡，并使用 Apache Velocity 模板语言 根据需要更新模板。
将函数转换为类组件
借助 转换为类组件 重构， PyCharm 会生成一个以您要转换的函数命名的 ES6 类。 该类继承自 React .Component ，并包含一个 render() 方法，函数体会被移动到其中。 详细了解请参阅 React 官方网站。
将插入符号置于要转换的函数内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为类组件。
将类转换为函数式组件
借助 转换为函数式组件 重构， PyCharm 会生成一个以您要转换的类命名的函数，并将 render() 方法的内容移动到函数体中。
将插入符号置于要转换的类内的任意位置，然后从主菜单或上下文菜单中选择 。
或者，按 Ctrl+Alt+Shift+T 并在弹出窗口中选择 转换为函数式组件。
React 应用程序中的解构
解构让您可以轻松地将数组和对象中的值解包到变量中。 此功能具有非常简洁的语法，当您需要在应用程序中传递数据时经常使用。
在处理 React 类组件时，请考虑使用 引入对象/数组解构 意图操作。 详细了解请参阅 Destructuring in JavaScript。
运行 React 应用程序
在 package.json 中的
start脚本旁的装订区域中点击
，或在 终端 Alt+F12 中执行 npm run start命令，或在 npm 工具窗口 （ ）中双击start任务。
等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 如果您的应用程序是用 create-react-app 生成的，默认 URL 为 http://localhost:3000/ 。 点击此链接以查看应用程序。
通过运行/调试配置运行 React 应用程序
对于在 PyCharm 新建项目 向导 如上所述中使用 create-vite 创建的应用程序，PyCharm 会生成一个默认名称为 npm start 的 npm 配置。 此配置会运行 react-scripts start 命令，该命令会启动开发服务器，并以开发模式启动您的应用程序。
在其他情况下，您需要手动 创建运行/调试配置 ，并设置主机、端口等实际参数。
创建 npm 运行/调试配置
转到 。 或者，从工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、 Node.js 运行时，以及要使用的包管理器。
在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 通常会使用默认的
start脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。
可选：
要在浏览器中打开应用程序，请按以下方式更新配置：在 浏览器 / Live Edit 选项卡中，选择 启动后 复选框，选择用于打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您将要调试应用程序，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用程序
从工具栏的列表中选择 npm start 运行配置，然后点击其旁边的
。
等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 点击此链接以查看应用程序。
或者，启用 PyCharm 在启动时打开应用程序 如上所述。
调试 React 应用程序
您可以通过 启动运行/调试配置 或 从运行工具窗口 来开始调试会话，该窗口会显示您的应用程序在开发模式下运行的 URL。
通过运行/调试配置开始调试
要调试您的 React 应用程序，您需要两个运行/调试配置：
一个用于在开发模式下启动应用程序的 npm 配置， 如上所述。
一个用于将调试器附加到在开发模式下运行的应用程序的 JavaScript 调试 配置。
您可以在 npm 配置内创建一个 JavaScript 调试 配置，以便同时启动它们，具体请参阅 使用 npm 运行/调试配置运行并调试 React 应用程序。
或者，分别创建并启动一个 npm 和一个 JavaScript 调试 运行/调试配置，具体请参阅 使用 JavaScript Debug 运行/调试配置开始调试。
使用单个 npm 运行/调试配置运行并调试 React 应用程序
在您的代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用
create-react-app生成了应用程序， PyCharm 已经创建了一个默认名称为 npm start 的 npm 配置。 该配置可在 运行 小部件和 运行/调试配置 对话框中使用。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、 Node.js 运行时，以及要使用的包管理器。
在 命令 字段中，从列表中选择 run ，然后在 脚本 列表中选择要运行的脚本。 通常会使用默认的
start脚本，但您可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用程序。在 浏览器 / Live Edit 选项卡中，选择 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，选择 使用 JavaScript 调试器 复选框，然后指定应用程序将运行的 URL。
点击 运行。
要重新运行该配置，请在 运行 小部件的列表中选择它，然后点击其旁边的
。PyCharm 会在开发模式下运行应用程序，并同时启动调试会话。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式进行： 逐步执行程序、 停止并恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在您的代码中设置 断点。
在开发模式下启动应用程序， 如上所述 ，并等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 复制此 URL 以便 在 JavaScript Debug 配置中稍后指定。
创建一个 JavaScript 调试 配置。 为此，请在主菜单中转到 ，点击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript 调试 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或在 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行该配置，请在 运行 小部件的列表中选择它，然后点击其旁边的
。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式进行： 逐步执行程序、 停止并恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM ，等等。
从运行工具窗口或内置终端开始调试
如果您的应用程序在开发模式下运行在 localhost 上，尤其是如果它是使用 create-react-app 生成的，您可以直接从 运行 工具窗口或内置的 终端 启动调试会话。
在您的代码中设置 断点。
在开发模式下启动应用程序， 如上所述 ，并等待应用程序编译完成并且开发服务器已就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 PyCharm 会使用自动生成的类型为 JavaScript Debug 的 配置启动调试会话。
如果您是在开发模式下从 新建终端 启动了应用程序，您只需点击链接旁的 在浏览器中开始调试 按钮。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式进行： 逐步执行程序、 停止并恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM ，等等。
构建 React 应用程序
您需要设置构建过程，如果您 在现有 PyCharm 项目中安装了 React。 在 React 官方网站 了解为您的 React 应用程序配置构建流水线的各种方式。
测试 React 应用程序
您可以运行和调试 Jest 测试 ，适用于 使用 create-vite 创建 的 React 应用程序。 在开始之前，请确保已将 react-scripts 包添加到 dependencies 对象的 package.json 中。
您可以直接在编辑器中，或从 项目 工具窗口，或通过运行/调试配置运行和调试 Jest 测试。 有关详细信息，请参阅 Jest。
从编辑器运行测试
在装订区域中点击
或 
，并从列表中选择 运行 <test_name>。
您还可以直接在编辑器中查看测试是通过还是失败，这要归功于装订区域中的 测试状态 图标
和 
。
创建 Jest 运行/调试配置
打开 Run/Debug Configuration 对话框（ 在主菜单中），在左侧窗格中点击
，并从列表中选择 Jest。 运行/调试配置： Jest 对话框随即打开。指定要使用的 Node.js 运行时以及应用程序的工作目录。 默认情况下， 工作目录 字段显示项目根文件夹。 要更改此预定义设置，请指定所需文件夹的路径。
在 Jest 包 字段中，指定 react-scripts 包的路径。
在 Jest 选项 字段中，键入
--env=jsdom。
运行测试
从配置列表中选择 Jest 运行/调试配置，然后在列表或工具栏中点击
 。监控测试执行并在 测试运行器 选项卡的 运行 工具窗口中分析测试结果。 有关详细信息，请参阅 查看测试结果。
调试测试
从主工具栏的列表中选择 Jest 运行/调试配置，然后点击
 位于右侧。在 调试工具窗口 中，进行常规操作： 逐步执行程序、 停止并恢复 程序执行、 在挂起时检查 ，探索调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM ，等等。
已知限制
当您在调试会话期间首次打开应用程序时，可能会出现页面加载时执行的代码中的某些断点未被命中的情况。 原因是，为了能在原始源代码中的断点处停止，PyCharm 需要从浏览器获取源映射。 不过，浏览器只有在页面至少完整加载过一次之后，才能传递这些源映射。 作为一种变通方法，请在浏览器中手动重新加载页面。
在一个项目中使用多个框架
有时，您可能需要在一个 React 项目中使用其他框架。
要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .ws-context ，并指定在每个特定文件或文件夹中应使用的框架。 该文件中的设置将覆盖默认配置。
在项目根目录中，从上下文菜单中选择 新建 | 文件 ，并指定
.ws-context作为文件名。在
.ws-context中，使用两种类型的属性：<context-name>，其值为上下文值字符串带有上下文详细信息对象的 GLOB 模式
使用以下上下文值：
framework：vue、angular、react、svelte、astroangular-template-syntax：V_2、V_17nextjs-project：nextjsastro-project：astrovue-store：vuex、piniavue-class-component-library：vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect：jsdoc-typescript、jsdoc-closure
为简单起见，请使用路径嵌套。
GLOB 路径的最后一段是文件名模式，仅支持
*通配符。如果最后一段是
**，则匹配所有嵌套的目录和文件。顶层上下文属性应使用
/**模式。
当多个模式匹配同一文件名时，将使用以下规则来消除歧义：
选择路径段数量最多的模式，但不包括
**段。选择纯文件名模式，即不以
**或/结尾的模式。选择最先定义的模式。
示例
假设您有一个项目，在各个文件夹中使用了多个框架。
要为项目中的每个文件获得上下文感知的编码辅助，请将以下代码添加到 .ws-context 中：