Vscode 如何自动排序导入语句

前言

在日常的 React 项目开发中，我们经常需要导入各种模块和组件。然而，随着项目规模的扩大，import 语句容易变得混乱不堪，这不仅增加了代码的可读性难度，还可能导致不必要的冲突和错误。
幸运的是，VSCode 提供了一些插件和设置，能够帮助我们自动排序导入语句，让代码更加整洁和易读。

为什么要自动排序导入语句？

1. 提高可读性：有序排列的导入语句可以让人一目了然地知道当前文件依赖了哪些模块。
2. 减少冲突：避免因为手动排列导入顺序导致的冲突，减少出错的几率。
3. 代码规范：统一的导入顺序可以让团队代码风格更加一致。

实现步骤

我们需要用到的主要工具是 VSCode 和一个叫做 eslint 的插件。eslint 是一个流行的代码检查工具，可以帮助我们自动化很多代码风格和质量检查工作。

步骤一：安装 ESLint 插件

在 VSCode 中打开扩展面板（快捷键：Ctrl+Shift+X），搜索 ESLint 并安装它。

步骤二：安装 ESLint 和相关插件

在你的 React 项目根目录下，打开终端并运行以下命令：
npm install eslint eslint-plugin-import eslint-config-airbnb --save-dev

步骤三：配置 ESLint

在项目根目录下创建或编辑 .eslintrc.json 文件，加入以下配置：

{
  "extends": ["airbnb"],
  "plugins": ["import"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["sibling", "parent"]],
        "newlines-between": "always"
      }
    ]
  }
}

这个配置的主要作用是定义导入语句的排列顺序和分组规则。

步骤四：安装 Prettier 和整合 ESLint

为了更好地格式化代码，我们再安装一个辅助工具 prettier：
npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev

然后在 .eslintrc.json 文件中添加以下配置：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["import", "prettier"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["sibling", "parent"]],
        "newlines-between": "always"
      }
    ],
    "prettier/prettier": "error"
  }
}

步骤五：配置 VSCode 保存时自动修复

在 VSCode 的设置文件 .vscode/settings.json 中添加以下配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

这样，每次保存文件时，ESLint 会自动修复代码风格问题，包括导入语句的排序。

进阶技巧

1. 使用 sort-imports 规则

除了 import/order 规则外，ESLint 还提供了 sort-imports 规则。这条规则可以进一步细化导入语句的排序方式，比如按字母顺序排序等。
在 .eslintrc.json 文件中添加或修改配置如下：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["import", "prettier"],
  "rules": {
    "import/order": [
      "error",
      {
        "groups": ["builtin", "external", "internal", ["sibling", "parent"]],
        "newlines-between": "always"
      }
    ],
    "sort-imports": [
      "error",
      {
        "ignoreCase": true,
        "ignoreDeclarationSort": true,
        "ignoreMemberSort": false,
        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
      }
    ],
    "prettier/prettier": "error"
  }
}

2. 使用 eslint-plugin-simple-import-sort

如果你希望有更多的排序灵活性，可以考虑使用 eslint-plugin-simple-import-sort。它提供了更多的排序规则选项。

首先，安装插件：

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

然后在 .eslintrc.json 中配置：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["simple-import-sort", "prettier"],
  "rules": {
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "prettier/prettier": "error"
  }
}

3. 自定义排序规则

simple-import-sort 插件允许我们自定义排序规则：

{
  "extends": ["airbnb", "prettier"],
  "plugins": ["simple-import-sort", "prettier"],
  "rules": {
    "simple-import-sort/imports": [
      "error",
      {
        "groups": [
          // Node.js builtins. You could also generate this regex if you use a `.js` config.
          // For example: `^(${require("module").builtinModules.join("|")})(/|$)`
          ["^node:"],
          // Packages. `react` related packages come first.
          ["^react", "^@?\\w"],
          // Internal packages.
          ["^(@|components|utils|config|vendored-lib)(/.*|$)"],
          // Side effect imports.
          ["^\\u0000"],
          // Parent imports. Put `..` last.
          ["^\\.\\.(?!/?$)", "^\\.\\./?$"],
          // Other relative imports. Put same-folder imports and `.` last.
          ["^\\./(?=.*/)(?!/?$)", "^\\.(?!/?$)", "^\\./?$"],
          // Style imports.
          ["^.+\\.s?css$"]
        ]
      }
    ],
    "simple-import-sort/exports": "error",
    "prettier/prettier": "error"
  }
}

最佳实践

1. 频繁保存：配置 VSCode 自动保存（“files.autoSave”: “onWindowChange”, “editor.formatOnSave”: true），确保每次代码变化都能及时被格式化。
2. 团队共识：确保团队所有成员都使用相同的 ESLint 配置，这样可以避免因为不同的风格导致的代码冲突。
3. 代码审查：在代码审查时，关注导入语句的排序和规范，确保新加入的代码也遵循既定规则。

总结

通过这一系列的配置和插件安装，我们已经成功让 VSCode 自动帮我们排序 React 项目中的导入语句。不仅提高了代码的可读性和一致性，还减少了手动整理代码的时间。这不仅让代码更加整洁，还可以提高团队协作时的代码一致性。