Sublime如何实现代码自动补全？前端开发提效秘籍-sublime-PHP中文网

sublime text 默认仅支持单词级补全，需配置 sublimelsp + typescript-language-server 实现 ts/js 智能补全，并搭配 emmet 和 html-css-class-completion 支持 html/css 补全。

sublime如何实现代码自动补全？前端开发提效秘籍

Sublime Text 本身不带完整语言服务器支持，auto_complete 默认只补全当前文件已出现过的词（类似“单词级补全”），想实现真正意义上的函数、属性、导入项等智能补全，必须额外配置。

为什么 `Ctrl+Space` 没反应或只补全乱七八糟的变量？

这是默认行为：Sublime 的原生补全引擎不解析语法结构，也不读取 node_modules 或 TypeScript 类型定义。它只扫描当前视图和打开的标签页里的文本片段。

确认是否误关了自动触发："auto_complete": true 必须在用户设置中启用
auto_complete_delay 设为 0 才能即时响应 Ctrl+Space，否则有延迟（默认 50ms）
如果写 document. 后没弹出方法列表——这不是 bug，是原生能力限制，得靠插件补足

用 `SublimeLSP` + `typescript-language-server` 补全 TS/JS

这才是前端真正可用的方案：把 Sublime 当成 LSP 客户端，把类型信息交给外部语言服务器处理。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

先装插件：Package Control → Install Package → SublimeLSP
再装对应语言服务器：npm install -g typescript-language-server（确保 node 在 PATH 中）

配置 LSP.sublime-settings，关键字段：

{
  "clients": {
    "typescript-language-server": {
      "command": ["typescript-language-server", "--stdio"],
      "enabled": true,
      "initializationOptions": {},
      "settings": {"typescript.preferences.includeCompletionsForImportStatements": true},
      "selector": "source.ts, source.tsx, source.js, source.jsx"
    }
  }
}

重启 Sublime 或执行 LSP: Restart Servers 命令

HTML/CSS 补全靠 `Emmet` 和 `HTML-CSS-Class-Completion`

别指望 LSP 支持 HTML 属性或 CSS 类名自动推导——它们不是“类型驱动”，而是依赖项目结构和配置。

Emmet 是必装项：输入 div.container>ul>li*3 按 Tab 直出结构，补全效率翻倍
HTML-CSS-Class-Completion 可扫描 tailwind.config.js 或 css 文件提取 class 名，但需手动指定路径："css_class_completion_paths" 配置项不能留空
注意：CSS 自定义属性（--my-color）默认不进补全列表，除非用 css-custom-properties 插件并开启 enable_custom_properties