Svelte for VS Code：提升Svelte开发效率的必备工具

Svelte for VS Code扩展为VS Code用户提供了专门针对Svelte组件的语法高亮和丰富的智能感知功能，利用svelte语言服务器实现。无论您是新手还是经验丰富的开发者，该扩展都能显著提升您的开发效率。

安装与设置

为了确保最佳体验，请检查并调整您的VS Code设置：

• 如果您的设置中包含 "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的设置，如脚本、标记和样式的排序顺序。更多信息及配置方法请参考文档。

使用该扩展需要VS Code版本1.52.0及以上。

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

更多文档和故障排除信息，请参考此处。

功能亮点

在Svelte文件中，您可以享受以下功能：

• 诊断信息
• 支持提供源映射的svelte预处理器
• 格式化（通过prettier-plugin-svelte）
• 查看编译后的代码命令：“Svelte: Show Compiled Code”
• 提取模板内容到新组件的命令：“Svelte: Extract Component”
• 悬停信息
• 自动补全
• Emmet支持
• 大纲面板中的符号
• CSS颜色高亮和颜色选择器
• 跳转到定义
• 代码操作

该扩展还包含一个TypeScript插件，激活后可在JavaScript和TypeScript文件中为与Svelte文件的交互提供智能感知。

设置选项

• svelte.enable-ts-plugin：启用一个TypeScript插件，为TS/JS文件中的Svelte文件提供智能感知。默认值：false
• svelte.language-server.runtime：指定用于运行语言服务器的Node可执行文件路径。这在您依赖原生模块（如node-sass）时很有用，因为没有此设置，这些模块将在vscode的上下文中运行，可能会导致Node版本不匹配。最低要求的Node版本为12.17。出于安全原因，此设置只能在用户设置中更改。
• svelte.language-server.ls-path：通常您不会设置此项。语言服务器可执行文件的路径。如果您安装了svelte-language-server npm包，它位于bin/server.js中。路径可以是相对于工作区根目录的相对路径，也可以是绝对路径。仅当您想使用自定义版本的语言服务器时才设置此项，这将使用工作区版本的TypeScript。出于安全原因，此设置只能在用户设置中更改。
• svelte.language-server.runtime-args：通常您不会设置此项。启动语言服务器时传递给Node的附加参数。这在您使用如Yarn PnP并需要其加载器参数时很有用，如["--loader", ".pnp.loader.mjs"]。
• svelte.language-server.port：通常您不会设置此项。指定启动语言服务器的端口。用于调试/性能分析时附加到进程。如果遇到由于“端口已被使用”而导致的崩溃，请尝试设置端口。-1 = 使用默认端口。
• svelte.trace.server：跟踪VS Code与Svelte语言服务器之间的通信。默认值：off

值可以是off、messages或verbose。通常您不会设置此项。用于调试语言服务器功能。如果启用，您可以在集成终端附近的输出通道中查看日志。

• svelte.plugin.XXX：用于切换扩展特定功能的设置。所有设置的完整列表请参考此处。

与Yarn 2 PnP的使用

1. 运行yarn add -D svelte-language-server以将svelte-language-server安装为开发依赖。
2. 运行yarn dlx @yarnpkg/sdks vscode以生成或更新VSCode/Yarn集成SDK。这也将为工作区设置svelte.language-server.ls-path和svelte.language-server.runtime-args，指向工作区安装的语言服务器。请注意，这需要工作区信任 - 否则，请在用户配置中设置svelte.language-server.ls-path和svelte.language-server.runtime-args。
3. 重启VSCode。
4. 提交对.yarn/sdks的更改。

致谢

• PostCSS语法基于hudochenkov/Syntax-highlighting-for-PostCSS