Webpack: How to turn off ESLint?

[SystemZ]

Hello, I just need to sketch simple app, debugging style errors are more time consuming than I can afford.
Is there any switch to turn it off temporarily? It's nice feature but not when you have only few minutes to make something :)

[SystemZ]

Commenting out this block in build/webpack.base.conf.js seems to work. It there any other way?

preLoaders: [
      {
        test: /\.vue$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      },
      {
        test: /\.js$/,
        loader: 'eslint',
        include: projectRoot,
        exclude: /node_modules/
      }
    ],

[chrisvfritz]

@SystemZ That's what I would do. 🙂 We're planning on eventually making features such as linting optional when generating a new project, so that should help in the future!

[petervojtek]

in vue 2.8.1 there is no preLoaders section in build/webpack.base.conf.js, I had to remove this content to get rid of eslint terror:

      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: "pre",
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },

[eric-burel]

Shouldn't eslint linting on build be turned off by default ?
Not because it's a bad idea, but because eslint is still too buggy and hard to integrate to a text-editor, especially when working with other 3rd party solutions like Flow (some packages are not found etc.).

I don't want to be unable to launch the app in develop mode because my Atom linting package just updated with a minor bug and my code is indentend with 4 spaces instead of 2...

[sschadwick]

I don't want to be unable to launch the app in develop mode because my Atom linting package just updated with a minor bug and my code is indentend with 4 spaces instead of 2...

I second this. Would love to see more control over eslint. I hate when vue crashes in dev because I forgot a semicolon, however this would be acceptable (if not desired) behavior when building for production.

[YavorK]

This is how to stop it in current Nuxt.js. A bit offtopic but was searching and google and the only thing I found was this thread. Hope it helps someone other searching for the same.
see extend()

[veratechnz]

I trawled Google and eslint docs & established this eslint options setup. Place it in your .eslint.js file within the vue project root dir.

Man, that tab and space restriction is brutal.....

'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
"no-mixed-spaces-and-tabs": [0],
"no-tabs": 0,
"skipBlankLines": 0,
"ignoreComments": 0,
"no-trailing-spaces": [2, { "skipBlankLines": true }]

The Road To Customization:

1. List of eslint rules and how to turn them off:
Link Here
Using the link above to apply new settings on the _rootDir/.eslint.js_ file should meet most of your needs.

2. Single file comments inside your javascript syntax to modify eslint config/behaviour (Didn't try but was within the eslint docs and looks handy):
At the top of one of your js files place this comment to say........ turn of undefined variable linting:
/* eslint no-undef: 0 */
also a scoped format:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert */

This was sourced from: Link Here

3. Ignore files via eslintignore:
You can simply ignore entire files or dir's from linting. Not ideal on those late night benders ;)

build/*.js
config/*.js
build/*
// The line below means to include this one file in eslint from the above instruction to ignore the entire dir: 
!build/index.js

4. Possible helpful info at eslint
General Config Info
List of Rules

I am using es6 imports and have lots of variables and functions that are declared on one file then invoked on another. Was thinking of applying eslint to the bundled app.js file only, but didn't get that far. If anyone can help or has gone a similar route, would be great to hear from you.

[samayo]

ESLINT is the worst thing to have ever happened since WW2, I think there should be an option to wipe it out entirely. I spent more time counting spaces and tabs than coding. Peter's answer finally did the trick.

[Frondor]

Eslint is fine, what really sucks here is the dumbass who came out with all these stupid rules, like no spaces before function parenthesis and trailing comas EVERYWHERE. FFS!

[jaxondu]

One quick way is to add a line of "**/*" to .eslintignore. Which will ignore all files. Or "**/*.js" and "**/*.vue".

[snarlynarwhal]

If I wanted to use CoffeeScript for some .vue files and JavaScript in others, can I somehow keep ESLint on, but have it ignore templates that use CoffeeScript?

[FrancescoMussi]

-- So what do you do for living?
-- I count spaces, position parenthesis and check for trailing commas all day long

[gangsthub]

Please use ESLINT. Edit the rules if you please. It's totally configurable. I also don't like some of them. And as @jaxondu commented, .eslintignore is your friend in case you need to add some third-party script or exclude some files...

[SmashedBird]

@gangsthub ESLINT is totally useless; WAY TOO NITPEAKY. I spend my time adding spaces, making sure my lines are less than 100 characters long.... Removing it all together is the best thing to do.

[LinusBorg]

If you want it to be less nitpicky, create your own, smaller set of rules.

Writing code that doesnT follow a clear style is counterproductive in teams, it increases the cognitive load necessary to navigate other people's code.

If you work alone, that's not a big deal, but it's not good general advice

[veratechnz]

Totally agree @LinusBorg

Just make an effort to modify and then work with lint. I think the vue cli is a nice platform to work off.

[gangsthub]

Use ESLINT or use any other technique to format your code and keep it clean. But I disagree.

is totally useless

Sorry, sir, but, it ain't that way. ESLINT does its job. And you should keep your code clean. IMHO.

I agree with @LinusBorg.

[Frondor]

You can always use some Style CI services to format the code for you and your team. So you don't waste tons of time linting, when you should be spending every second on coding.

Don't go full fanboy mode, please. Evangelism is counterproductive.

[janzheng]

never used Vue before; using a tutorial but eslint crashes on <Template> which I assume is a basic Vue thing? Is it broken out of the box?

[LinusBorg]

No, not to my knowledge (I'm the main maintainer atm).

A bit more detail would be helpful. Could you open a fresh issue?

[janzheng]

Ok thanks @LinusBorg, I'll play with it a bit more.

Since I'm just learning Vue, I decided "turned off" ESLint temporarily by adding an exception rule * to the .eslintignore file — figured this would be simplest "non-destructive" way of temporarily deactivating ESLint — so the file now looks like:

~
/build/
/config/
/dist/
/*.js
/test/unit/coverage/
*
~

[gnulnx]

@janzheng Thank you!

I understand people wanting code to be formatted a certain way, but I'm kinda tired of 'others' alway's determining what that should be. My back end is in python and django and I'd like my JS formatted the same way as my python code as it's way less cognitive load to not see things formatted differently.

What I find strange is that I wasn't having any of these lint issues when I first started this project.. now today mysteriously every other line is barking about semicolons, or single quotes instead of double quotes or the number of spaces.. WTF? maddening to say the least. @janzheng method was exactly what I was looking for.

if I joined another team that had different styles I'd conform in a heartbeat, but on projects were it's just me I'd rather linting stay out of the way and let me write code how I want.

[PhilMDev]

When using the latest version of vue-cli it appears the easiest way to handle this is in config/index.js. You'll see the following:

// Use Eslint Loader?
// If true, your code will be linted during bundling and
// linting errors and warnings will be shown in the console.
useEslint: true,
// If true, eslint errors and warnings will also be shown in the error overlay
// in the browser.

Default is true. Just set to false. BTW, I also dislike ESLint.

[kyuubi09]

Also there's one more way.....you can add the files which give error in your .eslintignore file in the project.
Like for all .vue files just add /*.vue.

[paparyku]

my fix for the vue webpack

_webpack.base.conf.js_

comment out these lines
LINE 43: // ...(config.dev.useEslint ? [createLintingRule()] : []),

LINE (11 - 20):

// const createLintingRule = () => ({
//   test: /\.(js|vue)$/,
//   loader: 'eslint-loader',
//   enforce: 'pre',
//   include: [resolve('src'), resolve('test')],
//   options: {
//     formatter: require('eslint-friendly-formatter'),
//     emitWarning: !config.dev.showEslintErrorsInOverlay
//   }
// })

[RoelRoel]

How to turn all the errors into warnings? I too want to keep my code clean, but some rules are made up by rediculous authistics and make coding in dev mode very impoductive.

[chriskasza]

@RoelRoel you can override the severity of the rules in your .eslintrc.js file.

  rules: {
    'vue/max-attributes-per-line': 'warn'
  }

You just need to know the rule names you're overriding. If you're using the vue/essential style guide, the list of rules can be found here: https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/configs/essential.js.

[eovensehi]

If vue-cli was used to initiate the project, go to config/index.js and change an attribute in the dev object;
useEslint: false,
Or In build/webpack.base.conf change rules in the module to stop using the createLintingRule function.
rules: [ ...(config.dev.useEslint ? [] : []), /* ...(config.dev.useEslint ? [createLintingRule()] : []),*/ { test: /\.vue$/, loader: 'vue-loader', options: vueLoaderConfig }

[EdwinBetanc0urt]

your_project/config/index.js

change the value of useEslint from _true_ to _false_, from line 26, inside:

module.exports: {
    dev: {
        useEslint: false
    }
}

note: I use the vue webpack template, the version of the template is 1.3.1

[paulsimongb]

Hi tried all of the above and it is still linting. Any other suggestions?

[paulsimongb]

This finally seemed to do it
In .eslintrc.js at the top of the rules:{ section put in
'': 'off' ,
'*': 'off',

I won't be using esLint every. Its rules are in my view actually bad layout, and I don't have several days to spend changing the configuration.

[Arnoldmn]

I think eslint on it own has no issues but the rules are what turn people off as a vuejs dev we should just remove it completely from the boilerplate code Quick fix is inside
.eslintignore just add

• 
  At the bottom of the file

[xgqfrms]

ESLint exclude not work at all?

vue-cli

    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "exclude":[
            "./000-xyz/*"
        ],
        "extends": [
            "plugin:vue/essential",
            "eslint:recommended"
        ],
        "rules": {},
        "parserOptions": {
            "parser": "babel-eslint"
        }
    },

[GoodGameHUSC]

One quick way is to add a line of "**/*" to .eslintignore. Which will ignore all files. Or "**/*.js" and "**/*.vue".

Great ! That saved me.

[douglasg14b]

I don't want to disable eslint entirely, I just don't want it in the build output. It's damn near impossible to find a build error as the build output overflows most build logs. Especially vue ui...

Can I disable it for the build output only?

[ghost]

The easiest way to work around eslint is to use // eslint-disable-next-line to ignore the next line of your code and/or
use /* eslint-disable */ to ignore all warnings in a file.

🟢 Place the comment/s in the script section of your Vue component/s or any JS file/s where you do not want linting to occur.

📌 _The above special comments have been referenced from the hint provided by the Vue cli in the terminal. There is no need to touch any config file whatsoever._

I hope the above may help.

[douglasg14b]

@silent-human The issue isn't necessarily that eslint is on, it's that it clogs up the build log. Using ESLint in my editor or IDE is great, but having a tens of thousands of lines long build log full of ESLint warnings is a bloody chore.

[paulmil1]

thanks @EdwinBetanc0urt

the thing that this config is hidden when creating project by default is Fking horrible
f*
s*

[dxc-jbeck]

This worked for me, but the wording is bad. "lintOnSave" made me think when "I save" which doesn't clue me that it will work during build.

module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

Bottom of page:
https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint

[holywar20]

Most of these steps didn't work for me, though I was able to disable on a per file by using /* eslint-disable */ on the top of Javascript files.

If you have trouble like I did, you can destructively remove it by removing all references to ES-Lint from your package.json file, and then run npm i to update.

I liken using ESLint defaults to working with a germaphobe when your trying to build a floor. Sweeping the floor every 3 minutes is a unproductive when your busy cutting boards, and likewise, zealous linting in development is a barrier to productive workflow for a lot of people.

I see the value in linting, and may add it back later, but the config is a pain that seems to silently fail or ignore your rules alot of the time, and it's not worth it for prototypes.

[janzheng]

Yeah that's what I did, and when was wrapping up my prototype I turned the
linter back on and had about 1,500 errors! But by then the prototype was
functional and I knew what I was doing, so I'd spent some time to put
linting strategically back in place.

The way I set it up was through package.json where I can choose to run a
commit or build with or without linting, that way I have a little more
fine-grained control.

On Wed, Feb 26, 2020 at 12:15 AM Bryan Winter [e-mail]
wrote:

Most of these steps didn't work for me, though I was able to disable by
using /* eslint-disable */ on the top of Javascript files.

Ultimately I like ESLint in principle, but it seems like configuring it
right is really time consuming. So if you have trouble like I did, you can
destructively remove it by removing all references to ES-Lint from your
package.json file, and then run npm i to update.

I liken using ESLint defaults to working with a germaphobe when your
trying to build a floor. Sweeping the floor every 3 minutes is a
unproductive when your busy cutting boards, and likewise, zealous linting
in development is a barrier to productive workflow.

I see the value in linting, and may add it back later, but the config is a
pain and not worth it for prototypes.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/vuejs-templates/webpack/issues/73?email_source=notifications&email_token=AA5QO2FIU6F67HIS2MXG3TLREY6MLA5CNFSM4CAL7UY2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEM7UFII#issuecomment-591348385,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AA5QO2EARPNPOKG2POVT2JDREY6MLANCNFSM4CAL7UYQ
.

[jpeyret]

Well, this was a mess to turn off. The only thing that did was altering .eslintrc.js.

What did not do it was using .eslintignore files or setting useEslint: false, in config/index.js.

So... here's what I did:

log to file
npm run build | tee build.log

use ack, which is like grep to find what looks eslint errors (grep would do the same, really)
ack -i ':\d+\s+error\s+' build.log

then, taking the above again, progressively weed out recurring error types by adding them to a negative grep filter, after checking that I could live with that particular error type for a while.

ack -i ':\d+\s+error\s+' build.log | egrep -v 'prefer-const|quote-props|dot-notation|no-prototype-builtins|object-curly-newline|no-throw-literal

adjust .eslintrc.js with the above filter

````

• ,'prefer-const':0
• ,'quote-props':0
• ,'dot-notation':0
• ,'no-prototype-builtins':0
• ,'object-curly-newline':0
• ,'no-throw-literal':0
  ````

I gotta say, not really Vue's fault, but I am not impressed by eslint's insistence to throw hard errors, in a webpack context, on things that are style errors like missing newlines. Altering the files to add /* eslint-disable */ seems like a pain as well - with many files that's a lot of git diff churn to turn it off and on. All in all, a global webpack switch to turn eslint on/off for a build would be much appreciated.

[paulsimongb]

Hi

Personally I got so fed up with eslint, that I removed all files related to it, since even when you try turning if off you still get warnings. I know that it is very configurable but personally I consider its default layout rules to be bad practice.

Regards

Paul
From: jpeyret [e-mail]
Sent: 15 July 2020 22:58
To: vuejs-templates/webpack [e-mail]
Cc: PaulSimon [e-mail]; Comment [e-mail]
Subject: Re: [vuejs-templates/webpack] How to turn off ESLint? (#73)

Well, this was a mess to turn off. The only thing that did was altering .eslintrc.js.

What did not do it was using .eslintignore files or setting useEslint: false, in config/index.js.

So... here's what I did:

log to file
npm run build | tee build.log

use ack, which is like grep to find what looks eslint errors (grep would do the same, really)
ack -i ':\d+\s+error\s+' build.log

then, taking the above again, progressively weed out recurring error types by adding them to a negative grep filter, after checking that I could live with that particular error type for a while.

ack -i ':\d+\s+error\s+' build.log | egrep -v 'prefer-const|quote-props|dot-notation|no-prototype-builtins|object-curly-newline|no-throw-literal

adjust .eslintrc.js with the above filter

• ,'prefer-const':0

• ,'quote-props':0

• ,'dot-notation':0

• ,'no-prototype-builtins':0

• ,'object-curly-newline':0

• ,'no-throw-literal':0

I gotta say, not really Vue's fault, but I am not impressed by eslint's insistence to throw hard errors, in a webpack context, on things that are style errors like missing newlines. Altering the files to add /* eslint-disable */ seems like a pain as well - with many files that's a lot of git diff churn to turn it off and on. All in all, a global webpack switch to turn eslint on/off for a build would be much appreciated.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/vuejs-templates/webpack/issues/73#issuecomment-659035350, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AGHWSVVKKEAVA3GZNUGPIUTR3YRAHANCNFSM4CAL7UYQ.

[gregpalaci]

.eslintignore

*

[itinance]

Many thanks to @jaxondu! Your comment with **/* in .eslintignore saved my life!

[shallonkobusinge]

setting useEslint: false, in config/index.js did the trick for me