Webpack: [eslint config] stop outputting errors to console

Created on 29 Nov 2017  路  4Comments  路  Source: vuejs-templates/webpack

How to stop eslint outputting errors to browser console...

eslint output errors in cmd as well as browser console

outputting to the browser console is sometimes annoying

how to disable it

My try:

  1. added src folder to .eslintignore [stopped outputting in cmd but outputs errors in browser console]
  2. Tried to read the docs { It is time consuming and couldn't find proper solution]
question

Most helpful comment

oh sorry about that, didn't realize how out of date my project was :)

change clientLogLevel from warning to error in webpack.dev.conf.js. That should work.

clientLogLevel: 'error'

All 4 comments

This is something that's handled by the webpack-hot-middleware plugin.

I think the best you can do is edit line 3 of ./build/dev-client.js to add the quiet param to the require statement

var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true&quiet=true')

As per the plugin documentation
quiet - Set to true to disable all console logging.

However it will still display errors in the overlay, which is maybe good enough.


Alternatively, if you're in chrome, you can unselect "Info" in the filter levels

using: vuejs-templates/webpack v1.2.6

I couldn't find ./build/dev-client.js

my webpack.dev.conf.js

'use strict'
const utils = require('./utils')
const webpack = require('webpack')
const config = require('../config')
const merge = require('webpack-merge')
const baseWebpackConfig = require('./webpack.base.conf')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
const portfinder = require('portfinder')

const devWebpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })
  },
  // cheap-module-eval-source-map is faster for development
  devtool: config.dev.devtool,

  // these devServer options should be customized in /config/index.js
  devServer: {
    clientLogLevel: 'warning',
    historyApiFallback: true,
    hot: true,
    host: process.env.HOST ||聽config.dev.host,
    port: process.env.PORT ||聽config.dev.port,
    open: config.dev.autoOpenBrowser,
    overlay: config.dev.errorOverlay ? {
      warnings: false,
      errors: true,
    } : false,
    publicPath: config.dev.assetsPublicPath,
    proxy: config.dev.proxyTable,
    quiet: true, // necessary for FriendlyErrorsPlugin
    watchOptions: {
      poll: config.dev.poll,
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.ProvidePlugin({
      tins: 'tns'
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // new CopyWebpackPlugin([
    //   { from: 'node_modules/vue-material/dist/vue-material.min.css', to: 'static'},
    //   { from: 'node_modules/tiny-slider/dist/tiny-slider.css', to: 'static'}
    // ]),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    })
    // new HtmlWebpackIncludeAssetsPlugin({
    //   assets: [
    //     'static/vue-material.min.css',
    //     'static/tiny-slider.css',
    //     { path: 'https://fonts.googleapis.com/css?family=Material+Icons', type: 'css' }
    //   ],
    //   cssExtensions: [],
    //   jsExtensions: [],
    //   append: true,
    //   hash: true
    // })
  ]
})

module.exports = new Promise((resolve, reject) => {
  portfinder.basePort = process.env.PORT || config.dev.port
  portfinder.getPort((err, port) => {
    if (err) {
      reject(err)
    } else {
      // publish the new Port, necessary for e2e tests
      process.env.PORT = port
      // add port to devServer config
      devWebpackConfig.devServer.port = port

      // Add FriendlyErrorsPlugin
      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
        compilationSuccessInfo: {
          messages: [`Your application is running here: http://${config.dev.host}:${port}`],
        },
        onErrors: config.dev.notifyOnErrors
        ? utils.createNotifierCallback()
        : undefined
      }))

      resolve(devWebpackConfig)
    }
  })
})

Alternatively, if you're in chrome, you can unselect "Info" in the filter levels

I used this whenever i can but if have to inspect i have to switch back and forth info in filters [I totally disabled eslint using .eslintignore file, next time i may not install when vue init prompts eslint ]

I think the best you can do is edit line 3 of ./build/dev-client.js to add the quiet param to the require statement

Are you using latest version (beta) of this webpack template

oh sorry about that, didn't realize how out of date my project was :)

change clientLogLevel from warning to error in webpack.dev.conf.js. That should work.

clientLogLevel: 'error'

That's works great! now the warnings and info is not logged in the console.

Thanks !!!

Was this page helpful?
0 / 5 - 0 ratings