TypeScript（八）代码检查（AlloyTeam 的 ESLint、Prettier）、编译选项（allowJs、allowSyntheticDefaultImports）

TypeScript（八）代码检查（AlloyTeam 的 ESLint、Prettier）、编译选项（allowJs、allowSyntheticDefaultImports）

• 网址：https://ts.xcatliu.com/

1. 代码检查

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。

什么是代码检查

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

在 JavaScript 项目中，我们一般使用 ESLint 来进行代码检查，它通过插件化的特性极大的丰富了适用范围，搭配 typescript-eslint 之后，甚至可以用来检查 TypeScript 代码。

为什么需要代码检查

有人会觉得，JavaScript 非常灵活，所以需要代码检查。而 TypeScript 已经能够在编译阶段检查出很多问题了，为什么还需要代码检查呢？

因为 TypeScript 关注的重心是类型的检查，而不是代码风格。当团队的人员越来越多时，同样的逻辑不同的人写出来可能会有很大的区别：

• 缩进应该是四个空格还是两个空格？
• 是否应该禁用 var？
• 接口名是否应该以 I 开头？
• 是否应该强制使用 === 而不是 ==？

这些问题 TypeScript 不会关注，但是却影响到多人协作开发时的效率、代码的可理解性以及可维护性。

下面来看一个具体的例子：

var myName = 'Tom';

console.log(`My name is ${
     myNane}`);
console.log(`My name is ${
     myName.toStrng()}`);

以上代码你能看出有什么错误吗？

分别用 tsc 编译和 eslint 检查后，报错信息如下：

var myName = 'Tom';
// eslint 报错信息：
// Unexpected var, use let or const instead.eslint(no-var)

console.log(`My name is ${
     myNane}`);
// tsc 报错信息：
// Cannot find name 'myNane'. Did you mean 'myName'?
// eslint 报错信息：
// 'myNane' is not defined.eslint(no-undef)
console.log(`My name is ${
     myName.toStrng()}`);
// tsc 报错信息：
// Property 'toStrng' does not exist on type 'string'. Did you mean 'toString'?

存在的问题	tsc 是否报错	eslint 是否报错
应该使用 let 或 const 而不是 var	❌	✅
myName 被误写成了 myNane	✅	✅
toString 被误写成了 toStrng	✅️	❌

上例中，我们使用了 var 来定义一个变量，但其实 ES6 中有更先进的语法 let 和 const，此时就可以通过 eslint 检查出来，提示我们应该使用 let 或 const 而不是 var。

对于未定义的变量 myNane，tsc 和 eslint 都可以检查出来。

由于 eslint 无法识别 myName 存在哪些方法，所以对于拼写错误的 toString 没有检查出来。

由此可见，eslint 能够发现出一些 tsc 不会关心的错误，检查出一些潜在的问题，所以代码检查还是非常重要的。

在 TypeScript 中使用 ESLint

安装 ESLint

ESLint 可以安装在当前项目中或全局环境下，因为代码检查是项目的重要组成部分，所以我们一般会将它安装在当前项目中。可以运行下面的脚本来安装：

npm install --save-dev eslint

由于 ESLint 默认使用 Espree 进行语法解析，无法识别 TypeS