Why I can't use debugger or console.log on my Vue app

Question

I just created a new Vue app through Vue CLI but I can't use either debugger or console.log otherwise I get an error in the browser, why and how can I allow it ?

Unexpected 'debugger' statement (no-debugger) at src/components/SomeComponent.vue:48:7

Answer 1

In my case it was because I went with the default configs when creating my project and it includes eslint:

So in order to allow debugger and console.log statements I modified the rules on my package.json file like this:

  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {
        "no-console": 1,
        "no-debugger": 1
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
  }

This way I still get a warning when compiling so I don't forget to remove them before committing but I can run my app and use those statements.