ESLint 是一个能够帮助我们写出更规范的 JavaScript 代码的工具。而为了更好地使用 TypeScript，我们可以使用 ESLint 的插件来检查 TypeScript 代码，并且使用一些配置选项使得代码更规范。本文将介绍如何在 ESLint 中使用 TypeScript。
安装
首先需要安装 ESLint 的 TypeScript 插件：
npm install --save-dev @typescript-eslint/eslint-plugin
然后需要安装 ESLint 和 TypeScript：
npm install --save-dev eslint typescript
配置
创建一个 .eslintrc.js 文件，并按照如下方式配置：
-- -------------------- ---- -------
-------------- - -
------- ----------------------------
-------- -----------------------
-------- -
----------------------------------------
--------------
--
------ -
-------------------- --------- --------- -
--- --------
---- --------
--- --------
---- --------
---
--
--这里使用 @typescript-eslint/parser 作为解析器，使用 @typescript-eslint/recommended 作为规则扩展，使用 airbnb-base 作为风格扩展。
其中 'import/extensions' 规则是用来取消对导入文件名后缀的强制要求。因为 TypeScript 的文件后缀通常是 .ts 或者 .tsx，所以使用这个规则去掉后缀的约束。
使用
现在可以使用 ./node_modules/.bin/eslint 命令来检查 TypeScript 代码了。
例如，检测 src/index.ts 文件：
./node_modules/.bin/eslint src/index.ts
为了方便，可以配置 scripts 来简化命令：
{
"scripts": {
"lint": "eslint src/**/*.{ts,tsx}"
}
}现在可以使用 npm run lint 命令来检查 TypeScript 代码了。
示例代码
下面是一个简单的示例代码：
function greeter(name: string) {
return `Hello, ${name}!`;
}
console.log(greeter('TypeScript'));检查这段代码会得到如下结果：
-- -------------------- ---- ------- - -------------------------- -------- -------- ---- ----- ------- ------ ---- -- -------- ------------------------------------------------- ---- ----- -------- - --------- ----- - ------ --------- ---- ---- ----- ------- ---- --- ----------- ------ - - -------- -- ------- - --------- - ------ --- - -------- ----------- ------- ---- --- ------- -------
可以看到，ESLint 检查到了三个问题：
- 第一行的函数没有显式指定返回值类型；
- 第一行的函数后面应该有分号；
- 第四行的字符串应该使用单引号。
修复这些问题可以将代码修改为：
function greeter(name: string): string {
return `Hello, ${name}!`;
}
console.log(greeter('TypeScript'));总结
本文介绍了如何在 ESLint 中使用 TypeScript，包括安装插件、配置规则、使用命令和示例代码等。通过使用 ESLint 和 TypeScript，我们可以写出更规范的代码，并且提高代码质量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64956f1948841e989429d426