Svelte
WebStorm 提供基本的 Svelte 框架 功能，例如语法高亮、带有 自动导入 的 代码补全 、重构、 导航、 意图操作 、代码折叠、 实时模板支持以及 格式正确的代码。
开始之前
请确保您的计算机上已安装 Node.js。
在 设置 | 插件 页面上的 Marketplace 选项卡中安装并启用 Svelte 插件，具体操作请参见 从 JetBrains Marketplace 安装插件。
创建 Svelte 应用
推荐的创建 Svelte 应用的方式是使用 SvelteKit ，这是来自 Svelte 团队的官方应用框架。
打开命令行终端或内嵌的 终端 （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 检查与代码补全功能，请选择 已禁用。
编写并编辑代码
在 .svelte 组件及相关文件中，WebStorm 提供语法高亮、带有 自动导入 的 代码补全 、重构、 导航、 意图操作 、代码折叠、 Live Templates 支持以及 正确格式化。
创建 Svelte 组件
在 项目 工具窗口 Alt+1 中，选择新组件的父文件夹，然后从列表中选择 Svelte 组件。
代码补全
除了 常规代码补全之外，WebStorm 还提供针对 Svelte 特定符号的补全功能。
WebStorm 会在输入时显示补全建议。 或者，将插入符号置于要补全的符号处，按下 Ctrl+Space。
云端补全
WebStorm 针对 Svelte 应用的模板部分中的组件属性、import 语句及标签，提供 Cloud Completion 功能。
由 AI 助理 提供支持的 Cloud Completion 能够基于项目上下文实时补全单行、代码块乃至整个函数。
Cloud Completion 会在考虑上下文的前提下建议语法合理的解决方案，并预先执行各项 代码检查 ，以排除会导致错误的选项。
启用云端补全
按 Ctrl+Alt+S 打开设置并选择 编辑器 | 常规 | 内联补全。
选择 Enable cloud completion suggestions 复选框， 然后选择 通用补全 复选框。
自动导入
WebStorm 会在您输入或补全 .svelte 和 JavaScript 文件中的代码时即时生成 import 语句。
未导入的符号将带有下划线标记。 要插入 import 语句，将鼠标悬停在带下划线的符号上，然后点击弹出窗口中的 导入 <symbol name> 链接。
或者，将插入符号置于该符号上，按 Alt+Enter 并从列表中选择 导入 <symbol name>。
了解详情请参阅 自动导入。
代码重构
选择要重构的代码片段或将插入符号置于其中，按下 Ctrl+Alt+Shift+T ，然后从列表中选择所需的重构操作。
详细信息请参见 代码重构、 重构 JavaScript 和 重构 TypeScript。
使用组件用法进行导航
使用内联提示可从组件跳转到其用法位置。 如果某个组件被多次使用，WebStorm 将显示检测到的用法列表。 选择相关用法即可跳转。
默认会显示 显示组件用法 提示。 要关闭该提示，请按 Ctrl+Alt+S 打开设置并选择 编辑器 | 内嵌提示。 然后取消选中 组件用法 复选框下的 Code Vision。
或者，在编辑器中右键点击 显示组件用法 提示，并选择 隐藏“Code Vision：组件用法”内嵌提示。
运行您的应用
点击
图标（位于 package.json 中 dev脚本旁边的边栏），或在 终端 Alt+F12 中执行npm run dev命令，或在 npm 工具窗口 （ ）中双击dev任务。等待应用编译完成并启动开发服务器。
运行 工具窗口或 终端 会显示应用运行的 URL。 如果您的应用是通过 SvelteKit 生成的，则默认 URL 为 http://localhost:8080/ 。 点击此链接即可查看应用。
通过运行/调试配置运行 Svelte 应用
对于在 WebStorm 新建项目 向导中创建的 SvelteKit 应用程序（如上所述 ），WebStorm 会生成一个默认名称为 dev 的 npm 配置。 该配置会启动开发服务器，并以开发模式运行您的应用。
在其他情况下，您需要手动 创建运行/调试配置 ，并指定实际设置，例如 host、port 等。
创建 npm 运行/调试配置
转到 。 或者，从工具栏的 运行 小部件中选择 编辑配置。
在打开的 编辑配置 对话框中，点击工具栏上的 添加 按钮（
），然后从列表中选择 npm。在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、Node.js 解释器以及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 该脚本很可能是默认的
dev，但您也可以在 package.json 中配置其他脚本，例如使用自定义端口运行应用。
可选：
要在浏览器中打开应用，请按如下方式更新配置：在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，选择用于打开应用的浏览器，并指定应用将运行的 URL 地址。
如果您打算调试该应用，请选择 Google Chrome 或其他 基于 Chromium 的浏览器。
运行应用
调试您的应用
您可以通过 启动运行/调试配置或从 Run 工具窗口 （显示应用在开发模式下正在运行的 URL）开始调试会话。
通过运行/调试配置开始调试
要调试您的 Svelte 应用，您需要两个运行/调试配置：
一个用于以开发模式启动应用的 npm 配置， 如上所述。
一个用于将调试器附加到正在开发模式下运行的应用的 JavaScript 调试 配置。
您可以在 npm 配置中创建一个 JavaScript 调试 配置，以便一起启动，详情请参阅 使用 npm 运行/调试配置运行并调试 Vite 应用。
或者，分别创建并启动 npm 和 JavaScript 调试 运行/调试配置，详情请参阅 使用 JavaScript Debug 运行/调试配置启动调试。
使用单一 npm 运行/调试配置运行和调试 Svelte 应用
在代码中设置 断点。
创建一个 npm 配置， 如上所述。
如果您使用 SvelteKit 创建了应用，WebStorm 已经生成了一个默认名称为 dev 的 npm 配置。 该配置可通过 运行 小部件访问。
在打开的 运行/调试配置：npm 对话框的 配置 选项卡中，指定 package.json 的位置、Node.js 解释器以及要使用的软件包管理器。
在 命令 字段中，从列表中选择 run ，然后从 脚本 列表中选择要运行的脚本。 该脚本很可能是默认的
dev，但您也可以在 package.json 中配置其他脚本，例如使用自定义端口运行应用。在 浏览器 / 实时编辑 选项卡中，选中 启动后 复选框，从列表中选择 Google Chrome 或其他 基于 Chromium 的浏览器 ，选中 使用 JavaScript 调试器 复选框，并指定应用将运行的 URL。
点击 运行。
要重新运行该配置，请从 运行 小部件中的列表中选择该配置，然后点击其旁边的
。WebStorm 会以开发模式运行应用，同时启动调试会话。
命中第一个断点时，切换到 调试工具窗口 并按常规方式继续操作： 逐步执行程序、 暂停并恢复程序执行、 在暂停时检查程序 、查看调用堆栈和变量、设置监视、评估变量、 查看实际 HTML DOM 等。
使用 JavaScript 调试运行/调试配置开始调试
在代码中设置 断点。
如上所述 ，以开发模式启动应用，并等待应用编译完成及开发服务器就绪。
运行 工具窗口或 终端 将显示您的应用运行所在的 URL。 将此 URL 复制以便 稍后在 JavaScript Debug 配置中进行指定。
创建一个 JavaScript 调试 配置。 为此，请在主菜单中转到 ，点击
，并从列表中选择 JavaScript 调试。在打开的 运行/调试配置：JavaScript 调试 对话框中，指定配置名称以及应用在开发模式下运行的 URL 地址。 您可以在 运行 工具窗口或 终端 中复制此 URL， 如上所述。
单击 调试。
要重新运行配置，请从 运行 小部件中的列表中选择该配置，然后单击旁边的
。
当命中第一个断点时，切换到 Debug 工具窗口并按常规方式继续： 逐步执行程序、 暂停并恢复程序执行、 在挂起时检查程序 、探索调用堆栈和变量、设置监视、计算变量、 查看实际 HTML DOM等。
从“运行”工具窗口或内置终端开始调试
如果您的应用在 localhost 以开发模式运行，尤其是使用 SvelteKit生成的，则可以直接从 >运行 工具窗口或内置的 终端 中启动调试会话。
在代码中设置 断点。
如上所述以开发模式启动应用，并等待应用编译完成以及开发服务器就绪。
运行 工具窗口或 终端 将显示应用运行的 URL。 按住 Ctrl+Shift 并单击该 URL 链接。 WebStorm 将启动一个调试会话，并自动生成一个 类型为 JavaScript Debug的配置。
当命中第一个断点时，切换到 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_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 中：