美文网首页
sublime写ts,ctrl + s自动编译

sublime写ts,ctrl + s自动编译

作者: 苏水儿 | 来源:发表于2020-12-08 11:50 被阅读0次

    一句话,网上教程一大堆,看了一箩筐才自己解决;

    不知道是别人写的不够详细,还是说别人在写ts编译过程非常顺利,到我自己搞的时候就问题频出;

    以此记录,防止以后配置sublime的时候又出现类似问题;

    概览:

    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 自动编译的,按照上面的操作步骤来的话,可能会和我的叙述有点出入,但问题应该不大;

    完.

    2020-12-08,苏水儿;

    相关文章

      网友评论

          本文标题:sublime写ts,ctrl + s自动编译

          本文链接:https://www.haomeiwen.com/subject/yepfgktx.html