如何解决Prettier与ESLint单双引号冲突及自动转换报错问题

问题根源 #

项目中Prettier规则要求使用双引号，但编辑器或格式化工具自动将双引号转为单引号，导致ESLint报错。由于项目没有单独的.eslintrc.js，配置可能存在于package.json、.prettierrc或编辑器设置中。

具体解决方案 #

• 检查并修改package.json中的配置
  打开项目根目录的package.json，查看是否存在eslintConfig或prettier字段：

  • 若有prettier字段，确保singleQuote设为false：

    "prettier": {
      "singleQuote": false
    }
    

  • 若在eslintConfig中配置了Prettier规则，调整规则要求双引号：

    "eslintConfig": {
      "rules": {
        "prettier/prettier": ["error", {"singleQuote": false}]
      }
    }
    

• 手动创建ESLint配置文件
  在项目根目录新建.eslintrc.js文件，写入以下适配Vue项目的配置：

  module.exports = {
    extends: [
      'plugin:vue/essential',
      'eslint:recommended',
      '@vue/prettier'
    ],
    rules: {
      'prettier/prettier': ['error', {
        singleQuote: false
      }]
    }
  }
  

• 修正编辑器的格式化设置
  以VS Code为例：

  • 打开设置（快捷键Ctrl+,），搜索prettier single quote，确保该选项未勾选；
  • 搜索editor default formatter，设置为esbenp.prettier-vscode，确保默认格式化工具为Prettier；
  • 若使用Vetur插件，找到Vetur > Format > Default Formatter: js，选择prettier避免规则冲突。

• 检查项目根目录的.prettierrc文件
  如果项目中有.prettierrc（或.prettierrc.json），打开并设置：

  {
    "singleQuote": false
  }
  

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