Vue-cli: vue cli eslint no-console error when no prod mode

[acgotaku]

Version

3.0.0-rc.3

Reproduction link

https://github.com/acgotaku/vue-cli-issue

Node and OS info

yarn 1.9.4 node 8.11.3 Archlinux

Steps to reproduce

First , clone repo and run yarn serve command to start project.
after, uncomment https://github.com/acgotaku/vue-cli-issue/blob/master/src/components/HelloWorld.vue#L35
console.log(msg) the terminal will output error: Unexpected console statement (no-console)

But if you stop yarn serve command and run again, the eslint error will disappear.

What is expected?

Only production mode output on console eslint error.

What is actually happening?

Add console.log to file will trigger eslint error.
But if you rerun the command,the eslint error will disappear.

[sodatea]

The error is shown because it is in the eslint:recommended ruleset & you imported it in your ESLint configuration
https://github.com/eslint/eslint/blob/a857cd914200c56203a40a42dfbd69d9fe8dc351/conf/eslint-recommended.js#L97

If you want to distinguish production env for ESLint rules, please choose "placing config in dedicated config files" as such rule is only possible in a .js config file:

'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',

[acgotaku]

@sodatea But in here https://github.com/vuejs/vue-cli/blob/83f5f4fced1c3f0bbf8a81ad140e2da958e3b783/packages/%40vue/cli-plugin-eslint/eslintOptions.js#L7
cli-plugin-eslint set the rule, why no effect?

[sodatea]

@acgotaku It's makeJSOnlyValue & your ESLint config lies in package.json 😅

[acgotaku]

@sodatea Thanks. But can you tell why rerun command the error disappear? If the rules form eslint:recommended, the error will output every times.

[sodatea]

That's weird.

I believe it's a bug in vue-loader used in combination with cache-loader.
Will open an issue in the upstream library once I figure out a minimum reproduction.

[zlzdp]

I have the same problem, (vue cli 3.0.4)
error: Unexpected console statement (no-console)
but, I did nothing, restart dev server, the error was removed.
sometimes, the error will output.

eslint config put in package.json is not good way.
I don't like it.
json file can't run js,
can't write comments.

package.json is just meta data of the package.
do not put eslint config, postcss config...

[jackieklaura]

Is this still unresolved. I have this issue and can't find a good workaround. Tried to set lintOnSave: 'error' in vue.config.js and the following in the eslintrc.js (and I tried the same thing with JSON format in eslintrc):

module.exports = {
  "extends": "eslint:recommended",
  "rules": {
    "no-console": "error",
  }
}

I thought this might force vue to inspect it. But inspection only happens on files that I actually change since the last npm run serve. So if it is cache related, is there a way (manually or in config) to clear the cache so that a npm run serve triggers recompilation and eslint checking of all files?

[mzoe1330]

Make this modification to your package.json file, under "eslintConfig":

...
    "rules": {
        "no-console": "off"
    },
...

You need to restart "npm run serve" in order for it to honor your new change.

[freedmand]

Lazy quickfix for those who don't want to tamper with anything: just use window.console.log

[jlshattuck]

Emphasizing @mzoe1330 last line...
"_You need to restart "npm run serve" in order for it to honor your new change._"

[leocadioalves]

Brilliant idea @mzoe1330 , I made your recommendation and it worked. Thanks.

[xerosanyam]

eslint recommends that we should ship without console statement.
What is the correct way to do this
I mean, in production I want to strip off console

[ejsmart111]

Lazy quickfix for those who don't want to tamper with anything: just use window.console.log

Works perfectly

[xerosanyam]

vue.config.js

const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: isProd ? [
        new TerserPlugin({
          terserOptions: {
            ecma: 6,
            compress: { drop_console: true },
            output: { comments: false, beautify: false }
          }
        })
      ] : []
    }
  }
}

[MarioK17]

// eslint-disable-next-line no-console
console.log()

[miloandco]

vue.config.js

const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
module.exports = {
  configureWebpack: {
    optimization: {
      minimize: true,
      minimizer: isProd ? [
        new TerserPlugin({
          terserOptions: {
            ecma: 6,
            compress: { drop_console: true },
            output: { comments: false, beautify: false }
          }
        })
      ] : []
    }
  }
}

Wonder why no one likes this one, as it's by far the best solution. All others are just ugly quickfixes.

[pnoeric]

Still having a problem with this!

The bug I'm seeing is that I get the "no-console" warnings the FIRST time I do yarn build and then the 2nd time (no restart, no change, just entering yarn build again) it works fine, no warnings. Odd!

Any ideas? Here's my files--

.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    extends: [
        'plugin:vue/essential',
        'eslint:recommended'
    ],
    parser: 'vue-eslint-parser',
    parserOptions: {
        parser: 'babel-eslint'
    },
    rules: {
        'no-console': process.env.VUE_APP_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.VUE_APP_ENV === 'production' ? 'error' : 'off'
    },
    overrides: [
        {
            files: [
                '**/__tests__/*.{j,t}s?(x)',
                '**/tests/unit/**/*.spec.{j,t}s?(x)'
            ],
            env: {
                jest: true
            }
        }
    ]
}

package.json

    ...
    ...
    ...
    "eslintConfig": {
        "rules": {
            "no-console": "off"
        }
    }

[jasonkarns]

@sodatea But in here https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/eslintOptions.js#L7
cli-plugin-eslint set the rule, why no effect?

@acgotaku can you edit your comment to provide a permalink? the link you provided is referencing HEAD which has evidently changed since you commented.

[acgotaku]

@sodatea But in here https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-plugin-eslint/eslintOptions.js#L7
cli-plugin-eslint set the rule, why no effect?

@acgotaku can you edit your comment to provide a permalink? the link you provided is referencing HEAD which has evidently changed since you commented.

Updated~