Sublime如何配置Svelte组件开发 Sublime编写Svelte高亮设置【前端】-sublime-PHP中文网

Sublime Text需安装Svelte for Sublime插件、手动绑定.svelte文件为Svelte语法，并可选配置LSP与svelte-language-server实现跳转和补全。

sublime如何配置svelte组件开发 sublime编写svelte高亮设置【前端】

Sublime Text 默认不识别 .svelte 文件，直接打开就是纯文本——语法高亮、标签闭合、JS/TS/CSS 混合解析全失效。装对插件 + 绑定语法 + 补齐依赖，三步缺一不可。

安装 Svelte for Sublime 插件并确认生效

这是最基础也最容易卡住的一步。别搜“Svelte syntax”或“Svelte Highlight”，只认准 Svelte for Sublime（作者是 `nathanbuchar`，GitHub 星标超 300+，持续维护）。

按 Ctrl+Shift+P（Win/Linux）或 Cmd+Shift+P（Mac）调出命令面板
输入 Package Control: Install Package 回车，等待列表加载完成
搜 Svelte for Sublime，**不要选 “Svelte Language Server” 或 “Svelte Syntax”** —— 前者是 LSP 服务端，后者已停更多年
安装后，打开任意 .svelte 文件，右下角应显示 Svelte，不是 Plain Text 或 HTML

手动绑定 .svelte 文件类型（常见 fallback 场景）

插件装了但右下角仍显示 HTML 或 Plain Text？说明文件扩展名没被正确关联。这不是插件坏了，是 Sublime 没“记住”该用什么语法解析。

打开一个 .svelte 文件
点击窗口右下角当前语法标识（比如显示 HTML）
选择 Open all with current extension as… → Svelte
此后所有新打开的 .svelte 文件都会自动使用 Svelte 语法
若绑定后重启 Sublime 又回退，检查是否装了冲突扩展（如旧版 Svelte Syntax 或 Svelte Language Server），卸载它们

启用混合语法高亮与代码片段（关键功能验证）

Svelte for Sublime 的核心价值在于它能把 <script></script> 块当 JS/TS 解析、当 CSS/SCSS 解析、模板部分保留 HTML 结构语义——不是简单加颜色，而是真能区分作用域。

前端开发

ys-agent 前端（frontend/）功能迭代的工程规范守门 skill。当任何 agent 接到 ys-agent 前端相关任务时——新增页面、新增组件、加 API、加 Pinia store、改路由、写 mock、调整布局、修改样式、对接后端接口、迁移 demo 代码、做主题、加权限、写公共组件、做数据可视化、做表单、做弹窗、做表格、做搜索过滤、调 Element Plus 用法、做响应式、做性能优化，或仅仅是在 frontend/ 目录下编辑任何 .vue / .ts / .scss / .c

下载

在 <script lang="ts"></script> 块里写 export let name: string，应有 TypeScript 类型提示（需已配置 TS 支持）
输入 ，应触发 class= 或 contenteditable= 等 HTML 属性补全
输入 <script> 后按 <code>Tab</script>，应展开完整 <script></script> 片段


若  里嵌套选择器无高亮，确认插件版本 ≥ 2.1.0（旧版不支持 SCSS/Less）
搭配 LSP 实现跳转与补全（进阶但实用）
仅靠语法高亮不够，真正提升效率的是定义跳转、hover 类型、$: 响应式声明识别。这需要 LSP 插件 + svelte-language-server 配合。

先通过 Package Control 安装 LSP 插件
终端执行 npm install -g svelte-language-server（确保 Node.js ≥ 16）
菜单 → Preferences → Package Settings → LSP → Settings，在用户设置中添加：

{
  "clients": {
    "svelte": {
      "command": ["svelte-language-server", "--stdio"],
      "enabled": true,
      "languageId": "svelte",
      "scopes": ["source.svelte"],
      "syntaxes": ["Packages/Svelte/syntaxes/Svelte.sublime-syntax"]
    }
  }
}
保存后重启 Sublime，再打开 .svelte 文件，Ctrl+Click 组件导入应可跳转，$: 声明变量 hover 会显示响应式依赖链。
注意：LSP 配置后若报错 Failed to start language server，大概率是 svelte-language-server 路径没被找到——运行 which svelte-language-server（macOS/Linux）或 where svelte-language-server（Windows），把输出路径填进 command 数组里。