Improve Your Code With ESLint + VsCode + Airbnb Styleguide

In this video, we'll set up ESLint to improve our code quality and style. We'll integrate it with VSCode to make things super easy!
Find the notes here: www.notion.so/ESLint-Pluggabl...
If you're ready to launch your career as a software engineer, check out my job-guaranteed bootcamp with Springboard: springboard.com/workshops/sof...

[@Edward-zr4bg]

Colt: *recommends to not search lint on google images* Literally no one: Also Colt: *shows immediately images of disgusting lint*

[@MdShamimRahman]

I think he made a mistake.

[@ColtSteeleCode]

​@Eugene Avila​I'm really sorry if it upset you; i was just trying to have a bit of fun and didn't really consider that some viewers would have a tough time with it (especially if you were eating). None of my other videos contain disturbing imagery, I promise!

[@anuraghazra4772]

Yes that was sudden

[@Edward-zr4bg]

@@ColtSteeleCode I know man it was disgusting but funny as we still it didn't turn me away from your great tutorials and i hope it didn't turn anybody either.

[@hiryuimajin]

pew! im glad I was reading this comment, he was showing it while I was reading this thread. And can only see it on my peripheral

[@juliemorgan08]

YES!! Keep the technical videos coming! Love your teaching style! This video is awesome as are all of your videos!! ESLint is going to be a huge life savor...thanks again!

[@adammorait7429]

Very helpful, especially for newbies. It's a good thing to learn the best practices when you just begun. Thank you.

[@victorskydotdev]

I just love the way Colt teaches... Thank you, Colt!

[@cedericprivat]

I love videos on how to optimize code! Great one! Keep it up 💪🏼

[@ivanbazan8421]

I was having problems setting up this, and your video helped me a lot! Thanks!

[@suyesh]

Me: 'let me watch Colt steel's video while I eat this dumpling' That definitely didn't go well.

[@tehuster]

You are so talented in teaching stuff! Love your content. Tommorow I will be finishing your react video!

[@himbary]

Thanks for all your great videos colt ♡

[@benwen2602]

this is the best ESLInt introduction in KZbin!

[@BechGameplayTMHD]

Awesome video! More of these "optimize your code"-videos please!!

[@edcoughlan5742]

Great video! (I had a pretty vague idea what ESLint entailed till I watched your video.) Thanks!

[@KrishnaTandon]

I improved my algo and DS skills because of you. Thanks :)

[@nakulshyamkumar9122]

You're the best, Colt!

[@CastleShield]

Thanks this was very helpful.

[@hostname47]

very useful, I liked your style of teaching much simple and obvious. Thanks

[@_jormanespinoza]

Thanks! It was really helpful!

[@AmarKumar-lv1wu]

Simply Awsome man.Thanks

[@eh-lo2do]

No body does it better than you colt, gj brother

[@chukwuemekaorji9331]

Thank you so much Colt Steele this is amazing. Sorry I am curious about ESlint is it important and what advantages I do love to hear from you Thanks again

[@cowabungatv4159]

great video, thanks !

[@zbera97]

You are awesome. Thanks!

[@digigoliath]

Thanks for the video. Its a great way to ease into ESLint. Now I just need to erase the image from my mind!

[@yuhceeofficial]

Colt you're just so awesome! I configured eslint before without fully understanding it but now i do, thanks to you!

[@shashanksshetty9870]

Hey colt, it would be really great if you could cover up following topic. 1. Using Swagger in node application 2. Git hooks using husky 3. Sonarqube for code quality 4. Prettier, eslint, stylelint and other lint configuration. 5. React and Vue.js application with ESLint. 6. UI visual component creation using storybook or cosmos. Please keep doing more technical video.....also waiting for few crash course 😁😁😁

[@htetlynnhtun101]

Thanks you sir! Please make videos about data structure and algorithms in JS for newbies.

[@buddhahead8416]

Great vid

[@_rachid]

Thank you.

[@0559229136]

You are amazing bro

[@hillaryonyechekwa2169]

Colt you should do a tutorial on using the vscode debugger

[@PetervandenHeuvel81]

It might be interesting what your methods are on using it inside a simple project, and how you set it up quickly every time. Perhaps use a preconfigured git-repo?

[@theprakashkumar]

What next after your Udemy bootcamp? PLEASE MAKE VIDEO ON IT.

[@iantan3046]

Your video is awesome as always! Can you make a tutorial of data structure and algorithms?

[@dtellei]

He has a JS data structures and algorithms course for sale on Udemy.

[@aritralahiri8321]

Very Nice and Informative Colt please make a video on OOPs in JS if it's possible .Thanks a lot :).

[@karamfd]

You can use npx to configure eslint when it's installed locally, like this: npx eslint --init

[@S4LTYT]

how to install it ?

[@stephanvebrian8670]

@@S4LTYT npm i -D eslint would work

[@jellyfish1772]

Thanks sir

[@VinitNeogi]

Please make video for configuring Eslint with Prettier for Angular projects since Tslint is now deprecated.

[@mattiarasulo9934]

Ehi Colt! Just a collateral question. Is the Q&A section of the React Course on Udemy being handled somehow? I see many questions waiting for answers and I have a couple as well! :D Great course btw, I know I'm asking a lot for just $10 but still, I am accustomed to the incredible support in the WebDevBootcamp so.. Just asking! :)

[@RogerThat902]

Great as always. Would love to see you do an additional video w/ prettier also since I think "the cool kids" are now using ESLint for warnings and Prettier to actually make the changes. Thanks for all the great content :)

[@ColtSteeleCode]

Hi Tickled Elmo, it's definitely in the works! I originally had Prettier/Prettier Now in this video, but I've realized that most of my longer videos don't do very well on KZbin so I decided to make a separate Prettier video. Thanks for the nice comment!

[@victorvermeulen1746]

@@ColtSteeleCode So if I get it right, you use both at the same time? Thanks for your Udemy courses, following your React course now and I like it a lot!

[@marlynch]

Would love some elaboration as to why you prefer Airbnb's style guide over others. Many thanks for this, and all your other excellent videos! PS less belly button lint, please - some things you can't unsee!

[@ColtSteeleCode]

Hi Martin, I don't have a very satisfying answer. When I first started using ESLint, Airbnb had the most well-documented style guide. It also had 4 times the Github stars, so I figured it was more widely used. I also happen to like most of their style choices, though I'm not a fan of the trailing commas rule. Trailing commas bother me. But whatever style guide you use, I would treat it as a starting off point for you to tweak and turn rules on/off.

[@marlynch]

@@ColtSteeleCode Thanks Colt - appreciate the response. After posting my comment, I found this article with an explanation: medium.com/@uistephen/style-guides-for-linting-ecmascript-2015-eslint-common-google-airbnb-6c25fd3dff0. As you say, neither is perfect - I don't like the Airbnb's objection to concatenation - but the ability to tweak them is extremely helpful (and that article started me learning about JSDoc, which Google requires).

[@Luxcium]

I installed globally and locally plus the extension of my IDE (The beloved VSCODE) I am again commenting in the beginning watching 3:09 I hope 🤞 (maybe not in this video but in an other soon) that you will cover TypeScript (I am using TSLint and they are phasing out to use eslint and its so complicated for me)

[@MmMighel]

Very informative video, but I have a question: if I install ESLint through VSCode, do I still need to install and init it through npm? Or the same setup process happens when installing directly in VSCode? Thank you! :)

[@manudeepp5666]

Yes King

[@shubhamdogra6118]

Hey colt! Please make a video as a alternative for cloud 9 as it is going to shut down ....

[@MrAgent00i]

I get a parsing error: invalid ecmaVersion Any idea how to resolve this? Btw. I looooove your content, best teacher I know! Thanks a lot for your service!

[@piyushmajgawali1611]

great

[@adityashinde3864]

Please make JavaScript es 6 videos.

[@rojitrojit6576]

Hey colt, what do you design your thumbnails with?

[@kaiparado]

Probably with Canvas

[@lesterloutte2320]

@@kaiparado dont know why.. but your comment cracked me up.. hahaha

[@GiammaCarioca]

Nice icons! What extension are you using for them?

[@ColtSteeleCode]

Material UI Icons! Sometimes my icon theme switches for no reason when my computer restarts, so in some of my videos I also end up using Simple Icons without realizing it. Both are VSCode Extensions.

[@GiammaCarioca]

​@@ColtSteeleCode I have Material UI Icons installed so it must the the other one... thanks!

[@Hotatoes]

can you make avideo on BEM methodology or Atomic Desgine ??

[@glassofchampagne]

Hey Colt, thanks for your video, always 5 star content! I often find myself conflicted on whether I should continue using react or learn Angular as well (because developers who use Angular are high in demand). It seems a little too much for me to be a master of both. You have any advice on this? Thanks

[@ColtSteeleCode]

Hey! I would definitely recommend starting with one framework and really mastering it before you move on to another one. Most experienced developers are able to learn new frameworks relatively easily when needed, but it's much harder to do when you are starting out. Learn one as well as you can, and that will make it easier to learn another one down the line. Build a couple substantial projects in React first. Or switch to angular if you want, but then make sure you really commit to learning it for a couple months before learning something else. I wouldn't get too hung up on which one you learn, since both have a pretty equal market share these days. Where are you based and what kind of job are you looking for (in-person full-time, remote freelancer, etc.)?

[@glassofchampagne]

@@ColtSteeleCode Well I'm based in Europe - Malta and I recently got employed as a front end at a pretty good company, I'm a little nervous because I want to make sure I can do well at this new place :) Thanks for the reply and great advice Colt!

[@ColtSteeleCode]

@@glassofchampagne Do you know what stack the company uses? Most companies will give you time to learn their stack/technologies since it's unrealistic to expect someone to know everything they use before they arrive. Also, Malta is a beautiful place! Where in Malta are you?

[@glassofchampagne]

@@ColtSteeleCode They haven't specified what stack they use quite yet. Although they know that I primarily have experience with React. Haha, I'm glad you think Malta is beautiful! It's definitely a sunny place :) I live up north in Saint Paul's Bay. Have you been to Malta before?

[@alkaseemabubakar7948]

still waiting for your next video on es-lint rules

[@TheYusuf10]

Mr.Colt , Could you possibly share ur vscode settings.json file?

[@sandeep.ranjan_]

Make Something About microservices in nodejs or builtin proxy server and handling load balancing

[@pourya1991]

Can we use eslint with prettier Plugin or we have to disable prettier?

[@kaiparado]

Do you thing eslint auto fix can replace prettier ?

[@coskunuyar35]

with "./node_modules/.bin/eslint --init" if you encounter problem like : '.' is not recognized as an internal or external command, operable program or batch file. just do: -> npm -g i eslint-cli ->eslint --init ->eslint app.js

[@Luxcium]

Am I the only one who, to make disappear the squiggly line during development, I put my yet unused variable in an object I return if in a function or I put the keyword export if I am in a function

[@alessandrorevinciguerra8160]

Thanks very useful...( you haven't told us of the chicks!)

[@othman_]

I would suggest a topic describing the new terms we always hear like Firebase,AWS amplify,serversless and zero configuration deployments what this whole junk means ?

[@keemeshrampersad8859]

Colt: When will your next Udemy course be out?

[@piyushmajgawali1611]

😂

[@MrKaremnour]

what is "react-scripts": "3.0.1", for?

[@pranjalverma1348]

Sir, could you please provide me a coupon code for your course on udemy on web development. Please I really need that

[@eh-lo2do]

i'm struggling with sublime text 3, how to enable it by default

[@godwinebikwo6544]

Come to the light using Vs Code

[@daviesadedeji5344]

Hey Colt 👋 how is blue? 🐈

[@mohammedhafeez8003]

Haiii sir. What are u r upcoming udemy courses

[@marble_wraith]

Theres a disadvantage to using json for config. Comments cant be used as part of the standard.

[@mundoreal1536]

I think you should make a paid course helping us make airbnb like websites.

[@adityashinde910]

javascript DOM required to learn react.js.

[@alveek]

please explain async await promises fetch shit

[@wackyjoker7912]

0:37 thx for sharing that, My Day is ruined as much as you do xD

[@AwkworldStudios]

Gonna add my two cents about the technical vs non-technical vids with the caveat that everything I say is conjecture and based on my own anecdotal experience. It makes sense to me that a more general VS code video would do well because it covers such a broad range of potential developers: aspiring devs, junior devs, senior devs, javascript devs, python devs, php dev, etc. Also these videos are easy to consume, often they don't make you think too hard, and who doesn't like to do something simple that makes everything look better? Technical videos in my experience only get consumed on a need to know basis. Something like webpack only applies to a subset of web developers: the people who need to know about it because they are using it or plan to use it. Sure some people just want to get a primer to see what it's all about but I suspect that most people aren't stumbling on a series of videos about webpack and saying: "I wonder what this is, better sink a bunch of time into it and find out!" That being said, I think it's important to think about the kind of person who is watching these more technical videos. You were the first instructor online that I really clicked with, before I got my first dev job. I've purchased 5 of your udemy courses. In particular I remember I was working through Maximillian Schwarzmuller's React course when yours came out earlier this year and I dropped his course like a bad habit (even though I think it is a great course and very complimentary to yours in many ways) so that I could start working through yours. I'm willing to spend money on your content because when you explain things they click in my head and make me a better developer. So when you offer freebie technical content it keeps your name in my mind and I am more likely to buy from you in the future. I'll give you a prime example. I bought your JS data structures and algorithms course a while back (before I even needed it, because again, I trust your content and knew it would be valuable to me eventually) and just started working on it. At the same time I came across the website AlgoExpert which was great because it was like a combination of Code Wars, which I like, and in depth videos similar to yours. They are complimentary. But I'll tell you what. If you had a site similar to AlgoExpert I would have spent my money with you instead no questions asked. That is to say I would have purchased a more premium product on top of the JS algorithms course I already bought from you (or from udemy by you as it were). Anyway, that's a long way of saying that I think you're technical videos have a lot of value. And I suspect that many people who are serious about advancing their careers (like me) are willing to shell out for your stuff after they get a peak at how good you are at explaining things. Wait, is all this just a way of me asking you to make more premium products and not just strictly udemy courses? Idk it's probably better for my wallet if you still to udemy and youtube haha!

[@ColtSteeleCode]

Wow, thank you for taking the time to write all that up! I really appreciate it! I have plenty of "fun" technical content planned for KZbin because honestly, I enjoy creating those videos far more than the easier content that might reach a broader audience. I am indeed working on a new "premium" offering which will be a subscription service which costs about the same as a Udemy course each month. Right now I've completed all new courses on advanced ES2015/6/7, React Hooks, React Testing, Redux, Advanced Terminal/Unix Commands, and GraphQL. I've also already created the materials for courses on GraphQL, TypeScript, and Vue. Of course I'll post more information on my KZbin once I get closer to launching (most likely end of October). I wanted to make a platform where I could create and share courses quickly and regularly. Rather than spending 3 months making a 35 hour course, I can put out a new 10 hour course each month. I'm also working on some fun new features like coding competitions, code reviews, and mentorship opportunities. Since I cannot share this new platform via Udemy (they only let you email students about other Udemy courses), I'm hoping to grow my KZbin channel and use it to announce this new project. I may end up releasing a couple other "simple" youtube videos in hopes of reaching a wider audience, but most of what I post in the next few months will be technical content. I honestly hate the marketing side of what I do. It's one of the reasons I put my courses on Udemy in the beginning: they market it for me! Anyway, I'm working on a lot of exciting stuff, including a job-guaranteed online training that I'm very excited about. Thanks for taking the time to share your thoughts, it's really helpful for me to hear!

[@Shubham-b]

@@ColtSteeleCode Super excited for your premium offering colt. Please launch it asap! Also can you make project oriented courses that build a really big complex applications from scratch just like YelpCamp but bigger if possible.

[@ColtSteeleCode]

@@Shubham-b Working hard on it! And YES to the project courses! Right now I'm working on a couple project courses, though they likely won't be available at launch. They take forever to make since I first have to write all the code, refactor it, and then record. I'm very excited about those because it's content I've always wanted to create but it just doesn't work on Udemy. I'm working on a Trello clone and also a clone of a popular iphone app in React Native. Of course, they won't be as full-featured as the originals but I'm still very excited!

[@Shubham-b]

@@ColtSteeleCode Thanks for the reply Colt! Looking forward to it. Appreciate your hard work very much.

[@renovatiovr]

Or save all this time for development and use webstorm

[@boomerangfish3558]

dude im eating chips and drinking cola, but not anymore. thanks!

[@murat6018]

duuuudeee, why would you show us that belly button lint? WHY? WHYYYYYYYYYYY?????????? Anyway, apart from that evil, evil start, great video. I was hearing about ESLint but didn't know where to start. Thanks.

[@yuhceeofficial]

How are your little monsters doing though? 😁

[@songdexue1715]

why you show some strange image that makes me feel uncomfortable

[@lutfiandrii]

Don't we need 'prettier'?

[@sayansingha8474]

Why would you show that to us COLT??!!

[@labwax]

Why did you do that. :-(

[@griffadev]

Ruin your day with Airbnb lint rules

[@juliemorgan08]

YES!! Keep the technical videos coming! Love your teaching style! This video is awesome as are all of your videos!! ESLint is going to be a huge life savor...thanks again!