How can I enable the console log in VUE-CLI during development

Question

I have been trying to figure out how to console.log('whatever') (while learning some Vue.js development) in my methods in order to understand some behaviour of whatever I am doing here.

I understand that there are some questions already asked here and have looked at the ESLINT documentation to try and figure this out... I just can't actually understand what I should do.

My code:

methods: {
    submitData() {
        this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json', this.user)
                  .then(response => {
                            console.log(response);
                        }, error => {
                            console.log(error)
                        })
    }
}

This is the error on ESLINT:

Failed to compile.

./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: Unexpected console statement (no-console) at src/App.vue:35:22:
  33 | this.$http.post('https://vue-testing-8a2de.firebaseio.com/data.json',this.user)
  34 |           .then(response => {
> 35 |                      console.log(response);
     |                      ^
  36 |                  }, error => {
  37 |                      console.log(error)
  38 |                  })


error: Unexpected console statement (no-console) at src/App.vue:37:22:
  35 |                      console.log(response);
  36 |                  }, error => {
> 37 |                      console.log(error)
     |                      ^
  38 |                  })
  39 |             }
  40 |         }


2 errors found.

I have looked at this website:

https://eslint.org/docs/rules/no-console

I tried commenting the previous line before console.log:

/*eslint no-console: "error"*/ (but it doesn't works well)

I need a step by step guide if I need to mess with JSON rules, as I have never done this before.

I am using vue-cli on WebStorm.

Thanks in advance!

based on this vue-cli github issue it's as simple as adding rules:{ "no-console": "off" } to the eslintConfig section of your package.json - there's more info in the issue linked to show how to strip console completely from production output — Jaromanda X
– Jaromanda X, Commented Dec 17, 2019 at 2:55

Jaromanda X · Accepted Answer · 2019-12-17 04:07:03Z

11

Edit package.json and in eslintConfig property add

"eslintConfig": { // don't add this, it's already there
    // there's stuff here
    "rules": { // find the rules property
    // addition starts here
        "no-console": "off"
    // addition ends here
    },
    // and keep what was already here

Now, if you want console.log stripped from production build

Edit vue.config.js

and add

// addition starts here
const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
// addition ends here

module.exports = {
    // addition starts here
    configureWebpack: {
        optimization: {
            minimize: true,
            minimizer: isProd ? [
                new TerserPlugin({
                    terserOptions: {
                        ecma: 6,
                        compress: { drop_console: true },
                        output: { comments: false, beautify: false }
                    }
                })
            ] : []
        }
    },
    // addition ends here
    // and keep what was already here
}

edited Dec 17, 2019 at 4:07

answered Dec 17, 2019 at 3:06

Jaromanda X

57.1k6 gold badges82 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arp Over a year ago

I have looked for the package.json file and I found the one located in the following path my-project/package.json. I have placed the code on the location you've specified and it still returns an error. I have improvised the json.file and the new ESLINT error on the folling FIDDLE jsfiddle.net/alioshr/72g0hpnm/3

Jaromanda X Over a year ago

you added just the THREE lines "rules": { "no-console": "off" }, ??? exactly within "eslintConfig": {???

Arp Over a year ago

please check the complete json.file on the fiddle I have just added above. I have copied the whole file into JS part in order to show that I have added the lines indeed. Could you please take a look whenever you can?

Jaromanda X Over a year ago

see how you have a second set of rules: {} ... sorry, my bad, didn't realies rules already existed in package.json

Arp Over a year ago

my bad that I was so dumb that I did not see it as well. I have just followed you answer again and now it worked just fine!

Ardalan Farkhondeh · Accepted Answer · 2020-04-12 19:36:04Z

0

1 Edit package.json

2 Then find "rules": {}

3 Change to this "rules":{"no-console":0}

4 if you Vue server in on, off it and run it again. Then the issue will be done

answered Apr 12, 2020 at 19:36

Ardalan Farkhondeh

763 bronze badges

Comments

p12s · Accepted Answer · 2022-02-14 13:53:36Z

-1

Just use console.table(value) or console.info(value) instead of console.log(value)

answered Feb 14, 2022 at 13:53

p12s

1

Collectives™ on Stack Overflow

How can I enable the console log in VUE-CLI during development

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related