用VsCode编辑TypeScript的实现方法(2)

小提示:任务为许多丰富的行为提供支持。有关如何配置他们的更多信息,请查看“任务”话题。

跳转标记&展示所有标记

ctrl+shift+o:列出所有定义符号关于当前打开和允许您在其中导航。

ctrl+T:让你搜索当前项目中或文件范围中所有定义的标记。你需要有一个typescript文件打开在编辑器中。

格式化代码

shift+alt+f:格式化整个文档。ctrl+k ctrl+f:格式化当前选择的资源代码。

JSDoc 支持

VsCode 提供了JSDoc对typescript的支持。除了语法上色,我们也会帮助你键入JsDoc注释。键入/**他将自动插入结束符*/在jsDoc块中输入回车将缩进下一行并自动插入*。

JavaScript Source Map 支持

typescript调试支持JavaScript source map.在项目运行配置文件launch.json中将sourceMaps设为true。另外,你可以制定一个typescript文件使用program属性。

想要生成你的typescript文件的source maps,编译--sourcemap选项或设置tsconfig.json文件中sourcemap属性为true。行内资源地图也是被支持的(一个内容被存储在url而不是一个单独的文件的资源地图),虽然还没有支持行内资源。

为生成文件设置一个不同的outFiles

如果被生成的(已经折叠)的JavaScript文件没有在它源文件旁边,你能通过在launch配置中的outfiles属性帮助vs代码调试器定位他们。

无论何时你在源代码中设置了断点,vscode 会尝试通过在oufiles中glob模式指定的文件查找生成的资源。

隐藏生成的Javascript文件

当你使用typescript时,你通常不想看见生成的JavaScript文件在资源管理器或者搜索结果中。vscode提供了过滤器功能,files.exclude工作区设置(文件->引用->设置)你能简单的创建一个表达式去隐藏这些生成的文件。

"**/*.js": { "when": "$(basename).ts"}

这个模式将匹配任何JavaScript文件(**/*.js),但仅仅是当一个同名的typescript文件存在。文件管理器将会不在展示生成的JavaScript资源如果被编辑在相同的位置。

用VsCode编辑TypeScript的实现方法

想要排除从.ts和.tsx资源文件生成的JavaScript文件,使用下面表达式:

"**/*.js": { "when": "$(basename).ts" }, "**/**.js": { "when": "$(basename).tsx" }

这是一个小技巧,搜索glob模式被使用是关键,上面的设置使用两种不同的glob模式来提供两个唯一键,但搜索结果相同。

混合的typscript和JavaScript项目

现在可以有一个混淆的ts和js项目了,想要让JavaScript在ts项目中存在,你能设置allowJs属性为true在tsconfig.json中。

小提示:tsc编译器不会自动检测jsconfig.json文件的存在。使用-p参数去让tsc使用你的jsconfig.json文件。例子,tsc -p jsconfig.json。

使用新版本的typescript

vscode 附带了最近稳定版本的typescript语言服务,他可能与安装在当前计算机的和工作区的typescript版本不匹配。当你浏览一个ts或js文件的时候,typescript 当前有效版本展示在状态栏上。

当vscode检测到tsc版本与活动的ts语言服务版本不同时,一个消息会展示出来“version mismatch! global tsc(2.1.5)!=vscode's language service(2.2.1).inconsistent compiler errors might occur".这个消息是友好的,目的是提醒用户编译器与活动的语言服务可能的差异。

你可以隐藏这个检查使用工作区设置typescript.check.tscVersion,如果你点击了详细广告条中Dont Check Again ,会设置你的用户设置fasle。

"typescript.check.tscVersion": false

另外的选项是在你的工作区中安装匹配的typescript版本(npm install --save-dev typscript),或者当前电脑全局安装(npm install -g typescript)。我们建议本地安装typescript从而避免与其他ts项目交互问题。

小提示:逍遥得到指定版本的ts,使用@version。举个ts2.2.1的例子,你将使用npm install --save-dev typescript@2.2.1.想要预览下一版本的ts,运行npm install --save-dev typescript@next.

当vscode在后续编译版本中更新typescript语言服务时,你可能再次看到不匹配的消息,让你更新你的typescript版本。

想要默认使用一个不同版本的typescript版本,在你的用户设置中配置typescript.tsdk,指出一个包含tsserver.js文件的目录。你能使用npm list -g typescript命令找到typescript安装位置。tsserver.js文件通常在lib文件夹中。

举个例子

{ "typescript.tsdk": "/usr/local/lib/node_modules/typescript/lib" }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/ed65e0421efacad6dfc4268717fef20c.html