自动修复 import 排序（ autofix sort import/export ）

最新推荐文章于 2025-04-08 09:24:28 发布

木_林_森

最新推荐文章于 2025-04-08 09:24:28 发布

阅读量9.1k

点赞数 4

分类专栏： js 工具文章标签： javascript 前端

本文链接：https://blog.csdn.net/weixin_42317878/article/details/119919420

版权

js 同时被 2 个专栏收录

29 篇文章

订阅专栏

工具

3 篇文章

订阅专栏

本文介绍了如何使用eslint-plugin-simple-import-sort和@trivago/prettier-plugin-sort-imports来自动修复和排序import/export。通过配置.eslintrc.js，添加相关规则并设置editor.codeActionsOnSave，实现VSCode保存时自动修复。同时，利用lint-staged和prettier在git commit阶段进行格式化校验。此外，还提到了在项目中应用这些工具的方法和注意事项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自动修复 import 排序

import/export 按一定的规则排序，既让代码美观，也让开发者更好的维护代码，目前自动修复import/export主要有以下两种：

基于eslint 规则的 eslint-plugin-simple-import-sort 自动导入排序和校验；
基于 prettier 的 plugin @trivago/prettier-plugin-sort-imports 自动导入排序；

eslint-plugin-simple-import-sort

 yarn  add  -S   eslint  eslint-plugin-simple-import-sort @typescript-eslint/eslint-plugin  @typescript-eslint/parser

在根目录 .eslintrc.js 添加配置

{
 parser: “@typescript-eslint/parser”,
  parserOptions: {
    project: 'tsconfig.json',
    tsconfigRootDir: __dirname,
    sourceType: 'module',
  },
 plugins: ["simple-import-sort", "import","'@typescript-eslint'"],
 "rules": {
    'sort-imports': 'off',
    'import/order': 'off',
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
  },
  "overrides": [
    {
      "files": "server/**/*.js",
      "env": { "node": true },
      "rules": {
        "simple-import-sort/imports": "off",
        "import/order": ["error", { "newlines-between": "always" }]
      }
    }
  ]
 
}

命令行 fix，在package.json，添加命令

"lint:fixJs": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",

save autofix sort ，编辑器vscode 安装eslint 插件，setting.json 添加配置

 "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
  "eslint.validate": [
        "json",
        "javascript",
        "typescript",
        "typescriptreact",
        "javascriptreact",
    ],

同时可以在 git commit 阶段设置钩子校验eslint ，配置方式可以自行查阅，

@trivago/prettier-plugin-sort-imports

 yarn  add  -S prettier   @trivago/prettier-plugin-sort-imports

prettierrc 配置添加以规则配置，command+s 保存，自动格式化

{
  importOrder: ['^@formily/(.*)', '^@(.*)$', '^[./]'],
  importOrderSeparation: true,
}

可以在importOrder 中自定义想要的规则，这个在eslint 中没有校验，规则较为宽松，可以在git commit hook 中配置 prettier 自定格式化 commit 的文件

"lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "yarn lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,scss,md,json}": [
      "prettier --write"
    ]
  },