Vscode搭建Typescript可调试环境

代码

https://github.com/gzx-miller/typescript-debug-demo

 

背景

使用Typescript对于js开发来说能很大的提升开发效率, 

不过搭建出可调试的Typescript有些麻烦.

所以这里这里说明一下具体的配置方法, 以及提供代码.

在使用以上代码前需要确保本地安装了node.js 以及typescript

npm install -g typescript

说明

将上面的github链接里的代码拉取到本地即可看到下面的一些关键文件.

在代码根目录输入命令, 将依赖的模块安装, 即可打开vscode进行调试了.

npm install

关键代码

tsconfig.json 

是typescript转换成js的配置信息, 比如sourceMap表示是否生成调试映射文件.

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": { "*": ["types/*"] },
        "target": "es5",
        "lib":["es2016","es2016.array.include"],
        "declaration": true,
		"noImplicitAny":false,
		"noEmitOnError":true,
        "removeComments": false,
        "sourceMap": true,
        "rootDir": "./src",
        "outDir": "./dist",
        "mapRoot": "./dist"
    },
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "**/*.spec.ts",
        "./dist"
    ]
}

package.json 

配置当前模块的环境信息

{
  "name": "mongodbtest",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "gulp"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sourcemaps": "^2.6.4",
    "gulp-typescript": "^4.0.2",
    "typescript": "^2.9.1"
  },
  "dependencies": {
    "@types/mongodb": "^3.1.25",
    "mongodb": "^3.2.3"
  }
}

gulpfile.js

配置gulp命令

var gulp = require('gulp');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var tsProject = ts.createProject('tsconfig.json');

gulp.task('default', function() {
	return gulp.src("src/**/*.ts")
		.pipe(sourcemaps.init())
		.pipe(tsProject())
		.pipe(sourcemaps.write("."))
		.pipe(gulp.dest("./dist"));
});

.vscode/launch.json

 vscode的调试配置文件

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "debug",
            "program": "${workspaceFolder}\\dist\\index.js",
            "preLaunchTask": "tsc: build - tsconfig.json",
            "outFiles": [
                "${workspaceFolder}/dist/**/*.js"
            ],
            "sourceMaps": true
        }
    ]
}