[转] 记sublime配置typescript开发环境（插件和编译）的二三事

最近这几天在了解typescript，typescript官网上说Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript，网上也有很多前辈推荐vscode。但是自己习惯上用sublime，本着编辑器能不换就不换的原则（懒人原则），还是坚持用着sublime。

可是体验太糟糕了：

a.编辑器右下方没有typescript的扩展名选项，ts文件默认为纯文本；

b.没有高亮和自动补全；

c.额外开命令行窗口频繁打tsc命令编译。（目前还在看官方文档的时期，按文档步骤打tsc打到内伤）

于是在网上搜索了一下在Sublime提升编写TypeScript体验的方法，解决以上最基本的问题只需要三步：

a.package control安装TypeScript插件（作用高亮和识别typeScript文件等）；

b.package control安装TypescriptCompletion插件（语法自动补全等）；

c.在工具->编译系统->新编译系统中添加Typescript编译支持。（可以直接ctrl+B代替命令行窗口和tsc编译）

看起来很简单啊，但是在配置的途中还是出现了一些意料之外的状况。想到开发环境配置不是一劳永逸的，以后还会有重新配环境的时候，所以不如把问题和解决方法记录下来，以后再来不用重新搜索查找了。

 

问题一：package control中install package的时候弹出提示框‘There are no packages available for installation’，无法安装插件

网上说主要有两方面原因：一是因为 ipv6 的问题，导致无法访问 sublime 官网；二是连接不上https://packagecontrol.io/channel_v3.json

试验发现上面两个问题都有。

解决方法试了三个：

a.ping sublime.wdvob.net，然后修改hosts文件（ping结果显示该域名找不到主机，无ip返回，直接pass）；

b.按文章https://blog.csdn.net/feilong_csdn/article/details/67638660的做法替换Package Control文件夹（结果：依然不能访问，pass）；

c.（成功做法）根据以上a和b，主要原因是https://packagecontrol.io/channel_v3.json无法拿到。所以尝试下载或复制https://packagecontrol.io/channel_v3.json文件中的内容到本地，然后在Sublime Text\Data\Packages\User\Package Control.sublime-settings文件中将"channels"改为本地json文件。

具体做法可按文章：解决sublime package control 出现There are no packages available for installation。

网上分享的channel_v3.json：http://static.zybuluo.com/parkinwu/x5xsu1vjaob4hmktfexncfbz/channel_v3.json

进入Sublime Text\Data\Packages\User\Package Control.sublime-settings文件的方法：

 

Package Control.sublime-settings中的改动：

"channels":
[
"E:/本地文件夹/channel_v3.json"
],

问题二：先安装TypeScript插件，工具->编译系统出现了TypeScript选项，但ctrl+B以及选中TypeScript选项仍无法编译

解决问题一后顺利地安装了TypeScript和TypescriptCompletion插件，开始解决TypeScript编译的问题。

安装了TypeScript插件后，在工具->编译系统中出现了一个TypeScript的选项，如下所示：

 

既然有一个TypeScript了，那是不是可以直接用了？试了一下后问题二出现了，说明这个TypeScript不能用来编译ts文件。

这部分是成功解决实践：

在用修改插件本身的TypeScript.sublime-build文件的方式无法解决问题二后，参考下面的方式：

网上一般向Sublime添加TypeScript编译功能的方式是：打开Sublime Text -> Tools(工具) -> Build System(编译系统) -> New Build System(新编译系统)，在打开的文件中输入一段配置，然后选择保存，并添加到默认的路径中，文件名是TypeScript.sublime-build。

参考文章如下：在Sublime2/3中使用build命令编译TypeScript文件

TypeScript.sublime-build文件中的内容：

{
"cmd": ["tsc","$file"],
"file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",
"selector": "source.ts",

"windows": {
"cmd": ["tsc.cmd", "--target", "ES5", "$file"]
}
}

问题三：先安装TypeScript插件，然后在工具->编译系统->新编译系统中添加Typescript编译支持。最后工具->编译系统出现了两个TypeScript选项。第一次ctrl+B弹出两个TypeScript选框，后面再无反应也无法编译。

 

为什么编译系统中会出现两个TypeScript选项呢？

原因：第一个TypeScript选项是因为TypeScript插件中有一个TypeScript.sublime-build文件，这个文件可以在首选项->浏览插件->TypeScript文件夹中找到。

如图：

 

打开后该TypeScript.sublime-build文件内容如下：

 

第二个TypeScript选项是因为先前在问题二中的成功解决实践中添加了新的TypeScript编译系统，这里添加的TypeScript编译系统文件是保存在Sublime Text\Data\Packages\User路径的User文件夹下的。位置如图：

 

问题三解决方法：将首选项->浏览插件->TypeScript文件夹中的TypeScript.sublime-build文件备份，然后删除这个文件。

最后按ctrl+B如图：