Pika Svelte for VS Code：提升Svelte开发体验的必备扩展

Pika Svelte for VS Code是为Visual Studio Code用户设计的Svelte开发工具，旨在通过提供语法高亮、智能感知和多种功能，帮助开发者更高效地编写Svelte组件。本文将详细介绍如何设置和使用此扩展，确保您能充分利用其强大功能，提升开发效率。

设置指南

在使用Pika Svelte for VS Code之前，请确保您的VSCode设置中没有以下配置。如果有，请移除：

"files.associations": {"*.svelte": "html"}

如果您之前安装了由James Birtles开发的旧版"Svelte"扩展，请卸载它：

• 通过用户界面：在扩展窗口中搜索@installed即可找到（直接搜索Svelte无效）。
• 通过命令行：输入code --uninstall-extension JamesBirtles.svelte-vscode。

此扩展内置了Svelte文件的格式化工具。要启用此扩展对Svelte文件的格式化，请在VS Code设置中添加以下配置：

"[svelte]": {
  "editor.defaultFormatter": "svelte.svelte-vscode"
}

格式化工具基于Prettier插件，因此一些Prettier的格式化选项也适用。此外，还有针对Svelte的特定设置，如脚本、标记和样式的排序顺序。更多信息和配置方法请参见相关文档。

请确保您的VSCode版本至少为1.52.0。

如果您想使用TypeScript/SCSS/Less等技术，请查看相关文档。

更多文档和故障排查指南，请参见这里。

功能概览

• Svelte
  • 提供警告和错误的诊断信息
  • 支持提供源映射的Svelte预处理器
  • 通过prettier-plugin-svelte提供Svelte特定的格式化
  • 提供查看编译后代码的命令（DOM模式）："Svelte: Show Compiled Code"
  • 提供将模板内容提取为新组件的命令："Svelte: Extract Component"
• HTML
  • 悬停信息
  • 自动补全
  • Emmet支持
  • 在大纲面板中显示符号
• CSS / SCSS / LESS
  • 语法和lint错误的诊断信息
  • 悬停信息
  • 自动补全
  • 通过prettier提供格式化
  • Emmet支持
  • 颜色高亮和颜色选择器
  • 在大纲面板中显示符号
• TypeScript / JavaScript
  • 语法错误、语义错误和建议的诊断信息
  • 悬停信息
  • 通过prettier提供格式化
  • 在大纲面板中显示符号
  • 自动补全
  • 跳转到定义
  • 代码操作

设置选项

• svelte.language-server.runtime 指定用于运行语言服务器的Node可执行文件路径。这在依赖原生模块（如node-sass）时非常有用，因为没有此设置，这些模块将在vscode的上下文中运行，可能导致Node版本不匹配。最低要求的Node版本为12.17。出于安全考虑，此设置只能在用户设置中更改。

• svelte.language-server.ls-path 通常不需要设置。指定语言服务器可执行文件的路径。如果您安装了svelte-language-server npm包，它位于bin/server.js。路径可以是相对于工作区根目录的相对路径，也可以是绝对路径。仅当您想使用自定义版本的语言服务器时才设置此项。出于安全考虑，此设置只能在用户设置中更改。

• svelte.language-server.port 通常不需要设置。指定启动语言服务器的端口。可以用于附加到进程以进行调试/分析。如果由于“端口已被使用”而遇到崩溃，请尝试设置端口。-1表示使用默认端口。

• svelte.trace.server 跟踪VS Code与Svelte语言服务器之间的通信。默认值：关闭 值可以是off、messages或verbose。通常不需要设置。可以在调试语言服务器功能时使用。如果启用，您可以在靠近集成终端的输出通道中查看日志。

• svelte.plugin.XXX 用于切换扩展特定功能的设置。所有设置的完整列表请参见这里。

与Yarn 2 PnP一起使用

1. 运行yarn add -D svelte-language-server以将svelte-language-server作为开发依赖项安装。
2. 运行yarn dlx @yarnpkg/pnpify --sdk vscode以生成或更新VSCode/Yarn集成SDK。
3. 在用户配置中设置svelte.language-server.ls-path，指向工作区安装的语言服务器。
4. 重启VSCode。
5. 提交对.yarn/sdks的更改。