CODEWITHSUNDEEP
vue.jsvuejs2eslintvue-clivue-cli-3
code4jhon
code4jhon

Reputation: 6034

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

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

Upvotes: 3

Views: 10714

Answers (2)

M. Gara
M. Gara

Reputation: 1078

You can use:

//eslint-disable-next-line no-console

only if your really have to use console.log()

otherwise I highly recommend to use a logger like 'vuejs-logger'.

What happens is like in production you still have these console.log lines that I actually don't like a lot... plus the warning during rebuilding prevents you from using the hot reload of your app during development.

Upvotes: 1

code4jhon
code4jhon

Reputation: 6034

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

my project's plugins

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.

Upvotes: 7

Related Questions