首先安装Package Control以管理插件,接着通过它安装Microsoft官方TypeScript插件实现语法高亮与补全,再安装AngularJS、Emmet等辅助插件提升开发效率,并可选配置Prettier实现保存时自动格式化,最终使Sublime Text支持Angular+TypeScript开发。

搭建Angular开发环境并让Sublime支持TypeScript语法高亮,可以通过安装合适的插件和配置来实现。虽然Sublime Text本身不是专为Angular设计的IDE,但通过扩展功能,完全可以胜任Angular + TypeScript项目的开发。
安装Package Control
要为Sublime添加功能,第一步是安装Package Control,它是Sublime的插件管理工具。
打开Sublime Text,按下 Ctrl+`(或菜单 View → Show Console),粘贴以下代码并回车:
import urllib.request,os,hashlib; h = '6f4c264a878e1354d5a5a7519b3e08a5' + '9a4d3ff0d9acf724aa9b25bb286c6'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download: %s' % dh) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)重启Sublime后,就能在Preferences菜单下看到Package Control选项。
安装TypeScript语法高亮支持
为了让Sublime支持TypeScript语法高亮,需安装TypeScript插件。
- 按下 Ctrl+Shift+P 打开命令面板
- 输入 Install Package 并选择
- 搜索 TypeScript,选择由Microsoft官方维护的 TypeScript 插件并安装
安装完成后,所有 .ts 文件将自动启用TypeScript语法高亮、智能补全和基础错误提示。
配置Angular开发辅助功能
提升Angular开发体验,可以安装以下常用插件:
- AngularJS:提供Angular代码片段(注意:虽名为AngularJS,但也包含部分Angular通用片段)
- Emmet:加快HTML编写速度
- AutoFileName:自动补全文件路径
- HTML-CSS-JS Prettify:格式化前端代码
这些插件可通过Package Control搜索安装,能显著提升开发效率。
开启保存时自动格式化(可选)
安装Prettier插件后,可在项目根目录添加 .prettierrc 配置文件,并设置Sublime保存时自动格式化代码。
在 Sublime 的菜单中进入 Preferences → Package Settings → HTML-CSS-JS Prettify → Set Prettify Preferences,修改配置项启用保存格式化。
基本上就这些。完成上述步骤后,Sublime Text就能良好支持Angular项目中的TypeScript开发,具备语法高亮、代码补全和基本结构支持,适合轻量级开发场景。










