- 安装插件Quokka.js , 可在 VSCode的扩展搜索中找到.
作用是能够即时输出 js / ts 文件的执行结果 :
Quokka.png
- VSCode 自动编译功能:
通过 设置VS Code 中的 task.json 和 项目中的tsconfig.json 实现
以当前项目结构为例子:
项目结构.png
那么就可以按照以下的设置:
task.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for thedocumentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
//-p 指定目录；-w watch,检测文件改变自动编译
"args": ["-p", ".", "-w"],
"showOutput": "always",
"problemMatcher": "$tsc"
}
tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": true,
"outDir": "./dist",
"sourceMap": true
},
"include": [
"src/**/*"
]
}
每当 修改 src/*. ts文件就会自动编译成 dist/*.js , 再给 js / ts 文件开启Quokka.js 的话 , 那么可以实现以下的效果:
image.png
可以非常直观的看到 ts 和 js 文件的异同 , 还有下方输出的TypeScript 编译中的报错信息.
对于学TypeScript的初学者来说非常方便和直观看到 ts / js 的不同
