首页 > 其他分享 >[转] 记sublime配置typescript开发环境(插件和编译)的二三事

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

时间:2023-09-23 19:14:34浏览次数:47  
标签:文件 插件 TypeScript 编译 typescript 编译系统 sublime

最近这几天在了解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如图:

 

标签:文件,插件,TypeScript,编译,typescript,编译系统,sublime
From: https://www.cnblogs.com/chris-oil/p/17724908.html

相关文章

  • Flutter路由插件fluro详解
    fluro的使用fluro的介绍fluro是一个流行的Flutter插件,用于实现高级路由管理。它提供了灵活的路由配置和导航功能,支持命名路由、参数传递、路由拦截、动画效果等,使得在Flutter应用程序中管理页面导航变得更加简单和可扩展。下面是对fluro插件的详细介绍:安装和导入:您可以通过在pu......
  • blender部分实用插件
    内置插件(直接在偏好设置里下载就行):BoolTool布尔插件AutoBoolean的是直接布尔;BrushBoolean的是可调整修改。LoopTool快捷编辑工具安装后编辑模式直接右击就可以使用部分功能1.Bridge桥接(左下角可设置段数和扭曲度)2.平化3.圆环ExtraObject(添加曲线)......
  • typescript
    枚举:enum这样一个代码输出:a={}a['one']=1console.log(a['one']=1) =>输出1!!! 所以 a[a['one']=1]='one'=> {"1":"one","one":1,}就有枚举那味了!!!!  ......
  • vscode highlight-words 插件
    转载于:https://www.niftyadmin.cn/n/4938901.html?action=onClick设置步骤:按按Ctrl+Shift+P,输入HighlightToggleCurrent,点击右边齿轮图标,进入快捷键页面,点击编辑按钮,按F8,然后按Enter键完成设置其他不变,调整box  "highlightwords.box":{    "light":true, ......
  • Typescript 测试驱动开发 TDD (15)
    异步测试(Asynchronoustests)正如我们在探索JavaScript和TypeScript时所看到的,我们编写的大部分代码都是异步的。这意味着我们无法准确控制回调函数何时被调用,或者Promise何时解析,因为我们正在等待一个超出我们控制范围的事件发生。这经常在单元测试中引起问题,在这种情况下,我们......
  • Typescript 测试驱动开发 TDD (14)
    返回值的监视器 (Spiesreturningvalues)当我们希望模拟函数的返回值时,我们可以轻松地从模拟实现中返回一个值。作为示例,请考虑以下类:1classMyMockedClass{2functionToBeMocked():number{3return5;4}5}在这里,我们有一个名为MyMockedCl......
  • Typescript 测试驱动开发 TDD (13)
    Jest监视器 (Jestspies)Jest还提供了一种能够检查特定类方法是否被调用的能力,使用的是所谓的spy。考虑以下类定义:1classMySpiedClass{2testFunction(){3console.log(`testFunction()called`);4this.testSpiedFunction();5}6testSp......
  • Typescript 测试驱动开发 TDD (12)
    Jest模拟(Jestmocks)在测试我们的代码时,我们经常遇到这样的情况:我们希望确保某个特定函数被调用,或者它被使用正确的参数进行了调用。当一个特定函数按顺序调用其他函数以执行一些业务逻辑时,这种情况最常见。例如,我们可能会调用一个初始化函数,并且该初始化函数可能会调用多个RES......
  • docker-compose 部署 jenkins Blue Ocean插件
    DockerfileFROMjenkins/jenkins:2.414.2-lts-jdk17USERrootRUNapt-getupdate&&apt-getinstall-ylsb-releaseRUNcurl-fsSLo/usr/share/keyrings/docker-archive-keyring.asc\https://download.docker.com/linux/debian/gpgRUNecho"deb[a......
  • Jenkins问题记录:Windows Server Jenkins修改配置后重启系统,Jenkins被初始化,启动后需要
    现象:WindowsServerJenkins修改配置后重启系统,Jenkins被初始化,启动后需要重新安装插件,配置管理员密码,项目列表丢失原因:修改"C:\ProgramFiles\Jenkins\jenkins.xml"配置,可能是配置异常,系统重启后,Jenkins自动重置了解决:重新安装Jenkins,配置文件就重新初始化,再启动不需要再安......