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。
在打开的对话框中，从列表中选择您的版本控制系统，并指定要从中检出的应用程序源代码的存储库。 如需了解更多信息，请参见 Check out a project (clone)。
下载依赖项
请点击 运行 'npm install' 或 运行 'yarn install' 在弹出窗口中：
或者，从编辑器或 项目 工具窗口 Alt+1 的 package.json 上下文菜单中选择 运行 'npm install' 或 运行 'yarn install'。
项目安全性
当您打开一个在 WebStorm 之外创建并导入到 WebStorm 的项目时，WebStorm 会显示一个对话框，您可以在其中决定如何处理这个具有不熟悉源代码的项目。
请选择以下选项之一：
安全模式下预览 ：在这种情况下，WebStorm 以预览模式打开项目。 这意味着您可以浏览项目的源代码，但不能运行任务和脚本或运行/调试您的项目。
WebStorm 会在编辑器区域顶部显示一条通知，您可以随时点击 信任项目… 链接并加载您的项目。
信任项目 ：在这种情况下，WebStorm 会打开并加载一个项目。 这意味着项目已经初始化，项目的插件已解析，依赖项已添加，并且所有 WebStorm 功能都可用。
请勿打开 ：在这种情况下，WebStorm 不会打开项目。
请从 项目安全 中了解更多。
在 Svelte 代码中配置编码辅助
通过与 Svelte Language Server 的集成，您可以在 Svelte 代码中获得类型检查和补全功能。 或者，您可以仅使用 WebStorm 的内部检查和代码补全功能。
在 设置 对话框（Ctrl+Alt+S ）中，前往 。
指定从哪里获取编码辅助：
要使用 Svelte Language Server，请选择 已启用。
要使用 WebStorm 的内部检查和代码补全，请选择 已禁用。
编写和编辑代码
在 .svelte 组件和相关文件中，WebStorm 提供语法高亮、 代码补全 （带有 自动导入 ）、重构、 导航、 意图操作 、代码折叠、 实时模板支持以及 正确的格式化。
创建 Svelte 组件
在 项目 工具窗口 Alt+1 中，选择新组件的父文件夹，然后从列表中选择 Svelte 组件。
代码补全
除了 通用补全 外，WebStorm 还提供针对 Svelte 特定符号的补全。
WebStorm 在您输入时显示补全建议。 或者，将插入符号放在要补全的符号上，然后按 Ctrl+Space。
云补全
WebStorm 为 Svelte 应用程序的组件属性、导入语句和模板部分中的标签提供 云补全。
由 AI Assistant 驱动的云补全可以基于项目上下文实时自动补全单行代码、代码块，甚至整个函数。
云补全会根据上下文建议语法上可接受的解决方案，并提前运行各种 代码检查 ，以排除会导致错误的选项。
启用云补全
按下 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 中配置另一个脚本，例如，在自定义端口上运行应用程序。
可选：
要在浏览器中打开应用程序，请按照以下步骤更新配置：在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，选择要在其中打开应用程序的浏览器，并指定应用程序将运行的 URL 地址。
如果您要调试应用程序，请选择 Google Chrome 或另一个 Chromium-based browser。
运行应用程序
调试您的应用程序
您可以通过 启动运行/调试配置或 从运行工具窗口 ，该窗口显示您的应用程序在开发模式下运行的 URL，开始调试会话。
通过运行/调试配置开始调试
要调试您的 Svelte 应用程序，您需要两个运行/调试配置：
在开发模式下启动应用程序的 npm 配置， 如上所述。
开发模式下附加调试器到正在运行的应用程序的 JavaScript调试 配置。
您可以在 JavaScript调试 配置中创建 npm 配置，以便按照 使用 npm run/debug 配置运行和调试 Vite 应用程序 中所述一起启动它们。
或者，分别创建并启动 npm 和 JavaScript调试 运行/调试配置，如 使用 JavaScript 调试运行/调试配置开始调试 中所述。
使用单个 npm 运行/调试配置运行和调试 Svelte 应用程序
在您的代码中设置 breakpoints。
创建一个 npm 配置， 如上所述。
如果您使用 SvelteKit 创建了应用程序，WebStorm 已经生成了一个默认名称为 dev 的 npm 配置。 该配置可从 运行 小部件中使用。
在弹出的 配置 选项卡 运行/调试 配置：npm 对话框中，指定 package.json 的位置、Node.js 解释器及要使用的软件包管理器。
在 命令 字段中，从列表中选择 运行 ，然后从 脚本 列表中选择要运行的脚本。 很可能它将是默认的
dev脚本，但您可以在您的 package.json 中配置另一个脚本，例如，在自定义端口上运行应用程序。在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 Chromium-based browser ，选中 使用 JavaScript 调试器 复选框，然后指定您的应用程序将运行的 URL。
点击 运行。
要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的
。WebStorm 在开发模式下运行应用程序，同时启动调试会话。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
使用 JavaScript Debug 运行/调试配置开始调试
在您的代码中设置 breakpoints。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 请复制此 URL 到 稍后在 JavaScript Debug 配置中指定。
创建一个 JavaScript调试 配置。 要执行此操作，请在主菜单中转到 ，点击
，然后从列表中选择 Javascript 调试。在打开的 运行/调试配置：JavaScript Debug 对话框中，指定配置的名称以及应用程序在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
点击 调试。
要重新运行配置，请从 运行 小部件中的列表中选择，然后点击其旁边的
。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 HTML DOM ，等等。
从 Run 工具窗口或内置 Terminal 开始调试
如果您的应用程序在 localhost 上以开发模式运行，特别是如果它是使用 SvelteKit 生成的，您可以直接从 >运行 工具窗口或内置的 终端 启动调试会话。
在您的代码中设置 breakpoints。
启动应用程序的开发模式 ，如上所述 ，并等待应用程序编译完成以及开发服务器就绪。
运行 工具窗口或 终端 显示您的应用程序正在运行的 URL。 按住 Ctrl+Shift 并点击此 URL 链接。 WebStorm 启动带有 类型 JavaScript Debug的自动生成配置的调试会话。
当第一个断点被触发时，切换到 调试工具窗口 并按常规方式继续： 逐步执行程序， 停止并恢复程序执行， 在挂起时检查程序 ，探索调用堆栈和变量，设置监视，评估变量， 查看实际的 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_2V_17nextjs-project：nextjsastro-project：astrovue-store：vuexpiniavue-class-component-library：vue-class-component、vue -property-decorator、vue-facing-decoratorjsdoc-dialect：jsdoc-typescriptjsdoc-closure
使用路径嵌套以简化操作。
GLOB 路径的最后一段是文件名模式，它仅支持
*通配符。如果最后一个段是一个
**，它匹配所有嵌套的目录和文件。顶层上下文属性应具有
/**模式。
当多个模式匹配相同文件名时，将使用以下规则进行消歧：
选择路径段数最多的模式，排除
**段。选择纯文件名模式，这意味着它不会以
**或/结尾。选择最先定义的模式。
示例
假设您有一个项目，其中在各个文件夹中使用了多个框架。
要为项目中的每个文件获得上下文相关的帮助，请将以下代码添加到 .ws-context: