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

自动修复 import 排序

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

1. 基于eslint 规则的 eslint-plugin-simple-import-sort 自动导入排序和校验；
2. 基于 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"
    ]
  },