npm 包 @aortman/eslint-plugin-import 使用教程-JavaScript中文网-JavaScript教程资源分享门户

前言

前端开发过程中，需要保证代码的规范性和可维护性。其中一个方面就是引用模块的规范性，例如使用绝对路径还是相对路径、显式指定引用路径等。

这时候，我们可以使用 eslint 工具来检查我们的代码风格。而 @aortman/eslint-plugin-import 就是一个专门用来检查模块引用风格的 eslint 插件。本文将介绍这个插件的使用方法和注意事项。

首先，安装 ESLint：

npm install eslint --save-dev

然后，安装 @aortman/eslint-plugin-import：

npm install @aortman/eslint-plugin-import --save-dev

打开 .eslintrc 配置文件，添加 @aortman/eslint-plugin-import 到 plugins 中：

{
  "plugins": ["@aortman/eslint-plugin-import"]
}

然后，配置规则：

{
  "rules": {
    "@aortman/eslint-plugin-import/no-unresolved": ["error", { "commonjs": true }]
  }
}

这个规则的意思是，禁止使用未解决的模块，包括 CommonJS 和 ES6。

检查相对路径引用

对于相对路径的引用，我们应该用 ., .. 来明确指定路径。例如，对于以下代码：

import demo from "../demo";

我们可以使用 no-relative-parent-imports 规则来检查：

{
  "rules": {
    "@aortman/eslint-plugin-import/no-relative-parent-imports": ["error"]
  }
}

检查默认导出的文件名与文件夹名是否一致

当使用默认导出时，我们应该遵循一致的文件名和文件夹名规范。比如，当导出名为 index.js 时，应该将文件夹名命名为与导出名一样的名称。例如：

├── src
│   ├── index.js
│   ├── other.js
│   └── demo
│       ├── index.js
│       └── other.js

这样，在引用 demo 模块时，我们可以直接用文件夹名来引用：

import demo from "./demo";

使用 consistent-indexed-file-name 规则来检查：

{
  "rules": {
    "@aortman/eslint-plugin-import/consistent-indexed-file-name": ["error", { "commonjs": true }]
  }
}

检查绝对路径

在某些情况下，我们可能需要使用绝对路径来引用模块。例如，当我们引用一个 node_modules 中的模块时，我们应该使用绝对路径来确保正确性。

使用 no-absolute-path 规则来检查：

{
  "rules": {
    "@aortman/eslint-plugin-import/no-absolute-path": ["error"]
  }
}

@aortman/eslint-plugin-import 是一个方便我们在开发过程中检查模块引用规范的工具。在实际开发中，我们应该根据项目的需要添加相应的规则，确保代码的易读性和可维护性。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005663081e8991b448e21be