VSCode ESLint, Prettier & Airbnb Style Guide Setup

In this video we will setup linting with the Airbnb style guide for clean and consitent JavaScript code in VSCode
Commands & Config:
gist.github.com/bradtraversy/...
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelopment.com/freel...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymedia.com
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia

[@shahab1]

WHO would have taught these things to an isolated self-taught programmer like me , in this subtly and thoroughly way, except you Brad? owe you a lot, thank you my man 🙏🙏🙏🙏🙏

[@SimPwear84]

A very talented teacher! Everytime I get lost or stuck, I always watch your videos. A lot of people make it harder than in needs to be. Thanx Brad

[@NoorMuhammad-dt7kf]

My supervisor asked me to learn ESlint for a project we are working on and you publish the tutorial. Thanks alot

[@sydrawat]

This was explained so beautifully, I'm losing my mind!

[@rosst8300]

Brad, you're the man! I've been searching for this guide and couldn't find anything with good quality.

[@foxjonesofficial]

same

[@busyrand]

This is Exactly what I need right now. Looking to switch to a new Development Machine and will be reconfiguring my entire setup. Thanks a million for this!

[@sobi1003]

instead of installing eslint globally to run `eslint --init` you one can just run `npx eslint --init` (assuming using npm version >= 5.20) which does the same using the project's locally installed eslint bin

[@welcometomycrucifixion9881]

before this video, i couldn't understand eslint at all, now it's clear, thanks for good explanation.

[@josephspinelli239]

Thanks a million for this video. I needed to set up the "prefer-arrow-callback" rule, but couldn't find the syntax for the rules section of the .eslintrc file. Simply outstanding!

[@MistaT44]

last year I thought this tutorial is not for me. Now when I'm exploring and need these things and look up for them, Brad has got a video for every thing u will need.

[@spacelover3536]

Hey brother I'm new with vs code and I'm struggling to set up it I'm still not comfortable with vs code plz suggest me vs code full tutorial vdeo

[@rachidgharib6661]

Man....I love the way you write code.... Very clean and logical

[@Mo-Osman]

Brad YOU ARE THE BEST MAN ^^, Best wishes, all the way from Sudan ^^

[@roman_mf]

Superb, just what I needed! Thank you for awesome content as always.

[@alecprologg]

Feeling so relieved each time I hit your « T » logo on the search engine! Thanks Brad!

[@fespamo]

Brad's tutoarial are really exceptionnal

[@UstadJi]

Brad Is Awesome, Everything With You Looks Easy I Mean Very Easy :)

[@Hacking-NASSA-with-HTML]

Thanks, Brad! You are fire, as always! 👍

[@MistaT44]

Just what I was looking for. You’re a mind reader Brad! Awesome video as always

[@BrendanMetcalfe]

Excellent vid! How do you guys put out so much good stuff :P

[@khalidelgazzar]

Great video & very informative demo. Thank you

[@2one2one2one]

if youre lazy (like you should): npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node npx install-peerdeps --dev eslint-config-airbnb

[@Lucas-md8gg]

Will these commands install the Airbnb Guide locally of globally?

[@kyusungpark8346]

@@Lucas-md8gg I would like to know as well

[@mohamedelidrissi2839]

@@kyusungpark8346 they will install locally

[@maplestoryinchinese]

ty

[@mohammdkarimi875]

Thanks brad for this amazing video, you significantly help me ♥

[@ViewtifulNAMinates]

Years I waited for this

[@oussamasethoum2755]

Thank you very much brad ❤❤❤.

[@dazecm]

Hey Brad. Thanks for this. It helped me get my dev environment set up with fewer pain points. At 12:44 you explain the 'newline-after-import' rule that you like. I can see that I get the linting to show up but is there a way to have either ESlint or Prettier auto-format the document to take care of this like it can with inserting semi-colons and other good formatting help on save? I suspect getting Prettier to do this is problematic considering it's so 'opinionated' and does not allow custom rules, so is there a way to tell Eslint to handle it using its formatting capabilities?

[@MisterNorthernCanuck]

I have no idea if you've done anything similar before, and if so I'd love a link :) If not then would you consider a tutorial on how to setup different environments for prod, dev, accept, etc. in an easy to follow way? Thank you sir!

[@koodauskanava9096]

This is very good video. Thank you.

[@sarahmattar]

YES YES YES!!! Prettier config and setup for VS Code and Sublime Text and ... well, any code editor is one of the most underexplained topics out there. There's literally one blog article I found on how to do it, and that was it. I had no idea AirBNB had become a thought leader on code formatting, the only thing I'd used in the past is the Enzyme library for writing user tests.

[@modupeadebayo755]

Hey brad!! Two videos in a week 😎😎😎

[@pythonolog8550]

Thank you so much Brad..

[@rsrini7]

Thanks Brad. Would like to see React using CRA without ejected + eslint + prettier + airbnb

[@thiagozanluca686]

Thanks guy. You are just great.

[@GauravSingh-st5sd]

1 million subs coming soon!!

[@bored833]

thank you SO MUCH!!!

[@AsToNlele]

Thanks Brad!

[@JoeWong81]

Thanks a lot Brad

[@exactzero]

The no console rule is very useful if you're on the browser environment. The many times I've left some console logs in production.

[@basakulcay9866]

This was. very helpful, thank you so much! One question though - do I need to follow these steps for every project individually or is there a way to run the same settings for every project I am working on once I run VSCode?

[@user-yd7db3wd7w]

You can inherit node modules and just copy the json file with configuration

[@perc-ai]

We need a SSR (NextJS) with React Hooks Course!!!

[@alokranjan476]

Thanks a lot again.

[@akshayawate7239]

BRAD you are GREAT!

[@RonWaller]

Thanks Brad, Curious the errors for empty line after a require statement and a space with comments. Those seem like styling errors that Prettier could/should fix. Can you set it up to fix those on save?

[@senthilkumar76]

Thanks for the great video..! Does this config works for typescript as well? If not can you please guide on the Airbnb config for typescript Thanks a lot

[@jaysonverana8839]

subbed! thanks!

[@rahalmehdiabdelaziz8121]

And another great video 👍

[@arseneeich5635]

just brilliant

[@kacem3167]

thank you like a lot!!

[@DennyTim403]

Bred, when will you release the video about algorithms and data structure?

[@jmmacatangay154]

do you need it to install inside a folder in which the project you are creating? or if you do this it will apply in all projects that you'll be doing?

[@RonWaller]

Is it possible to have VS Code handle the linting and formatting instead of using config files?

[@dharmang]

I like double quotes. Should i be using the airbnb style you mentioned? 🤔 Dunno if i can disable one thing

[@drewbird87]

Do all of the settings remain globally or do they need to be copied for each project.

[@novailoveyou]

Thanks!

[@steviegillen82]

Hi Brad. I am currently learning React with your Udemy course. I have seen Vite being used in place of CRA. Can this setup be applied to a project that has been created using Vite?

[@Tesla-kt5lo]

Thanks for the Awesome Tutorial! Beginner question: Should I config this one time for all my projects or I need to repeat the entire process for each project i am working on?

[@renovatiovr]

did you manage to configure and get everything working?

[@aliasalias510]

Wow just a week ago I had some problems, setting up exactly this kind of thing in VSCode and now there is a video of my favourite online tutor about it. Maybe I will start believing in god now.

[@roei133]

BEST OF THE BEST !!

[@danvilela]

Is it important to let the rule that must use comma? (;) how do you feel about this?

[@MikeyFEonline]

I'm getting an error when i'm adding the Airbnb, Eslint & Prettier setup to my Gatsby project. And it begins at the 1st line of my project; 'import React from "react"'. The error shows: 'import and export may appear only with 'sourcetype: module'. Can you help me out Brad or someone else?

[@DrazV2]

Recap, I still recommend you watch the video, it contains valuable information! 1. Install ESLint and Prettier VS Code extensions 2. npm init -y 3. npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node 4. npx install-peerdeps --dev eslint-config-airbnb 5. Create .prettierrc config file 6. node_modules/.bin/eslint --init, to create eslint config file 7. esit eslint config file, { "extends": ["airbnb, "prettier", "plugin:node/recommended"], "plugins": ["prettier"], "rules": { "prettier/prettier": "error", }, }

[@sergeytarasevich2285]

good job!

[@tamasmolnar4157]

Hi Brad, ESLint 9.0.0 is out (breaking changes). If you have time/will, please make a video on ESLint and Prettier in a node.js typescript project (e.g. Nest.js). It would be really appreciated. Thanks in advance.

[@TrueJournal]

I had a question... Do I have to do this manually every time for another project, or can I change all these settings globally?

[@gorgin_dev]

i think it's good way to keep configurations locally for every project. but to prevent waste of time you can copy .eslintrc.{json, js , ...} and paste to your new project. as well as there are many ready to use configuration available exits on then internet (for example airbnb has one of them)

[@willyhorizont8672]

thank you

[@designer6219]

Do we need to both eslint and prettier installed on VS code or just config file is enough?

[@terry.chootiyaa]

*HI Brad can you make more videos on advance parallax websites..thanks*

[@tony-k]

Thanks for the guide but why did you install ESLint for the second time (globally)? Just to be able to run 'eslint --init' and generate config file? You can generate it when you have local installation as well. Just run './node_modules/.bin/eslint --init'

[@ricardocnn]

Do I have to install all npm packages in every project or just type eslint --init?

[@allemeshov]

Hello, what should I do to use Eslint in any .js files in vs code?

[@sohaibali7678]

awesome man

[@Oswee]

What about making some CI/CD videos? OpenShift setup and management? Libvirt. Networking. Basically how to deploy all this fancy-shmancy prettified stuff we are learning there all the time.

[@alexmachin1785]

The video was great, Im just annoyed I needed to install a11y, react and react hooks plugins even though Im using the prettier config in a node enviroment grrr.

[@dan-carlton]

so do you have to follow these steps on each project? or is there a way to have these be the global settings?

[@squeezeb58]

How did you do that auto fill for app.listen When I enter ctrl + space, nothing comes up. no autofill. I even have the setting turned on for suggestions.

[@AnnaKobayasi]

I’m working on your Full Stack React series. I get all my HTML tags in different lines, even if it is in print width like 50words. It’s really hard to read. I did research for whole day but can’t find why. Anyone know?

[@TomGrubbe]

Using a .prettierrc is a must if you're working with a team in order to coordinate your settings.

[@TheNamesJT]

I'm getting an error. I did this 10:56 and nothing is showing up inside problems console and when i click eslint icon at the buttom right it says "Failed to load config "airbnb" to extend from location folder". Update: I figured it out it was because I installed the airbnb base and it has to extend airbnb-base inside the eslintrc. I'm also surprized you didn't mention eslintignore to ignore node and json paths. Anyways those were the only issues aside from this solid video.

[@Cmxmxmmx7]

Which key you use for single quotes on mac?

[@TutoDS2014]

Hi. Can help me to set a eslint to a NodeJS project with TypeScript and Koa please?

[@048593246]

Do we always have to run and install all these npm packages manually?

[@gcasanas1]

Since eslint got installed locally one can do node_modules/.bin/eslint --init instead.

[@toofanicoder]

Brad 😎♥️🤗😍🤗🤗🤗 Love 🇮🇳🇮🇳🇮🇳

[@infiltretor287]

Can you help when Prettier isn’t working on save? I’ve checked it and made it my default formatter.

[@xXDani6540Xx]

can you remove "plugin:" from "plugin:node/recommended" in "extends" and move it to plugins or is that not the same?

[@JobaerArman]

Thank you for your tutorial. But I'm still struggling to setup properly. Global eslint doesn't seem to work. Every project needs local eslint. I'm also trying to setup airbnb base config with prettier for my node-express project. Now prettier is linting the .eslintrc file and showing double quote warnings. Created an ignore file to solve that. Would you please confirm if this guide still works with the latest package versions? Thank you.

[@user-yd7db3wd7w]

I've spotted the same problem lmao. I set eslint globally with js modules and now it conflicts with my webpack configuration, eslint-disable doesn't help. Idk how I'm supposed to backup ahahhaha

[@spacelover3536]

Hey brother I'm new with vs code and I'm struggling to set up it I'm still not comfortable with vs code plz suggest me vs code full tutorial vdeo

[@pireus21]

I am a beginner on the field and what i cannot understand is if i have to do these steps all the time before starting a project or just once?

[@ESMugilan]

do we have to do this each time for new projects ?

[@robertoaleydon3044]

Yeah

[@kamranjaved5583]

Brad i like your courses very much ..... I m from india and i watch your video and fall love with your style.... Please brad can you make a course in udemy which contain react redux and admin dashboard..please or you may have a future plan to make such ..please tell me...no course is available like this.....i love to buy if you will make it

[@KeepItFresh02]

nice

[@PC-tk7uv]

how about in atom setup brad?

[@KleberJS]

Does anyone know how to disabled on Prettier the action about lines break in array and object? I want to keep this const: array = [1 ,2, 3]; but when I save I have: const array = [ 1, 2, 3 ];

[@bestchoice7431]

Can you please set up ESLint, Airbnb, and prettier in the MERN app? Because when I set up these on the backend, it doesn't work on the client site(react). How could I solve this issue?

[@newtontavengwa291]

hie Brad, i have this error in my code "Parsing error: Unexpected token =>eslint" how can i get rid of it

[@asc_near]

It's saying npm: command not found. I'm on a windows computer and i've installed node.js Any other video's i need to watch first or anything you can suggest? I went to the npm documentation but its still confusing me.

[@fringebravosky4426]

Add nodejs folder to PATH will solve this problem

[@josephelgazar4229]

1 view. 12 likes. Souds about right 😂

[@TraversyMedia]

Haha

[@iamvishu591]

Make a video on the lodsh?

[@epickelok]

Can everyone please explain to me what's the difference between extends and plugins in eslint?

[@modupeadebayo755]

I was asked to use airbnb style in a project didn't know what they were talking of with this video 👌👌😢🇳🇬🇳🇬

[@skipmonday6467]

Brother mi, you sabi ooo.

[@therustguy10]

See my people!!!😂😂😂

[@MultiSammy1010]

Una deh here. Think say no only me Waka come.

[@skipmonday6467]

We dey here kanpe

[@modupeadebayo755]

My people 🇳🇬🇳🇬🇳🇬❤

[@jaykumarpatel9854]

I am trying to create custom plugin and rules in eslint but its not giving any warning or error, .js rule file is correct but i thing i have some issues with package.json and .eslintrc file can some one suggest me what to do? Thanks

[@roei133]

Hi , my vscode not fix the code after save .. what can be the problem ?