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

ey6vmuN.png!web

一、环境

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

二、开发 `TypeScript`

1、建立项目目录

使用以下命令创建项目的目录：

mkdir ts3
cd ts3
mkdir src
mkdir dist

建立好的目录如下：

ts3
├─dist
└─src

2、初始化 `NPM`

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

npm init -y

现在项目结构如下：

ts3
├─dist
└─src
└─package.json

3、安装 `TypeScript`

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

npm i -g typescript

4、创建并配置 `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.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

6、使用自动实时编译

手动编译还是比较麻烦，如果能够保存代码后，自动编译就好了。

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

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

myyIRfU.png!web

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

7、简化运行命令

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

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

三、代码检查

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

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

1、安装 `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

2、创建配置文件 `.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 [email protected] No description
npm WARN [email protected] No repository field.

+ [email protected]
+ [email protected]
+ [email protected]
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: {
  },
};

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 个错误：

eeme22V.png!web

我们按照错误提示，修改成正确的代码风格：

console.log 一般是在调试阶段使用，发布正式版本时，应该移除。所以这里没有提示红色的致命错误，而是使用了警告。

Iz2Izqf.png!web

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"
      ]
    }
  ]
}

YrqMzyn.png!web

按 F5 开始愉快的调试吧， F9 是添加断点：

JNRnUvB.png!web

一、环境

二、开发 `TypeScript`

1、建立项目目录

2、初始化 `NPM`

3、安装 `TypeScript`

4、创建并配置 `tsconfig.json`

5、 `Hello Typescript`

6、使用自动实时编译

7、简化运行命令

三、代码检查

1、安装 `ESLint`

2、创建配置文件 `.eslintrc.js`

3、在 `VSCode` 中集成 `ESLint` 检查

4、无法解析到模块的路径

四、调试 `TypeScript`

五、参考文章

Recommend

服务端预渲染之Nuxt（介绍篇）

Ubuntu 18.04 基础系统配置

如何用Kubernetes建立CDN服务

有哪些好用能提高工作效率的 Excel 插件（或 Office 办公插件）值得推荐? - 知乎

Way to store your dotfiles: A bare Git repository (2016)

高性价比和高性能随心配！华为云云服务器“畅销款”再进化

儿子生日，想送他一只股票，求推荐

GitHub - Wandmalfarbe/pandoc-latex-template: A pandoc LaTeX template to convert...

Adobe 真是一家神奇的公司

韩圈最让你难以释怀的事情是哪件？ - 知乎

About Joyk

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

一、环境

二、开发 TypeScript

1、建立项目目录

2、初始化 NPM

3、安装 TypeScript

4、创建并配置 tsconfig.json

5、 Hello Typescript

6、使用自动实时编译

7、简化运行命令

三、代码检查

1、安装 ESLint

2、创建配置文件 .eslintrc.js

3、在 VSCode 中集成 ESLint 检查

4、无法解析到模块的路径

四、调试 TypeScript

五、参考文章

Recommend

About Joyk

二、开发 `TypeScript`

2、初始化 `NPM`

3、安装 `TypeScript`

4、创建并配置 `tsconfig.json`

5、 `Hello Typescript`

1、安装 `ESLint`

2、创建配置文件 `.eslintrc.js`

3、在 `VSCode` 中集成 `ESLint` 检查

四、调试 `TypeScript`