javascriptvuejs2eslintconsole.logvue-cli-3

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


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:

I tried commenting the previous line before console.log:

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!


Solution

  • 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
    }