sublime text 4 真正支持 svelte 开发需四步协同:绑定.svelte后缀至svelte语法、安装javascriptnext解析块、配置lsp+svelte-language-server实现语义提示、选用支持svelte-directive等scope的主题。缺一即退化为纯文本高亮。

Sublime Text 4 要真正支持 Svelte 项目开发,不是装一个插件就能用——Svelte for Sublime 只提供语法骨架,JavaScriptNext - ES6 Syntax 负责解析 $: 和 export let,LSP + svelte-language-server 才管跳转和类型提示。少任何一环,.svelte 文件就退化成带颜色的纯文本。
确认 .svelte 文件已绑定到 Svelte 语法
这是最常卡住的第一步:插件装了,但右下角显示的是 HTML 或 Plain Text,说明 Sublime 根本没把后缀和语法关联上。
- 打开任意
.svelte文件,点击右下角当前语法名(比如HTML) - 选
Open all with current extension as…→ 再选Svelte(注意不是HTML或JavaScript) - 如果菜单里没有
Svelte,按Ctrl+`看控制台是否有ImportError;大概率是VueJS、Babel或旧版Svelte Syntax插件抢了关联权,先禁用它们 - 重启 Sublime 后又回退?检查是否手动改过
Packages/Svelte for Sublime/Svelte.sublime-syntax—— 改错一行,整个文件直接变白底黑字
让 <script> 和 <style> 块正确高亮</script>
<script></script> 里写 $: count = $store 还是灰的?这不是 Svelte 插件失效,是它依赖的嵌入语言解析器没加载成功。
-
<script></script>块必须靠JavaScriptNext - ES6 Syntax(推荐)或TypeScriptSyntax解析;只装Svelte for Sublime不会接管 JS/TS 高亮 - 验证方法:打开一个
.ts文件,右下角必须显示TypeScript;不是,就先修 TS 支持,再回头调 Svelte -
<style lang="scss"></style>需要单独安装SCSS插件;旧版不支持嵌套选择器高亮,版本至少 ≥ 2.1.0 - 别碰
Svelte.sublime-syntax文件——它自带嵌入规则,改错会导致整个文件退化为纯文本
启用 LSP 实现跳转、hover 和 $lib 路径识别
语法高亮只是“看得清”,LSP 才让你“点得进、查得到、补得全”。Svelte for Sublime 不做语义分析,这部分必须外接 svelte-language-server。
- 通过
Package Control安装LSP插件(作者sublimelsp),不要装独立的Svelte Language Server包(那是冲突源) - 终端执行
npm install -g svelte-language-server(Node.js ≥ 16) - 项目根目录必须有
svelte.config.js,哪怕内容只是module.exports = {};缺这个文件,服务器拒绝启动 -
$lib路径要生效,还需在tsconfig.json中配置:"$lib/*": ["src/lib/*"]且"baseUrl": "." - 改完配置后,必须手动触发:
Cmd+Shift+P→ 输入LSP: Restart Servers(只重启窗口没用)
指令(如 bind:value)和修饰符(如 |local)要有专属颜色
默认主题(如 Monokai、Default)不含 svelte-directive 或 svelte-modifier scope,所以 on:click 和普通属性一样灰。
- 换用已 patch 过 Svelte scope 的主题(如
Material Theme+),或手动在当前主题文件(如Monokai.sublime-color-scheme)的rules数组里加一段匹配meta.directive.svelte的规则 - 别指望靠改
color_scheme硬加——90% 情况会破坏其他语言高亮 - 常见症状:
class:name有颜色但bind:value没有 → 说明svelte-directivescope 没被识别,或主题未定义keyword.control.svelte - 最常被忽略的是嵌入语言插件的启用状态:哪怕装了
TypeScriptSyntax,如果它被禁用或加载失败,<script lang="ts"></script>里的类型提示就永远是黑字











