eslint与prettier

Question

eslint与prettier冲突问题

在package.json中保存运行无报错，但在其他vue页面运行会报错

 ERROR  Failed to compile with 1 error                                                                                                                                      15:45:25

[eslint] prettier.resolveConfig.sync is not a function
Occurred while linting C:\dp\vue-cs\src\App.vue:1

You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint] prettier.resolveConfig.sync is not a function
Occurred while linting C:\dp\vue-cs\src\App.vue:1

webpack compiled with 1 error

这是什么原因？

Answer 1

让阿豪来帮你解答，本回答参考chatgpt3.5编写提供，如果还有疑问可以评论或留言

这个错误是由于使用了eslint和prettier两个工具时，它们的规则产生了冲突导致的。具体来说，eslint是一个静态代码检查工具，可以对代码进行检查并指出潜在的问题，而prettier是一个代码格式化工具，可以自动格式化代码以符合一定的规范。在使用时，如果两个工具的规则有所重叠，就有可能产生冲突。 解决这个问题的方法有多种，其中一种是在项目中的.eslintrc.js文件中添加如下代码：

module.exports = {
  // ...
  extends: ["plugin:prettier/recommended"],
  rules: {
    // ...
    "prettier/prettier": ["error", {}, { usePrettierrc: true }],
  },
};

这样，就可以通过eslint来调用prettier进行代码格式化，避免了两个工具之间的冲突。 另外，如果在使用vue-loader时出现这个问题，还可以在webpack配置文件中添加如下代码：

module.exports = {
  // ...
  module: {
    // ...
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader",
        options: {
          // ...
          // 添加这个选项，将eslint和prettier集成起来
          eslintConfig: {
            extends: ["plugin:prettier/recommended"],
            rules: {
              "prettier/prettier": ["error", {}, { usePrettierrc: true }],
            },
          },
        },
        // ...
      },
      // ...
    ],
  },
  // ...
};

这样配置之后，就能够在vue组件中使用prettier来格式化代码，同时保留eslint的静态代码检查功能。 以上是两种解决eslint与prettier冲突问题的方法，根据具体的项目和工具配置情况，可能会有所不同。最终解决问题的关键是要理解两个工具之间的规则冲突，并寻找合适的方法解决。