Eslint/prettier errors prevent the app compilation

Steps to reproduce

I created a new project without touching any code using vue ui.

package.json:

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

Now I go to App.vue and I add some code which produces an eslint error, like:

  computed: {
    dummy() {
      console.log("hey") // => vue/return-in-computed-property Error
    }
  }

Describe the issue

The issue is, that those eslint errors prevent the compilation of the app and I need to fix them in order to be able to use the application.

Trying to change that behavior:

  • Create a vue.config.js file and add the following code:
module.exports = {
  chainWebpack: config => {
    config.module
      .rule("eslint")
      .use("eslint-loader")
      .loader("eslint-loader")
      .tap(options => ({
        ...options,
        emitWarning: true
      }));
  }
};

That works, you get the eslint error but the app is running

  • I was not sure if the above solution it’s the right thing to do. So I also found that by adding the following code to vue.config.js works too:
module.exports = {
  lintOnSave: true
};
  • So, Is any of the two solutions the right solution ? If so, which one ?

  • if the 2nd solution is correct, in docs says that lintOnSave is enabled by default.

    So how can adding lintOnSave: true in vue.config.js works when that is already enabled by
    default ?

  • Wouldn’t be better when creating a new vue app through GUI to get eslint errors without preventing the app compilation and to not have to deal with chaining webpack or other configs ?