自动导入排序 -2024-10-14

方法一: 快捷键

ctrl +shift+p 输入 sort import

方法二: 按照vscode插件,可以自定义排序顺序

auto-sort-import

image.png

方法三: 使用插件

1. 安装依赖

• 注意: eslint版本不能超过8版本,9版本不适用
• 注意!: .vscode文件要放在根目录

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

2.新建 .eslintrc.js 文件

// 可以使用eslint-config-typescript和eslint-config-react替代eslint-config-ali/typescript/react
module.exports = {
  extends: ['plugin:@typescript-eslint/recommended'],
  plugins: ['simple-import-sort'],
  rules: {
    'simple-import-sort/imports': [
      1,
      {
        groups: [
          ['^react', '^@?\\w'],
          [
            '^(@|@typings|@enums|@service|@common|@domain|@components|@pages)(/.*|$)',
            '^\\.\\.(?!/?$)',
            '^\\.\\./?$',
            '^\\./(?=.*/)(?!/?$)',
            '^\\.(?!/?$)',
            '^\\./?$',
          ],
          // Style imports.
          ['^.+\\.s?css$'],
        ],
      },
    ],
  },
};

3.新建.vscode文件夹,下面创建extensions.json文件和settings.json

3.1 settings.json

备注: "editor.codeActionsOnSave" 是VSCode的一个设置，用于指定在保存文件时自动执行的代码操作。这个设置是一个对象，键是代码操作的类型，值是对应的代码修复命令。
"source.fixAll.eslint" 和 "source.fixAll.stylelint" 是两个代码修复命令，分别用于修复 ESLint 和 Stylelint 检查出的问题。"explicit" 是一个选项，表示在执行代码修复时需要手动确认。

{
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact", "vue"],
  "stylelint.validate": ["css", "scss", "less", "acss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.fixAll.stylelint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

3.2 extensions.json

{
  "recommendations": [
    "dbaeumer.vscode-eslint",
    "stylelint.vscode-stylelint",
    "esbenp.prettier-vscode"
  ]
}

备注:
用于推荐一些VSCode插件。具体来说，它推荐了以下插件：

"dbaeumer.vscode-eslint": 一个用于代码风格检查和自动格式化的插件。
"stylelint.vscode-stylelint": 一个用于检查和修复CSS/SCSS/LESS等样式文件的插件。
"esbenp.prettier-vscode": 一个用于格式化代码的插件，支持多种语言，包括JavaScript、TypeScript、CSS、HTML等。
这些插件可以帮助开发者提高代码质量和开发效率