正确配置 Visual Studio Code 开发和调试 TypeScript

一、环境Node.js v10.15.3npm 6.9.0Visual Studio Code 1.33.0 (user setup)2019/4/6Koa2-Node.js QQ群：481973071二、开发 TypeScript1、建立项目目录使用以下命令创建项目的目录：mkdir ts3cd ts3mkdir srcmkdir dist建立好的目录如下：ts3├─dist└─src2、初始化 NPM在项目的根目录下，执行下面的命令：npm init -y现在项目结构如下：ts3├─dist└─src└─package.json3、安装 TypeScript在项目的根目录下，执行下面的命令：npm i -g typescript4、创建并配置 tsconfig.json在项目的根目录下，执行下面的命令：tsc –init现在项目结构如下：ts3├─dist└─src└─package.json└─tsconfig.json在 tsconfig.json 中取消下面属性项的注释，并修改其属性的值：这样设置之后，我们在 ./src 中编码 .ts 文件，.ts 文件编译成 .js 后，输出到 ./dist 中。“outDir”: “./dist”,“rootDir”: “./src”,5、Hello Typescript将下面代码复制到./src/index.ts中：const hello: string = ‘hello, Alan.Tang’;console.log(hello);在项目的根目录下，执行下面的命令：tsc 是编译命令，详情查看：https://www.tslang.cn/docs/handbook/typescript-in-5-minutes.htmltsc 的编译选项，详情查看：https://www.tslang.cn/docs/handbook/compiler-options.htmltscnode ./dist/index.js执行结果如下：PS C:\Users\Alan\TestCode\ts3> tscPS C:\Users\Alan\TestCode\ts3> node ./dist/index.jshello, Alan.Tang6、使用自动实时编译手动编译还是比较麻烦，如果能够保存代码后，自动编译就好了。详情查看：https://go.microsoft.com/fwlink/?LinkId=733558Ctrl + Shift + B 运行构建任务，将显示以下选项：选择 tsc: 监视 - tsconfig.json ，回车运行之后，编辑的代码保存之后，就会自动编译。7、简化运行命令每次输入 node ./dist/index.js 执行代码，有点麻烦，因为命令太长了。在命令行界面，按键盘 ↑ 切换历史输入命令，可以快速使用历史输入过的命令。三、代码检查代码检查主要是用来发现代码错误、统一代码风格。详情查看：https://ts.xcatliu.com/engineering/lint.html1、安装 ESLintESLint 可以安装在当前项目中或全局环境下，因为代码检查是项目的重要组成部分，所以我们一般会将它安装在当前项目中。可以运行下面的脚本来安装：npm install eslint –save-dev由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeScript 的一些语法，故我们需要安装 typescript-eslint-parser，替代掉默认的解析器，别忘了同时安装 typescript：npm install typescript typescript-eslint-parser –save-dev由于 typescript-eslint-parser 对一部分 ESLint 规则支持性不好，故我们需要安装 eslint-plugin-typescript，弥补一些支持性不好的规则。npm install eslint-plugin-typescript –save-dev现在项目结构如下：ts3├─dist└─node_modules└─src└─package-lock.json└─package.json└─tsconfig.json2、创建配置文件 .eslintrc.jsESLint 需要一个配置文件来决定对哪些规则进行检查，配置文件的名称一般是 .eslintrc.js 或 .eslintrc.json。当运行 ESLint 的时候检查一个文件的时候，它会首先尝试读取该文件的目录下的配置文件，然后再一级一级往上查找，将所找到的配置合并起来，作为当前被检查文件的配置。在项目的根目录下，执行下面的命令：创建配置文件./node_modules/.bin/eslint –init按需求，选择相应的选项：您想如何使用ESLint?? How would you like to use ESLint?To check syntax, find problems, and enforce code style您的项目使用什么类型的模块?? What type of modules does your project use?JavaScript modules (import/export)您的项目使用哪个框架?? Which framework does your project use?None of these你的代码在哪里运行?(按<space>选择，<a>切换所有，<i>反转选择)? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert selection)Node您想如何为您的项目定义一个样式?? How would you like to define a style for your project?Use a popular style guide您想遵循哪种风格指南?? Which style guide do you want to follow?Airbnb (https://github.com/airbnb/javascript)您希望配置文件的格式是什么?? What format do you want your config file to be in?JavaScriptChecking peerDependencies of eslint-config-airbnb-base@latest您所选择的配置需要以下依赖项:The config that you’ve selected requires the following dependencies:eslint-config-airbnb-base@latest eslint@^4.19.1 || ^5.3.0 eslint-plugin-import@^2.14.0您想现在用npm安装它们吗?? Would you like to install them now with npm?YesInstalling eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0npm WARN ts3@1.0.0 No descriptionnpm WARN ts3@1.0.0 No repository field.+ eslint-config-airbnb-base@13.1.0+ eslint-plugin-import@2.16.0+ eslint@5.16.0added 53 packages from 37 contributors, updated 1 package and audited 286 packages in 10.303sfound 0 vulnerabilitiesSuccessfully created .eslintrc.js file in C:\Users\Alan\TestCode\ts3现在项目结构如下：ts3├─dist└─node_modules└─src└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json编辑 .eslintrc.js，增加 parser: ’typescript-eslint-parser’, 替换掉默认的解析器，使之识别 TypeScript 的一些语法，如下面所示：module.exports = { parser: ’typescript-eslint-parser’, env: { es6: true, node: true, }, extends: ‘airbnb-base’, globals: { Atomics: ‘readonly’, SharedArrayBuffer: ‘readonly’, }, parserOptions: { ecmaVersion: 2018, sourceType: ‘module’, }, rules: { },};3、在 VSCode 中集成 ESLint 检查在编辑器中集成 ESLint 检查，可以在开发过程中就发现错误，极大的增加了开发效率。要在 VSCode 中集成 ESLint 检查，我们需要先安装 ESLint 插件，点击「扩展」按钮，搜索 ESLint，然后安装即可。VSCode 中的 ESLint 插件默认是不会检查 .ts 后缀的，需要在「文件 => 首选项 => 设置」中，添加以下配置：{ “eslint.validate”: [ “typescript” ]}将下面代码复制到./src/index.ts中：let num: number = 1;if (num == 2) { console.log(num);}现在项目结构如下：ts3├─dist└─node_modules└─src └─index.ts└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json现在编辑器，应该会提示 4 个错误：我们按照错误提示，修改成正确的代码风格：console.log 一般是在调试阶段使用，发布正式版本时，应该移除。所以这里没有提示红色的致命错误，而是使用了警告。4、无法解析到模块的路径将下面代码复制到./src/index.ts中：import Cat from ‘./Cat’;const kitty: Cat = new Cat(‘kitty’);kitty.say();将下面代码复制到./src/Cat.ts中：export default class Cat { private name: string; constructor(name: string) { this.name = name; } say() { console.log(this.name); }}现在项目结构如下：ts3├─dist└─node_modules└─src └─Cat.ts └─index.ts└─.eslintrc.js└─package-lock.json└─package.json└─tsconfig.json上述代码复制粘贴，保存之后，会提示这样的错误：Unable to resolve path to module ‘./Cat’.eslint(import/no-unresolved)解决办法是使用 eslint-import-resolver-alias ，先安装依赖，执行下面的命令：npm install eslint-plugin-import eslint-import-resolver-alias –save-dev然后，在 .eslintrc.js 配置中，编辑成如下代码：module.exports = { parser: ’typescript-eslint-parser’, env: { browser: true, es6: true, }, extends: ‘airbnb-base’, globals: { Atomics: ‘readonly’, SharedArrayBuffer: ‘readonly’, }, parserOptions: { ecmaVersion: 2018, sourceType: ‘module’, }, rules: { }, settings: { ‘import/resolver’: { alias: { map: [ [’@’, ‘./src’] ], extensions: [’.ts’], }, }, },};四、调试 TypeScript如何 F5 开始调试 TypeScript ，并且还具备断点调试功能，答案是，使用 TS-node。详情查看：https://github.com/TypeStrong/ts-node在项目的根目录下，执行下面的命令：npm install -D ts-node在 VScode 调试中，添加配置：{ // 使用 IntelliSense 了解相关属性。 // 悬停以查看现有属性的描述。 // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387 “version”: “0.2.0”, “configurations”: [ { “type”: “node”, “request”: “launch”, “name”: “Launch Program”, “runtimeArgs”: [ “-r”, “ts-node/register” ], “args”: [ “${workspaceFolder}/src/index.ts” ] } ]}按 F5 开始愉快的调试吧，F9 是添加断点：五、参考文章配置 Webpack resolve alias 简化相对路径 importeslint-import-resolver-aliasESLint入门ts-node编译选项使用ts-node和vsc来调试TypeScript代码通过任务与外部工具集成vscode 调试 TypeScriptESLint代码检查 · TypeScript 入门教程