如何让Prettier保留多行import以规避ESLint max-len规则？

遇到这种Prettier合并导入语句导致违反ESLint长度规则的情况，你可以通过以下几种方式调整配置来解决：

1. 对齐Prettier与ESLint的长度限制 #

Prettier默认的printWidth是80字符，如果你的ESLintmax-len规则设置了更小的值（比如70），Prettier生成的单行导入就会超过ESLint的限制。解决方法是在Prettier配置文件（比如.prettierrc.json）中把printWidth设为和ESLintmax-len一致的值：

{
  "printWidth": 80 // 这里替换成你ESLint中max-len的数值
}

这样当导入语句长度超过限制时，Prettier会自动将其拆分为多行，既满足自己的格式化规则，也不会触发ESLint的max-len错误。

2. 让ESLint与Prettier协同工作（推荐） #

如果不想纠结于两边的数值对齐，更稳妥的方式是让ESLint直接采用Prettier的格式化规则，避免冲突。具体步骤：

• 先安装必要的依赖：

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

• 然后在你的ESLint配置文件（比如.eslintrc.json）中更新extends字段：

  {
    "extends": [
      // 保留你原有的其他extends项，比如"eslint:recommended"
      "plugin:prettier/recommended"
    ]
  }
  

这个配置会自动禁用ESLint中所有和Prettier冲突的规则，同时把Prettier的格式化结果作为ESLint的校验标准，这样就不会再出现格式不一致的报错了。

3. 强制Prettier保留手动换行的导入 #

如果你已经手动将导入拆分为多行，但Prettier总是自动合并，你可以在导入语句中添加一个注释（虽然有点hack，但有效），或者确保你的printWidth足够小，让Prettier认为该行需要换行。不过更规范的方式还是前面两种，尤其是第二种，能从根本上解决工具冲突问题。

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