Vue + Eslint: lintOnSave=false not working, browser-overlay still interrupts development

Question

I updated my packages and now I get the browser-overlay on linting errors during development.

I had this problem with a Vue 2 setup some time ago, and now the same happens with Vue 3.

I would like to keep the warning/errors in the console, but the overlay disrupts my development, does anyone have an idea on how to solve this?

package.json

  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "env-cmd -f ../.env vue-cli-service serve --port 4022",
    "build": "env-cmd -f ../.env vue-cli-service build",
    "build-action": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@apollo/client": "^3.1.3",
    "@vue/cli": "^4.5.4",
    "core-js": "^3.6.5",
    "env-cmd": "^10.1.0",
    "graphql": "^15.3.0",
    "graphql-tag": "^2.11.0",
    "lodash": "^4.17.20",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0-rc.9",
    "vue-i18n": "^9.0.0-alpha.15",
    "vue-router": "^4.0.0-beta.7",
    "vuex": "^4.0.0-beta.4"
  },
  "devDependencies": {
    "@types/lodash": "^4.14.160",
    "@typescript-eslint/eslint-plugin": "^2.33.0",
    "@typescript-eslint/parser": "^2.33.0",
    "@vue/cli-plugin-babel": "^4.5.4",
    "@vue/cli-plugin-eslint": "^4.5.4",
    "@vue/cli-plugin-pwa": "^4.5.4",
    "@vue/cli-plugin-router": "^4.5.4",
    "@vue/cli-plugin-typescript": "^4.5.4",
    "@vue/cli-plugin-vuex": "^4.5.4",
    "@vue/cli-service": "^4.5.4",
    "@vue/compiler-sfc": "^3.0.0-rc.9",
    "@vue/eslint-config-airbnb": "^5.1.0",
    "@vue/eslint-config-typescript": "^5.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-vue": "^7.0.0-beta.2",
    "sass": "^1.26.10",
    "sass-loader": "^8.0.2",
    "typescript": "^3.9.7",
    "vue-cli-plugin-vue-next": "~0.1.3"
  }
}

vue.config.js

module.exports = {
  lintOnSave: false,
  // lintOnSave: process.env.NODE_ENV !== 'production',
  pwa: {
    workboxOptions: {
      skipWaiting: true,
    },
  },
};

eslintrc.js

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ['plugin:vue/vue3-recommended', '@vue/airbnb', '@vue/typescript/recommended'],
  parserOptions: {
    ecmaVersion: 2020,
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'import/extensions': [
      'error',
      'always',
      {
        ts: 'never',
        vue: 'never',
      },
    ],
  },
};

Does this answer your question? [How do you disable linting when using vue-cli serve?](https://stackoverflow.com/questions/50747360/how-do-you-disable-linting-when-using-vue-cli-serve) — soroush, Aug 28 '20 at 08:13
@soroush thanks for the suggestion, but I already tried the lintOnSave flag. — Kristof Komlossy, Aug 28 '20 at 09:03

score 0 · Answer 1 · answered Aug 28 '20 at 09:07

I found this: https://stackoverflow.com/a/41211721/4071305.

I added an empty typescript file and edited the include and exclude partsof my tsconfig.json like this:

"include": [
  "empty.ts",
],
"exclude": [
  "node_modules",
  "src/**/*.ts", 
  "src/**/*.vue",
  "tests/**/*.ts"
]

This hotfix works, but I hope the lintOnSave flag is gonna work when Vue 3 is officially released.

Vue + Eslint: lintOnSave=false not working, browser-overlay still interrupts development

1 Answers1