vs code 配置 typescript 环境

用npm安装typescript之类的东西就不说了

1. 首先创建一个文件夹作为项目目录,然后用vs code打开,并在目录上创建main.ts文件,敲入代码 console.log("hello world"); 作为运行测试用

现在如果直接运行,会提示"Cannot launch project xxxxx, javascript cannot be found.",在这个提示框中,点击Open launch.json,它会自动创建一个launch.json,不过暂时可以不管这个launch.json

2. vs 菜单栏中点开Terminal,选择New Terminal,下面会有terminal窗口,可以输入一些ts的指令,如果你的环境没问题,那么,输入 tsc -init ,vs code会自动在项目根目录下创建一个 tsconfig.json 文件 ,然后我们需要修改它

3.  关于tsconfig.json的中配置选择,我没有专门去研究它,只罗列平时自己用的吧

compilerOptions 的选项有些是被注释掉的,下面我列出来的如果有被注释掉的,则需要打开

1) target是ts的版本,我用的是默认的es5

2) sourceMap是ts断点用的,设为true,否则打不了断点

3) outDir为运行目录,我将它修改为 "./bin",这样ts编译后输出的js文件全都会放在这里,不会显示那么乱

4) allowJs为是否编译目录下的js文件,默认为true估计好一些,原因忘了

除了默认的compilerOptions,其实还可以添加另一个字段 exclude,你的项目里,可能存在一些目录是不需要ts去编译的,比如bin,lib,node_modules等等,把它们统统列到exclude里面去


4. 现在就可以回到launch.json了,由于定了输出目录,所以应当建个src文件夹把源码全转到src下面比较整洁,那么 launch.json 中的program也应当由 "${workspaceFolder}\\main.ts" 修改为"${workspaceFolder}\\src\\main.ts"

5. 由于使用的是ts语言,所以需要先编辑再运行,所以请选择并点击菜单栏中的 Run Build Task,然后在弹出选择中选择 tsc-build task.json,main.ts会自动被编译成main.js并输出到bin目录下,这时候,选择菜单栏下的Debug中的Start Debug,项目就能跑起来了。

不过这还没完,因为如果每次都需要手动去build的话,那就太不方便了,所以现在要修改launch.json,将 "preLaunchTask": "tsc: build - tsconfig.json" 添加进去,别忘了逗号

这么一来,你就不用手动编译了,现在尝试在hello world 后面加上 it's me,然后直接Start Debug,项目就能跑起来了,可能你看不到打印,这是因为项目在编译的时候会自动切换到Teminal窗口下,编译完了却不会自动切回Debug Console,的确有点烦。

6. 至于网传的什么task.json,好像没卵用

7. node的库如何引用?在Teminal中输入node i @types/node,敲回车就可以了,要记得将node_modules文件夹添加到tsconfig.json的exclude中

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章