Astro
WebStorm 提供基本的 Astro web framework 功能，如语法高亮、具有自动导入的代码补全、重构、导航、意图动作、代码折叠、Emmet 支持和正确的格式化。
开始之前
请确保您的计算机上已安装 Node.js。
在 设置 | 插件 页面上的 Marketplace 选项卡中安装并启用 Astro 插件，具体请参见 从 JetBrains Marketplace 安装插件。
创建 Astro 应用程序
打开命令行终端或内嵌 终端 （Alt+F12 ），并根据所使用的软件包管理器输入以下命令之一：
npm create astro@latest适用于npmpnpm create astro@latest适用于pnpmyarn create astro适用于 Yarn
回答启动向导中的问题：
按格式
./<project_name>指定要创建应用程序的文件夹。还请指定是否希望基于 Astro 官方示例和 starter templates 创建应用程序。
打开具有 Astro 特定结构的生成应用程序（）。
请访问 Astro 官方网站 ，了解更多信息。
从现有 Astro 应用程序开始
要继续开发现有的 Astro 应用程序，请在 WebStorm 中打开它并下载所需的依赖项。
打开已存在于您电脑上的应用程序源代码
在 欢迎 屏幕上点击 打开 ，或从主菜单中选择 。 在打开的对话框中，选择存放源代码的文件夹。
从版本控制中检出应用程序源代码
在 欢迎 屏幕上点击 克隆版本库克隆。
或者，从主菜单中选择 、 或 。
主菜单中显示的可能不是 Git ，而是与您的项目关联的其他版本控制系统。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要检出应用程序源代码的仓库。 有关更多信息，请参见 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
您可以使用 npm、 Yarn 1 或 Yarn 2 ，详细信息请参见 npm 和 Yarn。
或者，在编辑器或 项目 工具窗口 Alt+1 中 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开在 WebStorm 外部创建并导入至其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理包含未知源代码的项目。
请选择以下其中一个选项：
安全模式下预览 ：在此情况下，WebStorm 以预览模式打开项目。 这意味着您可以浏览项目源代码，但不能运行任务和脚本，也不能运行/调试项目。
WebStorm 会在编辑区域顶部显示一条通知，您可以随时点击 信任项目… 链接加载项目。
信任项目 ：在此情况下，WebStorm 会打开并加载项目。 这意味着项目已初始化，项目插件已解析，依赖项已添加，所有 WebStorm 功能可用。
不打开 ：在此情况下，WebStorm 不会打开项目。
请参阅 项目安全性 了解更多信息。
运行您的应用程序
打开您的 package.json ，点击
图标（位于 start或dev脚本旁边的边距中），然后在上下文菜单中选择 运行 'start'。要在浏览器中打开应用程序，请点击 运行 工具窗口中的链接。
在应用程序运行期间，您对代码所做的所有更改都会立即反映到页面上。
配置 Astro 语言服务器
按 Ctrl+Alt+S 打开设置，然后选择 。
或者，点击状态栏中的 语言服务 小部件，选择 Astro ，然后点击
。
指定要使用的 Astro Language Server 包。
指定是否希望使用来自 Astro Language Server 的数据来获得编码辅助。
默认情况下，选中了 自动 选项，因此 WebStorm 会在任何适用的上下文中自动启用与 Astro Language Server 的集成。
选择 已禁用 选项以仅基于内部 WebStorm 解析器和检查数据获得编码辅助。
代码辅助
WebStorm 提供基本的 Astro 功能，例如语法高亮、具备自动导入的代码补全、重构、 导航、 意图操作、 正确格式化和代码折叠以及 Emmet 支持。
代码补全
除了 通用补全外，WebStorm 还提供面向 Astro 特定符号的补全。
WebStorm 会在您键入时显示补全建议。 或者，将光标置于要补全的符号处，按 Ctrl+Space。
云端补全
WebStorm 为 Astro 应用模板部分中的 props 、import 语句和标签提供 Cloud completion。
AI 助理 提供支持的 Cloud completion 可以基于项目上下文实时补全单行、代码块甚至整个函数。
Cloud Completion 在考虑上下文的前提下，建议语法上可接受的解决方案，并提前运行各种 代码检查以排除出错的变体。
启用云端补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选中 Enable cloud completion suggestions 复选框。 并选中 通用补全 复选框。
自动导入
WebStorm 在您键入或完成代码时可即时生成 import 语句。
未导入的符号会以下划线标记。 要插入 import 语句，请将鼠标悬停在带下划线的符号上，然后点击弹出窗口中的 导入 <符号名称> 链接。
或者，将光标放置在要导入的符号上，按 Alt+Enter ，然后从列表中选择 导入 <符号名称>。
详细了解请参见 自动导入。
重构代码
WebStorm 在 Astro 专属上下文中支持 提取 与 内联重构操作。
选择要重构的代码片段或将光标置于其中，按 Ctrl+Alt+Shift+T ，然后从列表中选择所需的重构操作。
详细了解请参见 代码重构、 重构 JavaScript 和 重构 TypeScript。
通过组件用法导航
使用内联提示从组件跳转到其用法。 如果组件被多次使用，WebStorm 会显示检测到的用法列表。 选择相关用法以跳转至该位置。
默认会显示 显示组件用法 提示。 要关闭它们，请按 Ctrl+Alt+S 打开设置并选择 编辑器 | 内嵌提示。 然后在 代码视图 下清除 组件用法 复选框。
或者，在编辑器中右键点击一个 显示组件用法 提示，并选择 隐藏“代码视图：组件用法”内嵌提示。
在项目中使用多个框架
有时，您可能需要在一个 Astro 项目中使用其他框架。
要在每个文件中获得上下文相关的编码辅助，请创建一个配置文件 .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 中：