Sublime如何为JavaScript项目配置代码提示和补全？ (LSP与TSServer)

LSP + typescript-language-server 是 sublime Text 最稳定、功能最全的 js/TS 补全方案，需先安装 LSP 插件和 node.js（v16.0+），再全局安装 typescript-language-server，最后配置 LSP 设置并添加项目级 jsconfig.json 以支持路径别名和类型推导。

直接用 LSP + typescript-language-server（即 tsserver 的标准 LSP 封装）是目前 sublime text 上最稳定、功能最全的 JS/TS 补全方案。它不依赖老旧的 SublimeCodeIntel，也不需要手动维护 jscompleter 那类半废弃插件。

确认已安装 LSP 和 Node.js 环境

这是前提，缺一不可。LSP 插件本身不带语言服务器，tsserver 依赖 node.js 运行时。

• LSP 插件必须通过 Package Control 安装（名称就是 LSP，作者 sublimelsp）
• 运行 node --version 能输出 v16.0+；若报错或版本过低，需重装 Node.js（推荐 LTS 版本）
• 确保 npm 可用，因为后续要用它全局安装 typescript-language-server

全局安装 typescript-language-server

这个包是微软官方 tsserver 的 LSP 包装器，比直接调用 tsserver 更兼容 Sublime 的 LSP 插件。

• 执行命令：

  npm install -g typescript-language-server

• 安装后验证路径：

  which typescript-language-server

  （macos/linux）或

  where typescript-language-server

  （windows）

• 如果返回空，说明未加入 PATH；可手动记下完整路径（如 /Users/xxx/.npm-global/bin/typescript-language-server），后续配置要用

配置 LSP 使用 tsserver

在 Sublime 中打开 Preferences → Package Settings → LSP → Settings，修改 settings 字段，**不是** clients 字段（那是旧版位置）：

立即学习“Java免费学习笔记（深入）”；

{   "clients":   {     "typescript-language-server":     {       "command":       [         "typescript-language-server",         "--stdio"       ],       "enabled": true,       "languageId": "javascript",       "scopes": ["source.js", "source.jsx"],       "syntaxes":       [         "Packages/javascript/JavaScript.sublime-syntax",         "Packages/Babel/JavaScript (Babel).sublime-syntax"       ],       "initializationOptions": {         "provideformatter": true       }     }   } }

• 若你用的是全局安装但命令找不到，把 "typescript-language-server" 替换为上一步查到的绝对路径（含引号）
• 想同时支持 TypeScript，请额外加一个 "languageId": "typescript" 的 client 块，或复用同一块并追加 "source.ts" 到 scopes 和 syntaxes
• "provideFormatter": true 开启后，右键菜单会出现 Format Document，但需项目根目录有 tsconfig.json 或 jsconfig.json 才生效

项目级配置：jsconfig.json 是补全质量的关键

没有 jsconfig.json，tsserver 只能做基础语法补全；加上它，才能识别路径别名、模块解析、类型声明等。

• 在项目根目录新建 jsconfig.json，最简内容如下：

  {   "compilerOptions": {     "module": "commonjs",     "target": "es2017",     "allowSyntheticDefaultImports": true,     "baseUrl": ".",     "paths": {       "@/*": ["src/*"]     }   },   "include": ["**/*.js", "**/*.jsx"],   "exclude": ["node_modules"] }

• "baseUrl" 和 "paths" 必须配对使用，否则别名（如 import Button from '@/components/Button'）无法跳转和补全
• 如果项目用了 ESM（type: "module"），需将 "module" 改为 "nodenext" 或 "es2022"，否则类型推导会出错

真正影响补全效果的，往往不是插件装没装对，而是 jsconfig.json 里 baseUrl 设错、include 漏了子目录，或者 node_modules 里没装 @types/react 这类类型包——这些细节不排查，光换插件没用。