@@AndyNotSoSmart many thanks for the reply mate.. I just check and the spec says "Tell the command to automatically stage files that have been modified and deleted, but new files you have not told Git about are not affected." so it seems for new files, git add is a must.. I agree you, this tut was as good for git as eslint..
Also, ESLint can automatically fix a huge number of errors for '--fix' command. Example: npm run lint --fix. In this case, you do not need to change code by yourself.
@@kolyn669 I believe it might be, I've been following along but after creating config file, my VSCode didn't highlight any errors I specified in rules.
Love the video, thanks : What frustrates me more as each day passes on is that every single time, I start a project, even if its just doodling (if you know what I mean) I have to go through this same motion every single time. Buy the time I init everything for git, npm, eslint etc etc etc and everything in between that falls after. I dont want to code anymore, because I get so frustrated with having to do these same steps over and over just to code and play around with ideas that hour or day.... Im really starting to contemplate on setting a bunch of stuff as global.
If you divide your coding environments into dev, staging and production, you can apply different standards to each and make security, convenience, speed of development tradeoffs in each.
Nice. Just a point on presentation, would be helpful if your editor was full screen in order to better see the code. Probably for the visually impaired. Thanks.
What's the command for eslint to automatically fix the errors in your js file? So instead of having to manually fix the errors, run that eslint command that fixes those errors for you. That should be possible right?
I wish I could become a good coder but I have trash memory and all then commands are so hard to remember. But so far I have been working on editing some json files to add spells to CDDA.
Hey, I am getting TypeError: Failed to load plugin 'jest' declared in '.eslintrc': Class extends value undefined is not a constructor or null. Please help.
I love it. Tho I'd like to know if is there a way to config it as a built-in functionality on vscode? I wanna use it on all my projects but I don't actually like the idea of having it as a dev dependency.
You can install eslint globally on your machine, but you will still need to specify linting rules at the project level. So while that may work for you, it will fail for someone else who clones your project repo since they don't know eslint is a dependency. So in a collaborative environment, you are better off adding it as a dev dependency.
Thats where I am atm, I just installed it globally but I still have to point to it in a project level as you said. While I understand that its better to have as a dev dependency in a common project, theres a lot of projects I only do for practice and they are pretty damn small, most of the times I don't even have repos for them. But still, I wanted to have eslinting on these cases as well. I thought it would be possible to have a global .eslintrc file and as I had a more specific .eslintrc on the project tree it would just simply override the global one. But oh well, I think thats just not possible then. Thanks anyway!
Similar question here: is there any advantage to use the eslint plugin in vscode rather than a node package, if 1) you always use vscdoe as the ide 2) for personal project only?
Kai Xu I imagine it might be but not as much, unless you're creating repos for your personal projects. Then I'd rather use it on the package.json just so you can insure that anyone else that wants to debug or check your code would have the same enviropment you got. It also helps with code consistency. As using it on vscode though, keep in mind that (as far as I know) you'll still need a .eslintrc file on a project level, so it isn't that much of a deal anyway.
It makes sure eslint is installed when it gets pulled down onto a new computer or build server, otherwise it would need to be installed separately. That could lead to problems.
🎯 Key Takeaways for quick navigation: 00:31 🚧 *ESLint is like guardrails for your JavaScript code, ensuring it's healthy and error-free.* 01:13 🛠️ *Start a new project with `npm init` and make an initial commit to track progress.* 03:10 📦 *Install ESLint as a dev dependency with `npm install --save-dev eslint`.* 03:37 🔄 *Initialize ESLint with `eslint --init` and answer configuration questions.* 04:48 🔍 *Review ESLint's built-in recommended rules and customize based on project needs.* 06:13 🚫 *Use comments to disable specific ESLint rules, but consider explicit rule references for clarity.* 07:22 ⚙️ *Add a lint script to `package.json` for command-line linting using `npm run lint`.* 08:19 🌐 *Explore richer ESLint configurations online, like Airbnb's, but start with basic recommended files for a solid foundation.*
Hi, can you help me with a problem in ESLINT? When I activate 'formatOnSave' in VSCode and save my modifications, every time the editor removes the space before a parentheses in a function definition (or, precisely, at 'methods' and 'computeds' objects in VueJs) and I need this space to work with my Lint (Standard). Although I activate this feature in the EsLint configuration (User Configuration in VSCode) and on .eslint file, the result is the same. However if I use and arrow function like below, the doesn't complain: methods: { KissMe: () => { ... } } Do you know how to fix this issue?
You've got a conflicting setting... There may be syntax errors on the user setting or there might be workspace setting that are superior to user. You may also be using other extensions such as Prettier and it's linting on save... Nobody can say!
please can anybody suggest me how to install, initialize and use ESLint only, I am new to coding and this video just frustrates with things that I don't know but I must learn
It's ok if you just watch it but if you want to follow along with coding that is waaaay too fast. Constant pausing and rewinding is so distracting and frustrating that it actually makes the whole video pointless. IMHO, if you're supposed to teach someone something you shouldn't act as if it was some kind of race. There's no prize for whoever finishes their lesson first. After 3 min I decided to just watch it and watching without doing is not very helpful in learning.
Please find the ts code which is resulting in 24 problems and unable to solve it. ------------------------------------------------- async onmousemove(textToDisplay: string, elementToMouseHover: ElementFinder) { it('mouse hover on ' + textToDisplay, async () => { await browser.wait(ExpectedConditions.elementToBeClickable(elementToMouseHover)); await browser.driver.actions().mouseMove(elementToMouseHover).perform(); return; }); } ------------------------------------------------- ',' expected. Cannot find name 'async'. Expected 1-3 arguments, but got 6. Cannot find name 'textToDisplay'. 'string' only refers to a type, but is being used as a value here. Cannot find name 'elementToMouseHover'. Parameter '(Missing)' implicitly has an 'any' type. ------------------------------------------------- ------------------------------------------------- Please share your comments to resolve the errors.
Would prefer to see the windows full screen, rather than waste half the view with you waving your hands about in that annoying, distracting manner... You could learn a lot from Traversy Media in terms of presentation.
Ironic that I actually learned more about git commit workflow than ESLint on this tutorial. Thank you regardless!
git commit -am ... priceless... My favorite part of this video is the amen break intro music! For ESLint I use Atom and a linter package.
@@AndyNotSoSmart git commit -am didn't work here, he needed to execute git add . before that, you know why?
@@erenay40 maybe try caps -AM different consoles handle casing a little differently i have found.
@@AndyNotSoSmart many thanks for the reply mate.. I just check and the spec says "Tell the command to automatically stage files that have been modified and deleted, but new files you have not told Git about are not affected." so it seems for new files, git add is a must..
I agree you, this tut was as good for git as eslint..
@@erenay40 first commit?
Also, ESLint can automatically fix a huge number of errors for '--fix' command. Example: npm run lint --fix. In this case, you do not need to change code by yourself.
voice of a real developer 7:51
One of the best videos about eslint
I got a nice satisfying *that just clicked in my brain moment*, thanks!
vscode doesnot highlight any lint related warnings for me. why is that?
Thanks for the good quick introduction of eslint 🥂
great tutorial, quick and just to the point
Great explanation! Thank you for help with eslint basics!
vscode eslint extension is already installed here, right?
yeah.. do we still need to install it ?
i want to known too.
@@kolyn669 I believe it might be, I've been following along but after creating config file, my VSCode didn't highlight any errors I specified in rules.
The URL ends with 'es' nice'
Love the video, thanks :
What frustrates me more as each day passes on is that every single time, I start a project, even if its just doodling (if you know what I mean)
I have to go through this same motion every single time.
Buy the time I init everything for git, npm, eslint etc etc etc and everything in between that falls after.
I dont want to code anymore, because I get so frustrated with having to do these same steps over and over just to code and play around with ideas that hour or day....
Im really starting to contemplate on setting a bunch of stuff as global.
If you divide your coding environments into dev, staging and production, you can apply different standards to each and make security, convenience, speed of development tradeoffs in each.
why there isn't an extension for this already?
Good video, little hint here: you can just write down npm init -y and it will generate for you default package.json without answering questions
love the bangin' intro music
Gotta love the Amen ;)
Nice, clean, and to the point! Excellent intro tutorial!
Short, clear, super!!!😀
The integrated terminal is looking great. What configuration did you use to have those colors??
very clear demonstration, thanks
It would be interesting to know about your typing flow! Not only speed but shortcuts, layout, etc.
How did he make that for loop right away at 2:00?
super clean info, thanks!
Hi Harry, what is the theme that you are using for your vscode?
Nice explanation! Thank you
Thanks for that, helped me to a lot! ^^
Nice. Just a point on presentation, would be helpful if your editor was full screen in order to better see the code. Probably for the visually impaired. Thanks.
What's the command for eslint to automatically fix the errors in your js file? So instead of having to manually fix the errors, run that eslint command that fixes those errors for you. That should be possible right?
In this case, it is npm run lint --fix
I am wondering why all tutorials I watch don't work on my pc. I get always errors and I cannot proceed...
hi, how do people have the branch name they are on shown in the terminal like you do "git:(master)" is it a mac only thing or some external package?
thanks for the video but i guess its better to have vscode in fullscreen and minimize your camera stream
I'm new in js, node.js and vscode. For intellisense Currently starting with free tabnine. Which intellisense are you using in this tutorial?
I wish I could become a good coder but I have trash memory and all then commands are so hard to remember. But so far I have been working on editing some json files to add spells to CDDA.
How do you get your terminal to look that way?
Hey, I am getting TypeError: Failed to load plugin 'jest' declared in '.eslintrc': Class extends value undefined is not a constructor or null. Please help.
1:14 npm init -y instead
How did the for loop pop up so fast? What is the name of that sorcery ?
It is just shortcut in editor that you can set up your way.
Thanks man 👍
Very good! thanks
I love it. Tho I'd like to know if is there a way to config it as a built-in functionality on vscode? I wanna use it on all my projects but I don't actually like the idea of having it as a dev dependency.
You can install eslint globally on your machine, but you will still need to specify linting rules at the project level. So while that may work for you, it will fail for someone else who clones your project repo since they don't know eslint is a dependency. So in a collaborative environment, you are better off adding it as a dev dependency.
Thats where I am atm, I just installed it globally but I still have to point to it in a project level as you said. While I understand that its better to have as a dev dependency in a common project, theres a lot of projects I only do for practice and they are pretty damn small, most of the times I don't even have repos for them. But still, I wanted to have eslinting on these cases as well. I thought it would be possible to have a global .eslintrc file and as I had a more specific .eslintrc on the project tree it would just simply override the global one. But oh well, I think thats just not possible then. Thanks anyway!
Similar question here: is there any advantage to use the eslint plugin in vscode rather than a node package, if 1) you always use vscdoe as the ide 2) for personal project only?
Kai Xu I imagine it might be but not as much, unless you're creating repos for your personal projects. Then I'd rather use it on the package.json just so you can insure that anyone else that wants to debug or check your code would have the same enviropment you got. It also helps with code consistency. As using it on vscode though, keep in mind that (as far as I know) you'll still need a .eslintrc file on a project level, so it isn't that much of a deal anyway.
Do I need eslint if I'm already using tsserver (CoC)?
Amazing,very useful, thank you.Kindly make video for redux js.
that colors in the terminal. how can i get it?
Those color are from GitBash. You will need to connect Git Bash with vs Code terminal.
Great tutorial thanks
thats fast typing :)
Why did we add lint to scripts in package.json? How does it help?
It makes sure eslint is installed when it gets pulled down onto a new computer or build server, otherwise it would need to be installed separately. That could lead to problems.
🎯 Key Takeaways for quick navigation:
00:31 🚧 *ESLint is like guardrails for your JavaScript code, ensuring it's healthy and error-free.*
01:13 🛠️ *Start a new project with `npm init` and make an initial commit to track progress.*
03:10 📦 *Install ESLint as a dev dependency with `npm install --save-dev eslint`.*
03:37 🔄 *Initialize ESLint with `eslint --init` and answer configuration questions.*
04:48 🔍 *Review ESLint's built-in recommended rules and customize based on project needs.*
06:13 🚫 *Use comments to disable specific ESLint rules, but consider explicit rule references for clarity.*
07:22 ⚙️ *Add a lint script to `package.json` for command-line linting using `npm run lint`.*
08:19 🌐 *Explore richer ESLint configurations online, like Airbnb's, but start with basic recommended files for a solid foundation.*
Very useful video!
How can I use gst for git status?
What I have to do? its not working in my pc
I believe you can create aliases (or "shortcuts" )for CLI and then when you type gst (or whatever you created) it runs as git status.
Hi, can you help me with a problem in ESLINT?
When I activate 'formatOnSave' in VSCode and save my modifications, every time the editor removes the space before a parentheses in a function definition (or, precisely, at 'methods' and 'computeds' objects in VueJs) and I need this space to work with my Lint (Standard).
Although I activate this feature in the EsLint configuration (User Configuration in VSCode) and on .eslint file, the result is the same.
However if I use and arrow function like below, the doesn't complain:
methods: {
KissMe: () => { ... }
}
Do you know how to fix this issue?
You've got a conflicting setting... There may be syntax errors on the user setting or there might be workspace setting that are superior to user. You may also be using other extensions such as Prettier and it's linting on save...
Nobody can say!
cool breakbeat intro
What women say about me 1:04:
yes
yes
good
great
perfect
love it!
yes!
SwEet!
2:20 that's how computer respond to my code😣.
please can anybody suggest me how to install, initialize and use ESLint only, I am new to coding and this video just frustrates with things that I don't know but I must learn
You must to put on terminal npm install eslint -g or npm install eslint --save-dev. :)
Sorry for my english.
Thank's a lot!!
it's not working on sublime text, i's not highlighting anything
Use VSCode
manso aporte hermano mio!
very useful
Very nice
thanks
Thank you for ending with a semicolon.
haha
You da man
Jesus thank you 🙏
It's ok if you just watch it but if you want to follow along with coding that is waaaay too fast. Constant pausing and rewinding is so distracting and frustrating that it actually makes the whole video pointless. IMHO, if you're supposed to teach someone something you shouldn't act as if it was some kind of race. There's no prize for whoever finishes their lesson first. After 3 min I decided to just watch it and watching without doing is not very helpful in learning.
Please find the ts code which is resulting in 24 problems and unable to solve it.
-------------------------------------------------
async onmousemove(textToDisplay: string, elementToMouseHover: ElementFinder) {
it('mouse hover on ' + textToDisplay, async () => {
await browser.wait(ExpectedConditions.elementToBeClickable(elementToMouseHover));
await browser.driver.actions().mouseMove(elementToMouseHover).perform();
return;
});
}
-------------------------------------------------
',' expected.
Cannot find name 'async'.
Expected 1-3 arguments, but got 6.
Cannot find name 'textToDisplay'.
'string' only refers to a type, but is being used as a value here.
Cannot find name 'elementToMouseHover'.
Parameter '(Missing)' implicitly has an 'any' type.
-------------------------------------------------
-------------------------------------------------
Please share your comments to resolve the errors.
ew spaces... JK!
Thanks, but no thanks.
Would prefer to see the windows full screen, rather than waste half the view with you waving your hands about in that annoying, distracting manner... You could learn a lot from Traversy Media in terms of presentation.