VSCode ESLint, Prettier & Airbnb Style Guide Setup 

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 🙏🙏🙏🙏🙏

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

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

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

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

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

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!

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.

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!

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

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

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

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

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

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!

Years I waited for this

Brad's tutoarial are really exceptionnal

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

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

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

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

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

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

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.

Thank you very much brad ❤❤❤.

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?

Great video & very informative demo. Thank you

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.

Thank you so much Brad..

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

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

Thanks guy. You are just great.

This is very good video. Thank you.

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

thank you SO MUCH!!!

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

Thanks Brad!

1 million subs coming soon!!

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

Thanks a lot Brad

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?

BRAD you are GREAT!

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?

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

And another great video 👍

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?

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

thank you like a lot!!

subbed! thanks!

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

Thanks a lot again.

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

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

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

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?

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?

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.

BEST OF THE BEST !!

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

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.

just brilliant

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.

Thanks!

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

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?

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

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.

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.

thank you

awesome man

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?

Which key you use for single quotes on mac?

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

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", }, }

good job!

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

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'

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.

how about in atom setup brad?

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

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

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

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

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

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

Make a video on the lodsh?

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?

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 ];

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

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

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.

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?

nice

Brad, Create course Electron please

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

how can i get autocomplete eslint value 12:32 ?

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

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

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

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