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

1、环境

• Node.js v10.15.3
• npm 6.9.0
• Visual Studio Code 1.33.0 (user setup)
• 2019/4/6
• Koa2-Node.js QQ群：481973071

2、开发 TypeScript

一、创建项目目录

使用如下命令建立项目的目录：

mkdir ts3
cd ts3
mkdir src
mkdir dist
复制代码

创建好的目录以下：

ts3
├─dist
└─src
复制代码

二、初始化 NPM

在项目的根目录下，执行下面的命令：

npm init -y
复制代码

如今项目结构以下：

ts3
├─dist
└─src
└─package.json
复制代码

三、安装 TypeScript

在项目的根目录下，执行下面的命令：

npm i -g typescript
复制代码

四、建立并配置 tsconfig.json

在项目的根目录下，执行下面的命令：

tsc --init
复制代码

如今项目结构以下：

ts3
├─dist
└─src
└─package.json
└─tsconfig.json
复制代码

在 tsconfig.json 中取消下面属性项的注释，并修改其属性的值：

这样设置以后，咱们在 ./src 中编码 .ts 文件，.ts 文件编译成 .js 后，输出到 ./dist 中。

"outDir": "./dist",
"rootDir": "./src",
复制代码

五、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.html

tsc 的编译选项，详情查看：https://www.tslang.cn/docs/handbook/compiler-options.html

tsc
node ./dist/index.js

复制代码

执行结果以下：

PS C:\Users\Alan\TestCode\ts3> tsc
PS C:\Users\Alan\TestCode\ts3> node ./dist/index.js
hello, Alan.Tang
复制代码

六、使用自动实时编译

手动编译仍是比较麻烦，若是可以保存代码后，自动编译就行了。

详情查看：https://go.microsoft.com/fwlink/?LinkId=733558

Ctrl + Shift + B 运行构建任务，将显示如下选项：

选择 tsc: 监视 - tsconfig.json ，回车运行以后，编辑的代码保存以后，就会自动编译。

七、简化运行命令

每次输入 node ./dist/index.js 执行代码，有点麻烦，由于命令太长了。

在命令行界面，按键盘 ↑ 切换历史输入命令，能够快速使用历史输入过的命令。

3、代码检查

代码检查主要是用来发现代码错误、统一代码风格。

详情查看：https://ts.xcatliu.com/engineering/lint.html

一、安装 ESLint

ESLint 能够安装在当前项目中或全局环境下，由于代码检查是项目的重要组成部分，因此咱们通常会将它安装在当前项目中。能够运行下面的脚原本安装：

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.json
复制代码

二、建立配置文件 .eslintrc.js

ESLint 须要一个配置文件来决定对哪些规则进行检查，配置文件的名称通常是 .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?
JavaScript

Checking 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? Yes Installing eslint-config-airbnb-base@latest, eslint@^4.19.1 || ^5.3.0, eslint-plugin-import@^2.14.0 npm WARN ts3@1.0.0 No description npm WARN ts3@1.0.0 No repository field. + eslint-config-airbnb-base@13.1.0 + eslint-plugin-import@2.16.0 + eslint@5.16.0 added 53 packages from 37 contributors, updated 1 package and audited 286 packages in 10.303s found 0 vulnerabilities Successfully 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: {
  },
};
复制代码

三、在 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 通常是在调试阶段使用，发布正式版本时，应该移除。因此这里没有提示红色的致命错误，而是使用了警告。

四、没法解析到模块的路径

将下面代码复制到./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'],
      },
    },
  },
};
复制代码

4、调试 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 是添加断点：

5、参考文章

1. 配置 Webpack resolve alias 简化相对路径 import
2. eslint-import-resolver-alias
3. ESLint入门
4. ts-node
5. 编译选项
6. 使用ts-node和vsc来调试TypeScript代码
7. 经过任务与外部工具集成
8. vscode 调试 TypeScript
9. ESLint
10. 代码检查 · TypeScript 入门教程