文章目录
1 安装VS Code
https://code.visualstudio.com/
安装VS Code插件:
- JavaScript and TypeScript Nightly
- TypeScript Extension Pack
- Visual Studio IntelliCode
- Project Manager
- Material Icon Theme
2 安装Node.js
安装与当前VS Code(1.52.1)使得Node.js版本(Help->About),方便后续VS Code插件开发:
Version: 1.52.1 (system setup)
Commit: ea3859d4ba2f3e577a159bc91e3074c5d85c0523
Date: 2020-12-16T16:34:46.910Z
Electron: 9.3.5
Chrome: 83.0.4103.122
Node.js: 12.14.1
V8: 8.3.110.13-electron.0
OS: Windows_NT x64 6.1.7601
3 npm设置淘宝镜像
npm设置为淘宝镜像:
npm config set registry https://registry.npmmirror.com
查看是否设置成功:
npm config get registry
npm更新到最新版本:
npm install -g npm
or
npm install -g npm@latest
npm更新到指定版本:
npm install -g npm@5.6.0
4 npm安装TypeScript
npm全局安装TypeScript:
npm install -g typescript
查看TypeScript是否安装成功:
> tsc -v
Version 4.1.3
5 VS Code调试TypeScript
新建TypeScript工程hello:
hello
└─main.ts
let hello: string = "Hello World";
console.log(hello)
5.1 直接执行单个.ts文件
直接右键单击选中main.ts
,执行Run Code即可在OUTPUT界面(快捷键:Ctrl+`打开OUTPUT界面)看到输出结果。
5.2 依赖生成.js文件调试
5.2.1 初始化npm项目
package.json
描述了npm项目依赖那些包,指明项目依赖的版本,让你的构建更好的与其他人共享。
生成package.json
文件,在根目录执行:
npm init
or
npm init -y
{
"name": "hello",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
参考链接:
5.2.2 配置tsconfig.json
如果一个目录下存在一个tsconfig.json文件,那么它意味着这个目录是TypeScript项目的根目录。tsconfig.json文件中指定了用来编译这个项目的根文件和编译选项。
在根目录自动生成tsconfig.json文件:
tsc -init
{
"compilerOptions": {
/* Visit https://aka.ms/tsconfig.json to read more about this file */
/* Basic Options */
// "incremental": true, /* Enable incremental compilation */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
// "lib": [], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
// "declaration": true, /* Generates corresponding '.d.ts' file. */
// "declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file. */
"sourceMap": true, /* Generates corresponding '.map' file. */
// "outFile": "./", /* Concatenate and emit output to single file. */
// "outDir": "./", /* Redirect output structure to the directory. */
// "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. */
// "composite": true, /* Enable project compilation */
// "tsBuildInfoFile": "./", /* Specify file to store incremental compilation information */
// "removeComments": true, /* Do not emit comments to output. */
// "noEmit": true, /* Do not emit outputs. */
// "importHelpers": true, /* Import emit helpers from 'tslib'. */
// "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. */
// "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */
/* Strict Type-Checking Options */
"strict": true, /* Enable all strict type-checking options. */
// "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */
// "strictNullChecks": true, /* Enable strict null checks. */
// "strictFunctionTypes": true, /* Enable strict checking of function types. */
// "strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. */
// "strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes. */
// "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */
// "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */
/* Additional Checks */
// "noUnusedLocals": true, /* Report errors on unused locals. */
// "noUnusedParameters": true, /* Report errors on unused parameters. */
// "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */
// "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */
// "noUncheckedIndexedAccess": true, /* Include 'undefined' in index signature results */
/* Module Resolution Options */
// "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
// "baseUrl": "./", /* Base directory to resolve non-absolute module names. */
// "paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
// "rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime. */
// "typeRoots": [], /* List of folders to include type definitions from. */
// "types": [], /* Type declaration files to be included in compilation. */
// "allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking. */
"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
// "preserveSymlinks": true, /* Do not resolve the real path of symlinks. */
// "allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules. */
/* Source Map Options */
// "sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations. */
// "mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. */
// "inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. */
// "inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. */
/* Experimental Options */
// "experimentalDecorators": true, /* Enables experimental support for ES7 decorators. */
// "emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators. */
/* Advanced Options */
"skipLibCheck": true, /* Skip type checking of declaration files. */
"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */
}
}
调试需要设置"sourceMap": true
,outDir
配置js文件的生成目录。
5.2.3 配置自动编译(tasks.json)
菜单栏Terminal->Configure Tasks...
分别选中"tsc: watch - tsconfig.json",则在工程根目录生成/.vscode/tasks.json,当ts文件保存后自动编译生成js文件:
{
"version": "2.0.0",
"tasks": [
{
"type": "typescript",
"tsconfig": "tsconfig.json",
"option": "watch",
"problemMatcher": [
"$tsc-watch"
],
"group": "build",
"label": "tsc: watch - tsconfig.json"
}
]
}
5.2.4 调试配置文件(launch.json)
菜单栏Run->Add Configuration...
生成调试配置文件/.vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"program": "${workspaceFolder}\\main.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
其中"program": "${workspaceFolder}\\main.ts"
是调试的ts文件生成的js文件。
另外,在launch.json
增加preLaunchTask
可以跳过5.2.3 配置自动编译:
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"preLaunchTask": "tsc: build - tsconfig.json",
"program": "${workspaceFolder}\\main.ts",
"outFiles": [
"${workspaceFolder}/**/*.js"
]
}
]
}
5.2.5 在.ts文件设置断点,开始调试
参考链接:
5.3 使用ts-node调试
5.3.1 安装ts-node
# Locally in your project.
npm install -D typescript
npm install -D ts-node
# Or globally with TypeScript.
npm install -g typescript
npm install -g ts-node
5.3.2 配置tsconfig.json
同5.2.2
调试配置文件(launch.json)
菜单栏Run->Add Configuration...
生成调试配置文件/.vscode/launch.json,添加-r ts-node/register
到Node的执行参数(runtimeArgs) ,program添加到参数列表(args):
{
"version": "0.2.0",
"configurations": [
{
"type": "pwa-node",
"request": "launch",
"name": "Launch Program",
"skipFiles": [
"<node_internals>/**"
],
"runtimeArgs": [
"-r",
"ts-node/register"
],
"args": [
"${workspaceFolder}\\main.ts"
]
}
]
}
注意: 当TypeScript,ts-node采用全局安装(npm install -g ts-node
)时,ts-node/register
应使用绝对路径:
{
"configurations": [
{
...
"runtimeArgs": [
"-r",
"C:/Users/wwchao/AppData/Roaming/npm/node_modules/ts-node/register"
],
...
}
]
}
5.3.3 在ts文件设置断点,执行调试
同5.2.5 在ts文件设置断点,执行调试
参考链接:
- TypeStrong/ts-node
- vscode ts-node 调试 Cannot find module ‘ts-node/register’
- tsconfig.json
- 编译选项
- TypeScript手册指南
- 语法分析器生成工具 ANTLR(antlr4ts)
- TypeScript ES6-Promise 递归遍历文件夹中的文件
- VS Code 插件开发文档