如何通过ESLint --fix自动将导出/导入设置为多行格式？

当然可以实现！ #

我之前在团队规范里也配置过类似的导出格式要求，结合ESLint的object-curly-newline规则和Prettier的协同配置就能完美解决你的需求。

核心配置思路 #

我们需要针对**命名导出声明（ExportNamedDeclaration）**单独设置规则：当导出的变量数量≥2时强制换行，单个变量时允许单行或多行格式。同时要确保Prettier不会与ESLint的规则冲突。

具体配置步骤 #

1. 调整ESLint的object-curly-newline规则

在你的ESLint配置文件（比如.eslintrc.json或.eslintrc.js）中添加以下规则：

{
  "rules": {
    "object-curly-newline": [
      "error",
      {
        "ExportNamedDeclaration": { 
          "multiline": true, 
          "minProperties": 2 
        },
        // 如果你不需要对导入声明做强制换行，可以设为off
        "ImportDeclaration": "off"
      }
    ]
  }
}

• minProperties: 2：当导出的变量数量≥2时，强制使用多行格式
• multiline: true：确保多行情况下的括号换行逻辑生效
• 单个导出变量时，ESLint不会强制要求换行，两种格式都符合规则

2. 兼容Prettier配置

因为你同时使用Prettier，要确保两者规则协同：

• 首先安装必要的依赖（如果还没装）：

  npm install eslint-config-prettier eslint-plugin-prettier --save-dev
  

• 在ESLint配置的extends中集成Prettier：

  {
    "extends": [
      "eslint:recommended",
      "plugin:prettier/recommended"
    ]
  }
  

这个配置会自动关闭所有与Prettier冲突的ESLint规则，同时把Prettier作为ESLint规则运行，确保eslint --fix能同时应用ESLint和Prettier的格式要求。

3. 可选：添加尾逗号规范（推荐）

如果希望多行导出自动添加尾逗号，可以配置comma-dangle规则：

{
  "rules": {
    "comma-dangle": ["error", "always-multiline"]
  }
}

这样格式化后的多行导出会自动在最后一个变量后加逗号，更符合现代JS规范。

效果测试 #

格式化前：

export { a, b, c, d }
export { a }

执行eslint --fix后：

export {
  a,
  b,
  c,
  d
}
export { a } // 单个导出保持单行，或手动改成多行也不会报错

内容的提问来源于stack exchange，提问作者Harri Virtanen