[11] 配置总结

一、总结

babel去转译ts，tsc去做类型检查，eslint去做代码检查。

二、图文表示

转译TS文件-babel

类型检查-tsc

还是tsc，就是项目里的tsconfig.json。

代码检查-eslint

三、编译工具的选择，为什么是babel

四、代码检查，为什么是eslint

背景

使用Vue和React开发时，通常使用ESLint做代码检测。TypeScript有自己的检查工具TSLint 。
但由于ESLint在Vue和React的影响及更好的性能，TypeScript也决定使用ESLint做TS的代码检测工具

ESLint

TypeScript编译器主要做两件事,即类型检查和语言转换

1. 类型检查
2. 语言转换 ，编译 ts 文件的工具。
3. 也会对语法错误做一些检查
   而ESLint除了检查语法,还能够保持代码风格统一\

问题: ESLint不能直接检查TS语法，因为TypeScript和ESLint两种语法树AST是不兼容的。
解决: @typescript-eslint插件
举个例子： espree解析器是无法识别：符号的。 因此将解析器改为@typescript-eslint/parser，正确解析ts语法树了。

配置ESLint

package.json:

"scripts": {
	...
    "lint": "eslint src --ext .js,.ts" // 自动检查js,ts
    ...
},
"devDependencies": {
	...
    "@typescript-eslint/eslint-plugin": "^1.10.2",// 识别TS语法
    "@typescript-eslint/parser": "^1.10.2",	// TS解析器
    "eslint": "^5.16.0",	// eslint
    ...
  },

.eslintrc

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser', // 指定解析器
  plugins: [
    '@typescript-eslint', // 插件
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended', // 一套规则
  ],
};

其他代码检查

eslint-plugin-vue （用来检测vue语法）

• 需要升级eslint版本以及eslint-plugin-vue （用来检测vue语法）：重新安装

• 并且webpack.config.js 里面 的 eslint-loader 配置vue文件。
• 安装vue-eslint-parser ;因为eslint-plugin-vue 需要**vue-eslint-parser（自定义解析器）** 来解析.vue文件。

ESLint对TS的支持

2019 年 1 月，TypeScirpt 官方决定全面采用 ESLint 作为代码检查的工具，并创建了一个新项目 typescript-eslint，提供了 TypeScript 文件的解析器 @typescript-eslint/parser 和相关的配置选项 @typescript-eslint/eslint-plugin 等。

而之前的两个 lint 解决方案都将弃用：

• typescript-eslint-parser 已停止维护
• TSLint 将提供迁移工具，并在 typescript-eslint 的功能足够完整后停止维护 TSLint（Once we consider ESLint feature-complete w.r.t. TSLint, we will deprecate TSLint and help users migrate to ESLint1）

综上所述，目前以及将来的 TypeScript 的代码检查方案就是 typescript-eslint。