Comments (48)
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.
from webpack.
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')
}
},
from webpack.
One quick way is to add a line of "**/*"
to .eslintignore. Which will ignore all files. Or "**/*.js"
and "**/*.vue"
.
from webpack.
-- So what do you do for living?
-- I count spaces, position parenthesis and check for trailing commas all day long
from webpack.
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!
from webpack.
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/
*
from webpack.
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...
from webpack.
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()
from webpack.
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
from webpack.
@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.
from webpack.
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/
}
],
from webpack.
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...
from webpack.
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.
from webpack.
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.
from webpack.
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.
from webpack.
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
from webpack.
@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.
from webpack.
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.
from webpack.
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.
from webpack.
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.
from webpack.
What is the big deal? Use if you want. Dont use if you don't want! Personally, I find it useful when team size is kind of more than 4 and each one working from different part of Globe.
from webpack.
@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!
from webpack.
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.
from webpack.
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
// }
// })
from webpack.
@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.
from webpack.
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"
}
},
from webpack.
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
from webpack.
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
from webpack.
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?
from webpack.
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?
from webpack.
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.
from webpack.
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?
from webpack.
No, not to my knowledge (I'm the main maintainer atm).
A bit more detail would be helpful. Could you open a fresh issue?
from webpack.
Here's a lame hack to eslint-plugin-vue that "skips over" coffeescript in *.vue files. This is clearly not a suggested approach, but perhaps we could eventually have a user configurable way to elide <script> tags with a lang such as "coffeescript".
https://github.com/vuejs/eslint-plugin-vue/pull/446/files
from webpack.
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.
from webpack.
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 }
from webpack.
Hi tried all of the above and it is still linting. Any other suggestions?
from webpack.
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.
from webpack.
One quick way is to add a line of
"**/*"
to .eslintignore. Which will ignore all files. Or"**/*.js"
and"**/*.vue"
.
Great ! That saved me.
from webpack.
@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.
from webpack.
thanks @EdwinBetanc0urt
the thing that this config is hidden when creating project by default is Fking horrible
f***
s***
from webpack.
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.
from webpack.
from webpack.
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.
from webpack.
from webpack.
.eslintignore
*
from webpack.
Many thanks to @jaxondu! Your comment with **/*
in .eslintignore
saved my life!
from webpack.
setting useEslint: false,
in config/index.js did the trick for me
from webpack.
Related Issues (20)
- I run this new project,but this show nothing in IE 11,can you solve the problem?
- r 403 forbidden
- Actually, you could overwrite `publicPath` in `ExtractTextPlugin` as you want. HOT 1
- HMR with express server with NodeJS API
- When load image via binding attribute, scss error occure.
- The vue project is configured with babel-polyfill but still displays a blank page in ie
- Updated Webpack 2 to 4 and faced issues while building for production
- webpack test fails because of import export error!!!
- Vuetify : "Expected newline." loading vuetify sass files HOT 1
- Laravel Vue templates won't update on shared hosting!
- npm err unexpected end of json input while parsing near '... RE----\r\n"}},"1.2.0' HOT 1
- how i solve this HOT 2
- Build error related to "@import" of styles HOT 1
- Can`t use prod.env.js variable in proxy config
- Error: Can't resolve '@fontawesone/fontawesone-free/css/all.css' in 'D:\xamppp\htdocs\laravel\laravel\VeuDemo\login1\login1\src\plugins'
- set default assetsPublicPath to './' instead of '/'
- npm ERR! Unexpected end of JSON input while parsing near '.../registry.npmjs.org/v'
- Using VueJs in .Net MVC. everything compiles fine but i am getting an empty view
- > > I run this is the console of my navigator (Chrome), and no error message anymore :
- how to fix npm run build blank display with vue-cli 3.2.45
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from webpack.