首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在sublime Text 3中编译TypeScript并在一个构建中运行结果.js文件?

在Sublime Text 3中编译TypeScript并在一个构建中运行结果.js文件,可以按照以下步骤进行操作:

  1. 确保已经安装了Node.js和TypeScript编译器。可以在命令行中运行以下命令来检查是否已安装:
  2. 确保已经安装了Node.js和TypeScript编译器。可以在命令行中运行以下命令来检查是否已安装:
  3. 如果命令能够正确执行并显示版本号,则说明已经安装成功。
  4. 打开Sublime Text 3,点击菜单栏中的 "Tools"(工具)选项,然后选择 "Build System"(构建系统),再选择 "New Build System"(新建构建系统)。
  5. 在弹出的新窗口中,输入以下内容:
  6. 在弹出的新窗口中,输入以下内容:
  7. 这段代码定义了构建系统的配置,使用了TypeScript编译器(tsc)来编译当前打开的文件。
  8. 保存文件时,将其命名为 "TypeScript.sublime-build",确保文件后缀为 ".sublime-build"。
  9. 现在,可以在Sublime Text 3中打开一个TypeScript文件(后缀为 ".ts"),然后按下 "Ctrl + B"(或选择菜单栏中的 "Tools" -> "Build")来编译该文件。
  10. 编译完成后,会在同一目录下生成一个与源文件同名的JavaScript文件(后缀为 ".js")。可以通过按下 "Ctrl + ` "(或选择菜单栏中的 "View" -> "Show Console")来查看编译输出结果。

注意:在使用Sublime Text 3编译TypeScript之前,需要确保已经在项目目录下创建了一个 "tsconfig.json" 文件,用于配置TypeScript编译器的选项。可以参考TypeScript官方文档(https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)了解更多关于 "tsconfig.json" 的配置选项。

希望以上步骤能够帮助你在Sublime Text 3中成功编译和运行TypeScript文件。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Top 10 JavaScript编辑器,你在用哪个?

Sublime Text 如果你想要一个灵活、强大、可扩展的文本编辑器,它能够闪电般快速运行,并且支持切换到其它窗口进行代码检查、调试和部署,那么可以考虑使用Sublime Text。...Sublime Text的编码文件默认为JSON文件,语言定义默认是XML。 Sublime Text一个活跃的用于创建和维护Sublime Text包和插件的社区。...它结合了Microsoft技术,例如TypeScript编译器、Roslyn .Net编译器和Atom使用的Electron shell。...此外,Visual Studio Code可以与外部任务运行程序(gulp和jake)进行可定制的集成。...Brackets不像Sublime Text和TextMate那样运行的很快,但除了从网络加载或更新程序内容的暂停之外,它仍然运行的非常快。

3.1K10

TypeScript】入门基础

安装TypeScript首先,确保你的计算机上已经安装了Node.js。然后,可以通过Node.js的包管理器npm来安装TypeScript。...创建TypeScript文件使用任何文本编辑器(比如VSCode、Sublime Text、Atom等),创建一个新的文件并将其保存为.ts扩展名,这是TypeScript文件的约定。3....编译TypeScript代码保存TypeScript文件后,我们需要将其编译为JavaScript,以便在浏览器或Node.js运行。...在命令行中,导航到TypeScript文件所在的目录,然后运行以下命令:tsc filename.ts这将生成一个名为filename.js的JavaScript文件。7....高级类型TypeScript提供了许多高级类型特性,联合类型、交叉类型、泛型等。这些功能可以更好地定义和处理复杂的数据结构和函数签名。8.

25530

TypeScript简介_TypeScript笔记1

JavaScript 应用的根基 此外,TypeScript 还给 JavaScript 带来了一个重要的东西,d.ts声明文件: Working with existing JavaScript libraries...一致,复制粘贴就可以开始了 提供可选的静态类型、类与模块:类型不仅让 JavaScript 开发能够使用高效的开发工具和实践(静态检查和代码重构),而且不会带来运行时的性能损耗(静态类型仅在编译时存在...(封闭)构建管道,应该让系统具有可扩展性,让编译器适用于更复杂的构建工作流 添加或依赖运行时类型信息,或根据类型系统的结果很长不同的代码,应该鼓励不依赖运行时信息(run-time metadata)的编程模式...s; } 另外,TypeScript 虽然提供了静态类型系统,并在编译时严格检查,但并不像Haskell 类型系统一样可证明,可推理。...Resolution 六.生态 (开源)编译器:typescript 工具:IDE 支持(VS、VSCode、Sublime、WebStorm、Vim 等)、Playground 类型库:DefinitelyTyped

1.2K30

前端开发工具的简单介绍

打开大文件时会出现CPU占用过高的问题。 目前相比于Sublime技术层面还不够成熟,有不少bug。 Sublime Text的优缺点 我们再来说一说这个Sublime Text编辑器。...Sublime Text一个跨平台的编辑器,同时支持Windows、Linux、Mac OS X等操作系统。 主要优点: 主流前端开发编辑器。 体积较小,运行速度快。 文本功能强大。...虽然启动运行快,但当打开xcode运行着项目的同时去使用Sublime,你就知道什么是崩溃了,输入一行代码,半天还反应不过来(这个问题仅仅存在于Sublime Text3)。...它内置了对JavaScript,TypeScript和Node.js的支持,并且具有丰富的其他语言(C++,C#,Java,Python,PHP,Go)和运行时(.NET和Unity)的扩展生态系统...加载大文件几乎秒开,试过打开100M的工程,无压力。 C#支持高亮,已经编译过的还支持引用。 JS,HTML等支持高亮补全。 全平台 免费,这是必须的好评。 占用内存低。

1.6K00

如何优雅地使用Sublime Text3

关于如何在SublimeText下高效些东西可参见文章:sublime text 2(3)下的Markdown写作 抑或是前段时间写下的追寻高效工作的一路折腾㈡ SideBarFolders 打开的文件夹都太多了...这篇文章介绍如何在 Windows 中配置 SublimeLinter 进行 JS & CSS 校验。 比如写例如像lua这样的弱语言脚本代码,有这个可以规避掉很多不该有的低级错误吧?...如何配置,请参见在 Sublime Text中使用 SFTP 插件快速编辑远程服务器文件;欲使用FtpSync可参见Sublime使用及FtpSync远程同步;大道至简,因简而悦;开心垒码,值得折腾。...Sublime Text运行javascript(ES6) 首先安装nodejs 当然你可以使用其它诸如jsc之类的环境来运行js, 本文使用的是nodejs....+ b , 将得到以下执行结果: i: 0i: 1i: 2[Finished in 0.1s] 温馨注解: (1)文件必须是存在于磁盘中的, 而不是untitled的, 否则sublime无法找到相应的文件

6.6K60

Sublime Text3配置使用教程

SublimeLinter 默认以 background 模式运行,在用户输入的同时即时校验,如果你想要 Sublime Text 运行得更流畅,可以改为 load-save 模式或 save-only...配置(Settings) sublime Text并没有一个专门的配置界面,与之相反,Sublime Text使用JSON配置文件,可以到这里参考在Preferences->Settings-User...Alt+数字切换打开第N个文件 Ctrl + p 1.输入文件名,跳转 2.输入:行号,跳转至指定行号,:55 3....#,取当前文件所有标识 FAQ sublime命令窗口无法显示中文 默认的编译器可以直接按Ctrl+B编译运行Python,并在控制台输出结果.美中不足的是无法输出中文,需要自己手动配置一番。...Sublime Text 全程指南-Lu 使用Sublime Text 3做Python开发 一个前端程序猿的Sublime Text3的自我修养 jikeytang/sublime-text-github

17.1K41

Typescript教程_安装typescript

npm install -g typescript 安装完成后,检查安装是否成功,命令如下: tsc -V 编译 当我们编写好TypeScript代码后,是无法在浏览器上运行展示的,我们浏览器上最后呈现的都是...JavaScript代码,所以我们需要将TypeScript代码编译成JavaScript代码 先创建一个01_typescript.ts文件,编写如下代码: function sayHi(str:...string) { return "您好呀" + str } let text = "james" console.log(sayHi(text)) 接下来进行手动编译,需要将01_typescript.ts...文件编译成01_typescript.js文件,只需要在当前目录下执行如下命令: tsc 01_typescript.ts 输出结果一个01_typescript.js文件,它包含了和输入文件中相同的...接着,在命令行上,通过node.js运行这段代码 node 01_typescript.js 控制台输出 您好呀james 下一章将介绍如何在WebStorm中进行自动编译 发布者:全栈程序员栈长,转载请注明出处

79010

超级文本编辑器Sublime Text3「建议收藏」

Python项目文档 For LaTex Windows下基本环境配置 生成你的第一个LaTex文档 反向搜索 Linux下环境配置 字数统计 自动补全 多文件编译 LaTex公式实时预览 Sublime...中实时预览,不过渲染结果有点一般 Markdown Preview 参见:sublime text 2 下的Markdown写作 可以编译生成 HTML 文件,支持LaTex....撰写, Sphinx 发布,如何在 Sublime 中,通过按 Ctrl + B 直接编译工程呢?...,这是因为PDF不支持中文,改用xlatex编译,在上述文件中设置编译引擎为:"builder": "traditional",,并在文章开头加入%!...Text添加至右键菜单 新建一个“右键菜单添加_Edit with Sublime Text3.bat”文件,复制(Ctrl+C)粘贴(Ctrl+V)如下代码,保存后,右击 该文件,选择 以管理员身份运行

2.5K20

HTML5手机APP开发入门(1)

http://ionicframework.net/ http://ionicframework.com/ https://angularjs.org/ 开发环境配置 Node.js.../downloads/ 安装完成后下载和安装ionicframework开发包和编译环境 在windows cmd 运行 npm install -g ionic@beta npm install...sublime text好用 https://atom.io/ 安装的插件 开发语言 Angular2 使用了es6的规范,所以我推荐使用typescript环境 参考 https...下一步部署到android设备上 $ionic run android 这里有bug据说下个版本解决 我这里就不用typescript了 从新生成一个项目用JavaScript...注意:这里可能还会碰到问题,并没有启动模拟器也没有提示android apk的编译完成 也就是说配置android SDK 的模拟器有问题,这里需要检查 已经部署到模拟器上

1.5K80

web前端 | 如何选择撸码神器

avalon completion for sublime 3 Sublime Text highlighting for Vue.js Sublime Text helpers for React...TypeScript-Sublime-Plugin CSS Bootstrap 3 Snippets Plugin for Sublime Text 2/3 Sublime Text代码片段收藏 PHP...(phpstorm会保存很多文件的历史版本, 当你有一天想恢复以前的代码, 找出来, revert即可, 而且还能将不同历史版本, 历史版本与当前版本代码进行对比, 对比结果差异会很清晰的标识出来) 自动保存...2,加载大文件几乎秒开。 3,C#支持高亮,已经编译过的还支持引用。 4,JS、HTML等支持高亮和补全。 5,全平台,我再也不纠结买RMBP还是XPS了。...,终端,原生支持语言语法高亮较少(C# JS TypeScript是第一位),内置JS/TS调试器…可以基于不同项目(文件夹)设置偏好,写C#和JS/TS专用。

59130

TypeScript 演化史 — 第十二章】ES5ES3 的生成器和迭代支持及 –checkJS选项下 .js 文件中的错误

特定的语法,所以不需要先通过TypeScript编译器就可以直接运行ts文件: $ node index.ts 4 8 15 16 23 42 现在将index.ts文件编译成index.js: tsc...,可以正常工作: $ node index.js 4 8 15 16 23 42 运行node index.ts和node index.js是完全相同的,这说明咱们没有通过运行 TypeScript 编译器来改变程序的行为...现在将index.ts文件编译成index.js。当以 ES3 或 ES5 为目标时,TypeScript 编译器将为上述代码生成一个基于索引的for循环的代码: var text = "Booh!"...如果现在再次执行index.js文件,会得到正确的结果: $ node index.js B o o h !...这可以通过将- checkJs编译器选项设置为false并在每个选定文件的顶部添加// @ts-check注释来实现。 如果你想要在大型 JS代码库中逐步引入类型检查,推荐这种方法。

1.9K20

洞察 | 2017 JavaScript现状报告:2万+名开发者眼里,JS过得怎么样?

JS技术,按照薪水从低(左)到高(右)排列 结果表明那样,往往是像Polymer或者Reason这样的小众技术跟最高薪水相关。...REST希望自己也有个这么酷的logo 结果表明那样,这是一个非常常见的情况。在这次调查提到的所有技术里面,GraphQL是引起兴趣最大的一个——尽管目前它的用户数量还很少。...在Sublime Text和Atom正在为文本编辑器的王座争得不可开交时,新进入者VS Code破窗而入,偷走了它们额午餐。...过去Sublime Text往往有速度上的优势,但却被不直观的UI抵消掉了,而Atom有着很好的UI但是往往给人很慢的感觉。...就像Sublime一样,它支持范围很广的各种插件和定制化,尽管一个更为用户友好的软件包“刚好能用”。

47220

一步一步带你搭建一个“摩登”的前端开发环境

js 类型系统 最近纠结一个问题,前端的 js 由于其动态的特性,写几行代码,在浏览器刷新一下就能看到结果了,非常适合快速开发和迭代。...这样的想法其实在 js 社区里已经得到越来越多人的认同,最近几年也陆续推出了多种不同的 js 类型系统用于增强 js 的健壮性,其中像typescript就是其中的佼佼者。...flow 和 typescript 不同,typescriptjs 的超集,是另外一门语言(向下兼容 js),而 flow,则是一个静态类型检测工具,并没有修改 js 的语言特性。...return "hello " val; } 这时候,flow 已经知道该文件是需要做类型检测的,这时候运行 flow init 命令初始化 flow $....这里我使用的编辑器是 sublime text3,如果有的同学是使用其他编辑器,可以在 这里,找一下 对与像我一样使用 st3 的同学,首先我们要在 st3 里安装 SublimeLinter 插件,Ctrl

2.5K00

深度讲解TS:这样学TS,迟早进大厂【02】:安装 TypeScript

博主是一个专注于前端开发的程序猿~ 曾经主做于vue,react,小程序,uniapp,RN等各大框架~ 现在主攻web安全,数据加密,项目架构,性能优化~ 技术之路,任道重远。...编译一个 TypeScript 文件很简单: tsc hello.ts 我们约定使用 TypeScript 编写的文件以 .ts 为后缀,用 TypeScript 编写 React 时,以 .tsx 为后缀.../dist/abc.js hello.ts 编辑器§ TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等。...另外它本身也是用 TypeScript 编写的。...下载安装:https://code.visualstudio.com/ 获取其他编辑器或 IDE 对 TypeScript 的支持: Sublime Text WebStorm Vim Emacs Eclipse

47540

一旦你学习了typescript,你就再也放不下了

什么是TypeScript TypeScript是JavaScript的超集,当前的JavaScript的代码都属于TypeScript,都能在TypeScript环境下运行。...TypeScript严格来说它算是一个编译器,也就说它将原本解释语言的JavaScript进行了编译,而它编译的是.ts文件,一种JavaScript的超集文件,拥有自己的类型,接口,面向对象等特点。...TypeScript优点 静态类型 JavaScript是动态类型语言,这样它使用起来很灵活,但是也导致了类型检查非常困难,很多错误只能够等到运行时候才能发现。...程序员常用的编辑器Sublime、Vim 和 Emacs都支持了Typescript,很多IDE也通过插件的形式支持了它。 2014 年 7 月官方发布了一种新的 TypeScript编译器。...新的编译器将带来五倍的性能提升。 2014年 8月,typescript正式托管在github上。 2015年,微软发布了vscode, 并且内置了对TypeScript的支持。

20120

用Visual Studio Code写Node.j

介绍 vsc的宣传语是: 一个运行于 Mac OS X、Windows和 Linux 之上的,针对于编写现代 Web 和云应用的跨平台源代码编辑器。 按它说的,vsc特别适合来作为前端开发编辑器。...内置html开发神器emmet(zencoding),对css及其相关编译型语言Less和Sass都有很好的支持。 当然,最nice的还是写js代码了,这也是我接下来要着重介绍的功能。...智能提示 因为之前微软推出了typescript语言,结合tsd文件,用visual studio写typescript代码是相当爽的,智能提示的功能非常nb。 这个功能理所应当也被vsc继承了。...目前主流的前端类库/框架,包括node.js及其模块/框架都有相应的tsd文件,可以去DefinitelyTyped上找一下。 在项目中引入对应文件,就可以有智能提示了。...结语 vsc和其他编辑器(sublime text,atom,webstorm等)相比,某些方面还存在很多问题。对于一个前端工程师来说,它已经足够好了。 当然了,它在不断改进。

1K130
领券