随着项目的扩大和代码量的增加，一个好的代码规范变得越来越必要。而 eslint 这个工具就是用来规范 JavaScript 代码的最佳工具之一。而当我们使用 TypeScript 开发时， @dkundel/eslint-config-ts 可以帮助我们更好地规范 TypeScript 代码。本文将会详细讲解如何使用 @dkundel/eslint-config-ts。
安装
第一步，我们要做的就是安装 @dkundel/eslint-config-ts，并安装所需的 eslint 和 typescript 依赖：
npm install -D eslint typescript @dkundel/eslint-config-ts
配置
接下来我们需要配置 eslint。在当前项目根目录下新建一个 .eslintrc.json 文件，然后在文件中继承 @dkundel/eslint-config-ts 并添加一些自己的配置：
-- -------------------- ---- -------
-
---------- ----------------
---------------- -
---------- ------------------
------------- --------
--
-------- -
-- ------------
-
-我们在 extends 中继承了 @dkundel/ts 配置，这样就会自动包含 @dkundel/eslint-config-ts 中的 TypeScript 规则。在 parserOptions 中，我们指定了 TypeScript 的配置文件位置和使用的模块类型。在 rules 中，你可以添加自己的规则。
VS Code 配置
如果你使用 VS Code 编辑器，你可以安装 eslint 插件来自动进行代码规范检查。同时，你还需要在 VS Code 中添加以下配置：
{
"eslint.options": {
"configFile": ".eslintrc.json"
},
"editor.codeActionsOnSave": {
"source.fixAll": true
},
}这样，每次保存文件时就会自动格式化代码，并自动修复错误。
示例代码
首先让我们创建一个简单的 TypeScript 文件：
// greet.ts
export function greet(name: string) {
return `Hello, ${name}!`;
}然后创建一个测试文件：
-- -------------------- ---- -------
-- -------------
------ - ----- - ---- ----------
--------------- ---------- -- -- -
---------- ------ --- ------- ---------- -- -- -
----- ------ - --------------
------------------------------ --------
---
---现在如果你直接运行 npx eslint . 来检查代码规范，你会得到如下错误：
2:7 error 'function' is missing in type annotation for `greet` @typescript-eslint/explicit-function-return-type
这是因为 @dkundel/eslint-config-ts 要求我们必须显式地指定函数的返回类型，所以我们需要在 greet 函数前面加上类型注解：
export function greet(name: string): string {
return `Hello, ${name}!`;
}然后再次运行 npx eslint .，你会发现没有了错误，代码规范检查通过了。
结论
使用 @dkundel/eslint-config-ts 可以帮助我们规范 TypeScript 代码，并提高代码质量。通过本文的介绍，你已经知道如何使用 @dkundel/eslint-config-ts 来规范 TypeScript 代码了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb4bcb5cbfe1ea0611350