VSCode如何设置智能导入排序 VSCode自动整理import语句的配置技巧

source.organizeImports

editor.codeActionsOnSave

settings.json

Ctrl+,

Cmd+,

.vscode/settings.json

{
    // 启用在保存时自动整理导入
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    },
    // 对于JavaScript/TypeScript文件，可以进一步细化
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode", // 如果使用Prettier
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true, // 如果使用ESLint进行自动修复
            "source.organizeImports": true
        }
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.organizeImports": true
        }
    },
    "[javascriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.organizeImports": true
        }
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.eslint": true,
            "source.organizeImports": true
        }
    },
    // ESLint插件的配置，确保其自动修复功能开启
    "eslint.run": "onSave",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact"
    ],
    "eslint.format.enable": true, // 允许ESLint作为格式化工具
    "eslint.workingDirectories": [ // 如果你的项目有多个子目录，可能需要配置
        { "mode": "auto" }
    ],
    // Prettier插件的配置，确保其不与ESLint冲突，通常由ESLint接管格式化
    "prettier.enable": true,
    "prettier.singleQuote": true, // 示例：单引号
    "prettier.trailingComma": "all", // 示例：尾随逗号
    "prettier.printWidth": 100, // 示例：行宽
    "prettier.arrowParens": "always" // 示例：箭头函数括号
}

eslint-plugin-prettier

"plugin:prettier/recommended"

source.fixAll.eslint

source.organizeImports

settings.json

editor.codeActionsOnSave

{
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

source.organizeImports

true

Ctrl+S

Cmd+S

organizeImports

eslint-plugin-import

import/order

.eslintrc.js

.eslintrc.json

import/order

// .eslintrc.js 示例
module.exports = {
  // ... 其他配置
  plugins: [
    'import',
    // ... 其他插件
  ],
  rules: {
    'import/order': [
      'error',
      {
        'groups': [
          'builtin', // Node.js 内置模块 (e.g., path, fs)
          'external', // 第三方模块 (e.g., react, lodash)
          'internal', // 内部模块/别名 (e.g., @/components)
          ['parent', 'sibling', 'index'], // 相对路径模块 (e.g., ../foo, ./bar, ./index)
          'object', // Object imports (e.g., import * as foo from 'foo')
          'type', // 类型导入 (e.g., import type { Foo } from 'foo')
        ],
        'pathGroups': [
          {
            'pattern': '@/**', // 假设你的别名路径以 @/ 开头
            'group': 'internal',
            'position': 'after' // 放在 external 之后
          },
          {
            'pattern': '~/**', // 另一个可能的别名
            'group': 'internal',
            'position': 'after'
          }
        ],
        'newlines-between': 'always', // 不同组之间空一行
        'alphabetize': {
          'order': 'asc', // 组内按字母升序
          'caseInsensitive': true // 忽略大小写
        }
      }
    ],
    // ... 其他规则
  },
};

eslint-plugin-prettier

import/order