Astro
WebStorm 提供基本的 Astro web framework功能，例如语法高亮、带自动导入的代码补全、重构、导航、意图、代码折叠、Emmet 支持和正确的格式化。
开始之前
请确保您的计算机上安装了 Node.js。
在 设置 | 插件 页面的 Marketplace 选项卡上安装并启用 Astro插件，如 从 JetBrains Marketplace 安装插件中所述。
创建一个 Astro 应用程序
打开您的命令行 shell 或嵌入式 终端 （Alt+F12 ），然后根据您使用的包管理器输入以下命令之一：
npm create astro@latest用于npmpnpm create astro@latest用于pnpmyarn create astro用于 Yarn
回答向导中提出的问题：
指定您希望以
./<project_name>格式创建应用程序的文件夹。还需指定是否希望基于 Astro 官方示例使用 入门模板创建应用程序。
使用 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 语言服务器包。
指定是否希望使用来自 Astro 语言服务器的数据进行编码辅助。
默认情况下，选中 自动 选项，因此 WebStorm 会在任何适当的上下文中自动启用与 Astro 语言服务器的集成。
选择 已禁用 选项以仅基于内部WebStorm解析器和检查的数据获取编码帮助。
请指定 @astrojs /ts-plugin 的位置，该插件为 TypeScript 文件中的
.astro导入提供支持，并支持在 TypeScript 和.astro文件间重命名符号和查找引用。
可选：
在 配置 区域，定制默认的 Astro 配置选项。 配置设置以
.json格式传递给 Astro 语言服务器。
配置内存处理
尽管 WebStorm 致力于与语言服务实现顺畅集成，但仍可能出现由语言服务引起而不是由 WebStorm 本身引起的 内存不足错误。
为防止出现 内存不足错误或使其得到无缝解决，从而确保语言服务稳定运行，您可以配置内存处理。 通过 语言服务 了解详情。
Astro 语言服务的内存处理设置始终继承自 TypeScript 语言服务。
为 TypeScript 语言服务配置内存处理
按 Ctrl+Alt+S 打开设置，然后转到 。
在 语言服务内存 区域中，选择内存处理模式：
选择 如果可用，自动增加内存 ，以自动增加内存并静默重启语言服务。
或者，选择 设置内存限制 并指定语言服务可使用的最大内存。
如果指定的内存大小超出了可用 RAM，WebStorm 会在工具提示中建议一个合适的值。
编码辅助
WebStorm 提供基本的 Astro 功能，例如语法高亮、带自动导入的代码补全、重构、 导航、 意图操作、 正确的格式化和代码折叠以及 Emmet 支持。
代码补全
除了 通用补全外，WebStorm 还提供针对 Astro 特定符号的补全。
WebStorm 在您输入时显示补全建议。 或者，将插入符号放在要补全的符号上，然后按 Ctrl+Space。
云补全
WebStorm 为 props 、导入语句和 Astro 应用程序模板部分中的标签提供 云补全。
由 AI 助手 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
请选择 Enable cloud completion suggestions 复选框。 并选择 通用补全 复选框。
文档查找
WebStorm 显示来自您的项目及其依赖项的符号引用，还包括标准对象和方法，以及 特定于框架的片段。
当您将鼠标悬停在符号上或按下 Ctrl+Q 时，会出现 快速文档 弹窗。 详细了解请参阅 快速文档查阅。
自动导入
WebStorm 在您输入或完成代码时动态生成导入语句。
未导入的符号会用下划线标记。 要插入导入语句，将鼠标悬停在带下划线的符号上，然后点击弹出窗口中的 导入<符号名称> 链接。
或者，将插入符号放在要导入的符号上，按 Alt+Enter ，然后从列表中选择 导入<符号名称>。
有关更多信息，请参阅 自动导入。
重构代码
WebStorm 在 Astro 特定上下文中支持 提取和 内联重构。
选择要重构的代码片段或将插入符号放在其中，按 Ctrl+Alt+Shift+T ，然后从列表中选择所需的重构。
从 代码重构、 重构 JavaScript 和 重构 TypeScript 了解更多。
使用组件导航
使用内嵌提示从组件跳转到其用法。 如果一个组件被多次使用，WebStorm 会显示检测到的使用情况列表。 选择相关用法以跳转。
显示组件用法 提示默认显示。 要将其关闭，请按 Ctrl+Alt+S 打开设置并选择 编辑器 | 内联提示。 然后取消选中 组件用法 复选框 代码视图。
或者，右键点击编辑器中的 显示组件用法 提示，然后选择 隐藏“Code Vision: Component usages”内嵌提示。
在一个项目中使用多个框架
有时，您可能需要在一个 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: