sublime text 能高效配置 typescript 开发环境，关键步骤如下：1. 安装 package control；2. 安装 typescript 插件；3. 安装 typescript build system；4. 配置 tsconfig.json 编译选项；5. 使用 lsp 和 typescript language server 实现代码补全与跳转；6. 美化界面安装主题和配色方案；7. 大型项目优化通过增量编译、项目引用、代码优化、增加内存限制等方式提升性能；8. 解决编译报错问题需检查代码、配置文件、禁用冲突插件并更新软件；9. 相比 vs code，sublime text 更轻量但功能略弱，适合轻量级需求用户。
其实，Sublime Text 也能很好地配置成一个高效的 TypeScript 开发环境，尤其是在大型项目中，关键在于找对方法，别被一些过时的教程误导。
首先，我们需要搞定 TypeScript 的编译和语法检查，然后是代码补全和跳转，最后再美化一下界面，让开发体验更上一层楼。
Sublime Text配置TypeScript的正确姿势
立即学习“前端免费学习笔记（深入）”；
-
安装 Package Control： 这是 Sublime 的灵魂，没有它，寸步难行。如果还没装，去官网复制一段代码，在 Sublime 里按
Ctrl+``（或者
View > Show Console`），粘贴进去回车，重启 Sublime 就好了。
-
安装 TypeScript 插件： 打开 Package Control (
Ctrl+Shift+P
或
Cmd+Shift+P
)，输入
Install Package
，回车。然后搜索
TypeScript
，安装。这个插件提供了基本的语法高亮和编译功能。
-
安装 TypeScript Build System： 还是在 Package Control 里搜索
TypeScript Build System
并安装。这个插件让你可以直接在 Sublime 里编译 TypeScript 文件。
-
配置 TypeScript 编译选项： 在你的项目根目录下创建一个
tsconfig.json
文件。这个文件定义了 TypeScript 编译器的行为。一个简单的
tsconfig.json
可能长这样：
{ "compilerOptions": { "target": "es5", "module": "commonjs", "sourceMap": true, "outDir": "dist", "strict": true, "esModuleInterop": true, "skipLibCheck": true, "forceConsistentCasingInFileNames": true }, "include": ["src/**/*"] }
-
target
：指定编译后的 JavaScript 版本。
-
module
：指定模块化规范。
-
sourceMap
：生成 source map 文件，方便调试。
-
outDir
：指定输出目录。
-
strict
：启用严格模式，可以帮助你发现潜在的错误。
-
include
：指定要编译的 TypeScript 文件。
-
编译 TypeScript 文件： 打开一个 TypeScript 文件，按下
Ctrl+B
(或者
Cmd+B
)，Sublime 就会根据
tsconfig.json
的配置编译你的代码。
-
代码补全和跳转： TypeScript 插件自带了基本的代码补全功能。但是，如果你想要更强大的代码补全和跳转功能，可以考虑安装
LSP
和
TypeScript Language Server
插件。
- 安装 LSP： 在 Package Control 里搜索
LSP
并安装。
- 安装 TypeScript Language Server： 打开 Package Control，搜索
LSP-typescript
并安装。
安装完成后，你需要配置 LSP，告诉它 TypeScript Language Server 的位置。打开
Preferences > Package Settings > LSP > Settings - User
，添加以下配置：
- 安装 LSP： 在 Package Control 里搜索
{ "clients": { "typescript": { "enabled": true, "command": ["/usr/local/bin/typescript-language-server", "--stdio"], "languageId": "typescript", "initializationOptions": {}, "settings": {} }, "typescriptreact": { "enabled": true, "command": ["/usr/local/bin/typescript-language-server", "--stdio"], "languageId": "typescriptreact", "initializationOptions": {}, "settings": {} } } }
注意，你需要将
/usr/local/bin/typescript-language-server
替换成你电脑上
typescript-language-server
的实际路径。你可以通过
which typescript-language-server
命令找到它的位置。如果你没有安装
typescript-language-server
，可以使用
npm install -g typescript-language-server
命令安装。
-
美化界面： Sublime 的默认界面有点丑，可以考虑安装一些主题和配色方案。我个人比较喜欢
Material Theme
和
Dracula
配色方案。
- 安装 Material Theme： 在 Package Control 里搜索
Material Theme
并安装。
- 安装 Dracula 配色方案： 在 Package Control 里搜索
Dracula Color Scheme
并安装。
安装完成后，你需要配置 Sublime 使用这些主题和配色方案。打开
Preferences > Settings - User
，添加以下配置：
- 安装 Material Theme： 在 Package Control 里搜索
{ "theme": "Material-Theme.sublime-theme", "color_scheme": "Packages/Dracula Color Scheme/Dracula.tmTheme" }
Sublime Text 如何处理大型 TypeScript 项目？
大型 TypeScript 项目通常会遇到以下问题：
- 编译速度慢： TypeScript 编译器需要花费大量时间来分析和编译大型项目。
- 内存占用高： TypeScript 编译器需要占用大量内存来存储项目的信息。
- 代码补全卡顿： 代码补全功能需要花费大量时间来搜索和匹配代码。
为了解决这些问题，可以采取以下措施：
-
增量编译： TypeScript 编译器支持增量编译，可以只编译发生变化的文件。这可以大大提高编译速度。在
tsconfig.json
中添加
"incremental": true
选项即可启用增量编译。
-
使用项目引用： TypeScript 3.0 引入了项目引用功能，可以将大型项目拆分成多个小型项目，每个小型项目可以独立编译。这可以降低编译时间和内存占用。
-
优化代码： 避免编写过于复杂的代码，可以减少 TypeScript 编译器的工作量。例如，可以使用更简洁的语法，避免使用过多的类型推断。
-
增加内存： 如果你的电脑内存足够大，可以增加 TypeScript 编译器的内存限制。可以通过设置
NODE_OPTIONS
环境变量来增加内存限制。例如，
NODE_OPTIONS="--max-old-space-size=4096"
可以将内存限制增加到 4GB。
-
使用更快的代码补全引擎： 尝试使用其他的代码补全引擎，例如
coc.nvim
。
如何解决 Sublime Text 中 TypeScript 编译报错的问题？
TypeScript 编译报错通常是由于以下原因：
- 语法错误： TypeScript 代码中存在语法错误。
- 类型错误： TypeScript 代码中存在类型错误。
- 配置错误：
tsconfig.json
文件配置错误。
- 插件冲突： Sublime Text 插件之间存在冲突。
为了解决这些问题，可以采取以下措施：
-
仔细检查代码： 仔细检查 TypeScript 代码，确保没有语法错误和类型错误。可以使用 TypeScript 编译器来检查代码。
-
检查
tsconfig.json
文件： 检查
tsconfig.json
文件，确保配置正确。可以使用 TypeScript 编译器来验证配置。
-
禁用插件： 禁用一些插件，看看是否解决了问题。可以逐个禁用插件，直到找到引起冲突的插件。
-
更新插件： 更新所有插件到最新版本。
-
重启 Sublime Text： 重启 Sublime Text，看看是否解决了问题。
-
重新安装 Sublime Text： 如果以上方法都无效，可以尝试重新安装 Sublime Text。
Sublime Text 和 VS Code 相比，在 TypeScript 开发方面有哪些优劣？
Sublime Text 最大的优势在于它的轻量级和启动速度。VS Code 相比之下，启动速度较慢，资源占用也更高。但 VS Code 在 TypeScript 支持方面更加完善，提供了更多的功能和更好的性能。例如，VS Code 的代码补全和跳转功能更加强大，对大型项目的支持也更好。此外，VS Code 拥有更丰富的插件生态系统，可以找到更多有用的插件。
总的来说，如果你追求轻量级和快速启动，并且对 TypeScript 的基本功能要求不高，那么 Sublime Text 是一个不错的选择。如果你需要更强大的 TypeScript 支持和更丰富的功能，那么 VS Code 更加适合你。当然，最终的选择还是取决于你的个人喜好和项目需求。
评论（已关闭）
评论已关闭