subline ts 环境配置

3个步骤，2个配置；在实际使用编译过程中会遇到点小问题，所以还是静静的看完全文吧。

步骤：

1.sublime text3编辑器，安装好package control，能顺利安装各种插件；（这是基础，如果这个都不懂的话，我建议还是不要往下看了）；

2.安装typescript插件，用以识别ts文件；（这个插件安装超级慢，请慢慢等待安装完成）

3.安装SublimeOnSaveBuild插件，用以ctrl + s保存文件时自动编译；

以上是准备工作，下面开始配置插件；

因为我的sublime安装了中文插件包，所以sublime菜单都是中文的，我自己觉得中文很亲切（虽然可能真的会有点low），这个中文安装包也是sublime的插件；

配置：

1. 编辑器上方菜单栏 工具 -> 编译系统 -> 最后一项 新建编译系统，此时会自动弹出一个文件，把默认内容清空，把以下内容写入文件：

{

    "cmd": ["tsc","$file"],

    "file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",

    "selector": "source.ts",

    "windows": {

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

    }

}

ctrl + s 保存，保存路径就用默认路径，随便命个名（但至少你自己知道是什么名字，后面会用到），比如我定义的就叫ts.sublime-build，文件名是自定义的，文件后缀是自动生成的；

重启sublime（这是常见操作，每次安装插件基本上都要重启）；

2.新建一个ts文件，随便写点ts代码，ctrl + s保存，然后 ctrl + shift + b（用...编译），此时会弹出一个小窗口让你选择用什么编译规则编译，上方的ts.sublime-build文件就起作用了，你会看到小窗口里面有两个选项，一个是typescript，另一个是ts，显然应该选择ts，不然我上面一系列操作干吊；（这里你可能会疑问，为什么不用插件自带的typescript来编译呢，那么请你反向思考一下，如果插件自带的可以用的话，我下面还搞那么多操作搞毛）；

3.如果每次写ts代码，写一点，ctrl + shift + b 或者 ctrl + b 编译真的是太麻烦了，很明显不符合我 超级无敌懒 的特性，所以再次配置步骤3中的插件SublimeOnSaveBuild；

4.编辑器上方菜单栏 首选项 -> Package Settings -> SublimeOnSaveBuild -> Settings — User，写入以下内容：

{

     "filename_filter": "\\.(ts||sass|less|scss)$",

     "build_on_save": 1

}

第一个配置项是检测的语言，第二个配置项，1，就是true，不解释；

上面配置2里面遇到一个问题，ctrl + shift + b 和我安装的美少女战士皮肤的搜狗输入法的颜文字快捷键冲突了，这个冲突跟搜狗皮肤没有什么关系，我只是为了强调一下我用的是美少女战士的皮肤而已；所以需要修改一下搜狗输入法的快捷键，然后才能顺利的ctrl + shift + b调出编译控制台；

至于为什么要用ctrl + shift + b来编译呢，网上的教程都说是用ctrl + b编译；

我在实际使用过程中，发现，不用ctrl + shift + b，直接用ctrl + b编译时，每次sublime底部都会弹出一个窗口，让我输入需要编译的代码，此时我就炸掉了，我写的代码是ts文件里面的，难道我要copy一遍到这个窗口吗，那是万万不可以的；

我索性按了一下enter键，哇，竟然编译了。我才明白，当我直接用ctrl + b编译的时候，sublime根本不知道我要编译的文件是什么类型的，因此也不知道该用什么编译系统来编译，所以才让我手动编译一遍，每次写新的ts，每次ctrl + b，sublime都不知道我要编译的是什么，然后每次ctrl + b，再 enter，这个操作又让我烦了；因此，用ctrl + shift + b，让sublime记住我对该类型文件用什么编译系统编译，没错，ctrl + shift + b的作用就是让sublime记住该类型后缀文件需要用什么编译系统编译，用ctrl + shift + b手动编译一次，下次sublime就能记住这种类型的文件是什么情况了，就可以自己完成编译了；

最后，你就可以像在vscode里面写代码一样，写完自动编译，nice，搞了1个半小时，文档写了一刻钟；结果很简单，过程很艰辛；

还好弄好了，感觉整个世界都美好了；

总结所有操作，去除多余废话：

1.安装typescript插件；

2.安装SublimeOnSaveBuild插件；

3.

工具 -> 编译系统 -> 最后一项 新建编译系统，写入：

{

    "cmd": ["tsc","$file"],

    "file_regex": "(.*\\.ts?)\\s\\(([0-9]+)\\,([0-9]+)\\)\\:\\s(...*?)$",

    "selector": "source.ts",

    "windows": {

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

    }

}

保存到默认路径，自己命名，比如我的是

ts.sublime-build ，保存在默认路径；

4.

首选项 -> Package Settings -> SublimeOnSaveBuild -> Settings — User，写入：

        {

     "filename_filter": "\\.(ts||sass|less|scss)$",

     "build_on_save": 1

}

5.新建ts文件，随便写点代码，ctrl + shift + b，选择3中的ts，enter键编译；

6.完成；

注意，我在实际摸索过程中，是在实现了手动编译后，才最后安装

SublimeOnSaveBuild插件来实现 ctrl + s 自动编译的，按照上面的操作步骤来的话，可能会和我的叙述有点出入，但问题应该不大；

完.

作者：苏水儿
链接：https://www.jianshu.com/p/064e70e6712a
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。