前端开发中，我们经常会使用到一些第三方的库和模块。但是，有时候我们会遇到一些 "unresolved import" 的警告，这个警告是由 eslint 提供的。这个警告的意思是，eslint 无法找到所引用的模块或库。
在这篇文章中，我们将介绍如何使用 eslint-config-airbnb 来解决这个问题。
什么是 eslint-config-airbnb？
eslint-config-airbnb 是一个 eslint 配置规则集，它是 Airbnb 公司开源的一套 JavaScript 编码规范。它包含了很多常见的 JavaScript 编码规范，可以帮助我们更好的编写代码。同时，它也包含了一些针对 React、Vue 等框架的规范。
如何使用 eslint-config-airbnb？
使用 eslint-config-airbnb 的方法很简单，我们只需要按照以下步骤操作即可：
1. 安装 eslint-config-airbnb
首先，我们需要安装 eslint-config-airbnb。我们可以使用 npm 来进行安装：
npm install eslint-config-airbnb --save-dev
2. 配置 .eslintrc 文件
在安装完 eslint-config-airbnb 之后，我们需要在 .eslintrc 文件中进行配置，以便 eslint 可以正确读取我们的配置。
在 .eslintrc 文件中，我们需要添加以下内容：
{
"extends": "airbnb"
}这个配置告诉 eslint，我们要继承 eslint-config-airbnb 这个规则集。
3. 配置 eslint-plugin-import
在配置完成之后，我们还需要配置 eslint-plugin-import。这个插件可以帮助我们解决 "unresolved import" 的警告。
我们可以使用 npm 来进行安装：
npm install eslint-plugin-import --save-dev
在 .eslintrc 文件中，我们需要添加以下内容：
{
"plugins": ["import"]
}这个配置告诉 eslint，我们要使用 eslint-plugin-import 这个插件。
4. 配置 eslint-import-resolver-node
在配置完成之后，我们还需要配置 eslint-import-resolver-node。这个插件可以帮助我们解决 "unresolved import" 的警告。
我们可以使用 npm 来进行安装：
npm install eslint-import-resolver-node --save-dev
在 .eslintrc 文件中，我们需要添加以下内容：
// javascriptcn.com 代码示例
{
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".jsx", ".ts", ".tsx"]
}
}
}
}这个配置告诉 eslint，在查找模块时，要使用 eslint-import-resolver-node 这个插件，并且要查找 .js、.jsx、.ts、.tsx 这些文件。
示例代码
下面是一段示例代码，我们可以通过这段代码来测试我们的配置是否生效：
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);如果我们没有配置 eslint-config-airbnb、eslint-plugin-import、eslint-import-resolver-node，那么 eslint 会报出 "unresolved import" 的警告。但是，如果我们按照以上步骤进行配置，那么这个警告就会消失。
总结
在这篇文章中，我们介绍了如何使用 eslint-config-airbnb 来解决 "unresolved import" 的警告。通过这个配置，我们可以更好地编写代码，减少代码中的错误和警告。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6563f772d2f5e1655dd63798