ESLint 是一个用来检查 JavaScript 代码的工具，它可以帮助我们规范代码风格、发现潜在的问题等等。随着 TypeScript 的流行，现在许多项目都采用了 TypeScript 作为主要的开发语言。但是在一些情况下，我们还是需要与一些 JavaScript 代码进行混合编程。本文将介绍如何让 ESLint 支持 JavaScript 和 TypeScript 混合编程。
安装依赖
首先需要安装以下依赖：
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
上述依赖包含了 ESLint、TypeScript 解析器和 TypeScript 插件。
配置文件
接下来需要创建一个 ESLint 配置文件。我们可以使用 eslint --init 命令来创建一个初始的配置文件，也可以手动创建一个 .eslintrc.js 文件。
在配置文件中的 extends 属性中需要添加 plugin:@typescript-eslint/recommended 和 eslint:recommended。配置中还需要指定解析器和文件类型，具体如下：
-- -------------------- ---- -------
-------------- - -
------- ----------------------------
-------- -
----------------------------------------
--------------------
--
-------- -
--------------------
--
-------------- -
------------ -----
----------- --------
--
---- -
-------- -----
----- -----
---- ----
--
------ -
-- ------
-
--如果你的项目需要使用 React，可以添加 plugin:react/recommended 到 extends 数组中。
配置 TypeScript
在使用 TypeScript + ESLint 的代码中，我们需要将所有 TypeScript 类型定义都放在 .d.ts 文件中。这些文件被视为全局模块，所以在你的代码中不需要使用 import 来引用这些类型。如果你的 JavaScript 代码中使用了 TypeScript 类型，可以将这些类型定义放在一个 .d.ts 文件中。
配置规则
在配置规则时，有一些规则需要特别关注。首先是 @typescript-eslint/explicit-module-boundary-types。这个规则需要在你的 TypeScript 代码中添加函数返回类型。示例代码如下：
function greet(name: string): string {
return `Hello, ${name}!`;
}需要添加函数返回类型：
function greet(name: string): string {
return `Hello, ${name}!`;
}
export {};需要注意的是，添加了 export {} 后，这个模块就成为了一个有效的 TypeScript 模块。
另一个需要关注的规则是 @typescript-eslint/no-unused-vars。这个规则会检查未使用的变量，不过要注意的是，它默认只会检查 TypeScript 类型和接口中未使用的属性和成员变量，而不会检查函数和变量。
总结
本文介绍了如何让 ESLint 支持 JavaScript 和 TypeScript 混合编程。虽然使用 TypeScript 确实可以帮助我们更好地管理代码，但在一些情况下，与 JavaScript 代码进行混合编程可能是必要的。通过本文的介绍，相信大家已经了解了如何配置 ESLint 来支持这种混合编程方式，希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c793815ad90b6d0410f4a9