如何设置Prettier实现import导入语句的多行格式化

要实现导入语句保持多行拆分、不被Prettier自动合并为单行，可以通过以下配置实现：

原生Prettier配置 #

• 调整printWidth阈值
  printWidth是Prettier控制单行最大字符长度的核心配置，默认值为80。你可以根据需求调低该值，当单行导入的字符总长度超过你设置的阈值时，Prettier就会自动将导入内容拆分为多行。示例配置：

  // .prettierrc
  {
    "printWidth": 60
  }
  

• 配置尾逗号规则
  将trailingComma设置为all，只要你在最后一个导入项末尾添加尾逗号，Prettier就会默认保留多行导入的结构，不会强制合并为单行。示例配置：

  // .prettierrc
  {
    "trailingComma": "all"
  }
  

• 手动触发保留格式
  不需要修改配置的快速方案：在导入语句的左花括号{后手动输入一个换行，Prettier就会识别你的格式意图，保留多行拆分的结构，不会自动合并。

强制所有多命名导入自动换行的方案 #

Prettier原生目前没有提供直接强制所有多命名导入自动拆分为多行的独立配置，如果需要实现这个效果，可以配合ESLint规则实现：
在ESLint配置文件中添加object-curly-newline规则：

// .eslintrc
{
  "rules": {
    "object-curly-newline": ["error", {
      "ImportDeclaration": { "multiline": true, "minProperties": 2 }
    }]
  }
}

开启ESLint自动修复后，所有包含2个及以上命名导入的语句都会自动被拆分为多行，再经过Prettier格式化也不会被合并。

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