npm包详解

npm

工程化

发布日期: 2024-10-17

文章字数: 976

阅读时长: 4 分

阅读次数:

`simple-import-sort`

simple-import-sort 是一个用于自动排序 JavaScript 和 TypeScript 文件中的 import 语句的 ESLint 插件或工具，旨在提高代码的一致性、可读性和维护性。它通过按字母顺序和模块类型（如第三方库、相对路径等）排序导入内容，使代码风格更加统一，减少代码审查中的无效讨论。

作用和好处

提高代码可读性：当所有的 import 语句按照固定规则排列时，代码会显得更加整洁和一致，其他开发者在阅读代码时也能快速找到所需的依赖。
减少人为错误：手动调整 import 顺序可能容易出错，尤其是在大型项目中。simple-import-sort 自动化这一过程，确保导入顺序始终符合预期。
与 ESLint 集成：通过与 ESLint 的集成，你可以在代码检查或提交时自动排序 import 语句，保证团队代码风格的一致性。
按模块类别排序：simple-import-sort 不仅按字母顺序排列，还可以智能地将第三方模块、本地模块、相对路径等分组，使导入顺序更加清晰。

使用步骤

1. 安装

你可以通过 npm 或 yarn 安装 simple-import-sort 和 ESLint 插件：

npm install --save-dev eslint-plugin-simple-import-sort

或者：

yarn add eslint-plugin-simple-import-sort --dev

2. 配置 ESLint

安装完成后，你需要在 ESLint 的配置文件中启用 simple-import-sort 插件。

在 .eslintrc.js 文件中进行如下配置：

module.exports = {
  plugins: ["simple-import-sort"],
  rules: {
    // 启用自动排序的规则
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
}

simple-import-sort/imports：自动对 import 语句进行排序。
simple-import-sort/exports：自动对 export 语句进行排序（可选）。

3. 使用示例

假设你有如下未排序的 import 语句：

import React from "react"
import { useState } from "react"
import _ from "lodash"
import { Button } from "./components/Button"
import "./styles.css"
import { Link } from "react-router-dom"

启用 simple-import-sort 规则后，import 语句会自动按照规则重新排序，如下：

import React from "react"
import { useState } from "react"

import _ from "lodash"
import { Link } from "react-router-dom"

import { Button } from "./components/Button"

import "./styles.css"

simple-import-sort 默认会按照以下规则进行分组和排序：

第三方库 import（如 react, lodash）
相对路径或本地模块 import（如 ./components/Button）
样式或其他非 JS 资源的 import（如 ./styles.css）

4. 命令行排序（可选）

你也可以直接通过命令行使用 simple-import-sort 来对文件进行排序，而不依赖 ESLint：

npx simple-import-sort ./src/**/*.js

这将在命令行中对指定目录中的文件执行 import 排序。

高级用法

分组排序

你可以在 eslint 配置中自定义分组规则。例如，按照库类型或路径深度进行分组：

module.exports = {
  plugins: ["simple-import-sort"],
  rules: {
    "simple-import-sort/imports": [
      "error",
      {
        groups: [
          // Node.js built-in modules
          ["^node:"],
          // External libraries
          ["^@?\\w"],
          // Internal modules
          ["^(@|components)(/.*|$)"],
          // Parent imports (starting with ..)
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Relative imports (starting with .)
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports
          ["^.+\\.s?css$"],
        ],
      },
    ],
  },
}

这段配置将导入语句分为多个组：Node.js 内置模块、外部库、内部模块、父级目录、相对路径和样式文件。

与 Prettier 集成

simple-import-sort 可以与 Prettier 一起使用，通过 Prettier 格式化代码时确保导入顺序正确：

安装 Prettier 和 eslint-config-prettier：

npm install --save-dev prettier eslint-config-prettier

配置 .eslintrc.js 文件禁用 ESLint 中可能与 Prettier 冲突的规则：

module.exports = {
  extends: ["eslint:recommended", "plugin:prettier/recommended"],
  plugins: ["simple-import-sort"],
  rules: {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
}