Svelte
WebStorm 提供基本的 Svelte 框架 功能，例如语法高亮、 代码补全 （带有 自动导入 ）、重构、 导航、 意图操作 、代码折叠、 实时模板支持以及 正确的格式化。
开始之前
请确保您的计算机上安装了 Node.js。
在 设置 | 插件 页面、选项卡 Marketplace 上安装并启用 Svelte 插件，如 从 JetBrains Marketplace 安装插件 中所述。
创建 Svelte 应用程序
创建 Svelte 应用程序的推荐方法是使用 SvelteKit ，这是 Svelte 团队的官方应用框架。
打开您的命令行 shell 或嵌入式 终端 （Alt+F12 ），然后输入
npx sv create <project_name>。回答向导中提出的问题。
使用 Svelte 特定结构（ ）打开生成的应用程序，并运行
npm install以安装依赖项。
从 Svelte 官方网站 了解更多信息。
从现有的 Svelte 应用程序开始
要继续开发现有的 Svelte 应用程序，请在 WebStorm 中打开它并下载所需的依赖项。
打开您计算机上已有的应用程序源代码
点击 打开 屏幕上的 欢迎 或从主菜单中选择 。 在打开的对话框中，选择存储源文件的文件夹。
从您的版本控制系统检出应用程序源代码
在 欢迎 屏幕上点击 克隆仓库。
或者，从主菜单中选择 、 或 。
在主菜单中，您可能会看到与您的项目关联的其他任何版本控制系统，而不是 Git。 例如， Mercurial 或 Perforce。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出应用程序源代码的存储库。 有关更多信息，请参阅 检出项目（克隆）。
下载依赖项
在弹出窗口中点击 运行 'npm install' 或 运行 'yarn install'：
或者，在编辑器中或在 项目 工具窗口 Alt+1 中，从 package.json 的上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开一个在 WebStorm 外部创建并导入到其中的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理包含不熟悉的源代码的项目。
请选择以下选项之一：
安全模式中预览 ：在这种情况下，WebStorm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但无法运行任务和脚本，也无法运行或调试您的项目。
WebStorm 会在编辑器区域顶部显示一条通知，您可以点击 信任项目… 链接，随时加载您的项目。
信任项目 ：在这种情况下，WebStorm 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 WebStorm 功能都可用。
不打开 ：在这种情况下，WebStorm 不会打开项目。
有关更多信息，请参阅 项目安全。
在 Svelte 代码中配置编码辅助
通过与 Svelte Language Server 的集成，您可以在 Svelte 代码中获得类型检查和补全功能。 或者，您可以仅使用 WebStorm 的内部检查和代码补全功能。
在 设置 对话框（Ctrl+Alt+S ），转到 。
指定从哪里获取编码辅助：
要使用 Svelte Language Server，请选择 已启用。
要使用 WebStorm 的内部检查和代码补全，请选择 已禁用。
配置内存处理
尽管 WebStorm 力求与语言服务实现顺畅集成，仍可能出现由语言服务引起而非 WebStorm 本身导致的 内存不足 错误。
为防止出现 内存不足错误或使其得到无缝解决，从而确保语言服务稳定运行，您可以配置内存处理。 通过 语言服务 了解详情。
Svelte 语言服务的内存处理设置始终从 TypeScript 语言服务继承。
为 TypeScript 语言服务配置内存处理
按 Ctrl+Alt+S 打开设置，然后转到 。
在 语言服务内存 区域，选择内存处理模式：
选择 如果可用，自动增加内存 ，以静默增加内存并重启语言服务。
或者，选择 设置内存限制 ，并指定语言服务可使用的最大内存。
如果指定的内存大小超过可用 RAM，WebStorm 会在工具提示中建议一个合适的值。
编写和编辑代码
在 .svelte 组件和相关文件中，WebStorm 提供语法高亮、 代码补全 （带有 自动导入 ）、重构、 导航、 意图操作 、代码折叠、 实时模板支持以及 正确的格式化。
创建 Svelte 组件
在 项目 工具窗口 Alt+1 中，选择新组件的父文件夹，然后从列表中选择 Svelte 组件。
代码补全
除了 通用补全 外，WebStorm 还提供针对 Svelte 特定符号的补全。
WebStorm 在您输入时显示补全建议。 或者，将插入符号放在要补全的符号上，然后按 Ctrl+Space。
云补全
WebStorm 为 Svelte 应用程序的组件属性、导入语句和模板部分中的标签提供 云补全。
由 AI 助手 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。
启用云补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内嵌补全。
请选择 Enable cloud completion suggestions 复选框。 并选择 通用补全 复选框。
自动导入
WebStorm 会在您输入或补全代码时，动态生成 .svelte 和 JavaScript 文件中的导入语句。
未导入的符号会用下划线标记。 要插入导入语句，将鼠标悬停在带下划线的符号上，然后点击弹出窗口中的 导入<符号名称> 链接。
或者，将插入符号放在要导入的符号上，按 Alt+Enter ，然后从列表中选择 导入<符号名称>。
有关更多信息，请参阅 自动导入。
代码重构
选择要重构的代码片段或将插入符号放在其中，按 Ctrl+Alt+Shift+T ，然后从列表中选择所需的重构。
从 代码重构、 重构 JavaScript 和 重构 TypeScript 了解更多。
使用组件导航
使用内嵌提示从组件跳转到其用法。 如果一个组件被多次使用，WebStorm 会显示检测到的使用情况列表。 选择相关用法以跳转。
显示组件用法 提示默认显示。 要将其关闭，请按 Ctrl+Alt+S 打开设置并选择 编辑器 | 内联提示。 然后取消选中 组件用法 复选框 代码视图。
或者，右键点击编辑器中的 显示组件用法 提示，然后选择 隐藏“Code Vision: Component usages”内嵌提示。
运行您的应用程序
在 package.json 中
dev脚本旁的标记栏中单击
，或在 终端 Alt+F12 中执行 npm run dev命令，或在 npm 工具窗口 () 中双击dev任务。请等待应用编译完成且开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 如果您的应用程序是使用 SvelteKit 生成的，默认 URL 是 http://localhost:8080/ 。 点击此链接以查看应用。
通过运行/调试配置运行 Svelte 应用程序
对于在 WebStorm 新建项目 向导中创建的 SvelteKit 应用程序（如上所述 ），WebStorm 会生成一个默认名称为 dev 的 npm 配置。 此配置会启动开发服务器并以开发模式启动您的应用程序。
在其他情况下，您需要手动 创建运行/调试配置 ，并设置实际参数，例如主机、端口等。
创建一个 npm 运行/调试配置
转到 。 或者，在工具栏上的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的
dev脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。
可选：
要在浏览器中打开应用程序，请按照以下步骤更新配置：在 Browser / Live Edit 选项卡中，选中 启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您打算调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用程序
调试您的应用程序
您可以通过 启动运行/调试配置或 从运行工具窗口 ，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。
通过运行/调试配置开始调试
要调试您的 Svelte 应用程序，您需要两个运行/调试配置：
在开发模式下启动应用程序的 npm 配置， 如上所述。
一个用于将调试器附加到在开发模式下运行的应用的 JavaScript 调试 配置。
您可以在 JavaScript 调试 配置中创建 npm 配置，以便按照 使用 npm run/debug 配置运行和调试 Vite 应用程序 中所述一起启动它们。
或者，分别创建并启动 npm 和 JavaScript 调试 运行/调试配置，如 使用 JavaScript 调试 运行/调试配置开始调试 中所述。
使用单个 npm 运行/调试配置运行和调试 Svelte 应用程序
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用 SvelteKit 创建了应用程序，WebStorm 已经生成了一个默认名称为 dev 的 npm 配置。 该配置可从 运行 小部件中使用。
在打开的 配置 对话框的 运行/调试 配置：npm 选项卡中，指定 package.json 、Node.js 运行时以及要使用的包管理器的位置。
在 命令 字段中，从列表中选择 运行 ，然后在 脚本 列表中选择要运行的脚本。 它很可能是默认的
dev脚本，但您也可以在 package.json 中配置其他脚本，例如在自定义端口上运行应用。在 Browser / Live Edit 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。
点击 运行。
要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的
。WebStorm 在开发模式下运行应用程序，同时启动调试会话。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在代码中设置 断点。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript 调试 配置。 要执行此操作，请在主菜单中转到 ，点击
，然后从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行该配置，请在 运行 小部件的列表中选择它，并点击其旁边的
。
当第一个断点被触发时，切换到 调试工具窗口并按常规操作： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
从 Run 工具窗口或内置 Terminal 开始调试
如果您的应用程序在 localhost 上以开发模式运行，特别是如果它是使用 SvelteKit 生成的，您可以直接从 >运行 工具窗口或内置的 终端 启动调试会话。
在代码中设置 断点。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
在 运行 工具窗口或 终端 中会显示您的应用正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 WebStorm 将使用自动生成的类型为 JavaScript 调试 的 配置启动调试会话。
当第一个断点被触发时，切换到 调试工具窗口并按常规操作： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
测试您的应用程序
在 WebStorm 中测试 Svelte 应用程序的推荐方法是 使用 Vitest 框架。
如果您使用 SvelteKit 创建应用程序 如上所述 ，请在通过项目生成向导时选择 添加 Vitest 进行单元测试 选项。
在一个项目中使用多个框架
有时，您可能需要在一个 Svelte 项目中使用其他框架。
要在每个文件中获得上下文感知的编码辅助，请创建一个配置文件 .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: