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 🙏🙏🙏🙏🙏
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
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.
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!
An updated version of this would be welcome, the eslint-airbnb packages seem to have been unmaintained for a few years now, and eslint 9 with flat config is now the thing.
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!
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.
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.
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!
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)
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.
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.
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?
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?
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?
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?
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'
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?
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.
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
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.
you are a good teacher but I have a suggestion. You should highlight why u are installing so many dependencies rather than just installing them. So many dependencies, how is each unique?
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
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?
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.
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.
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.
I had this issue running eslint The eslint library loaded from /Users/development/ecommerce-project/e-commerce-front/node_modules/eslint/lib/api.js doesn't export a CLIEngine. You need at least eslint@1.0.0 any help :(
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
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 🙏🙏🙏🙏🙏
My supervisor asked me to learn ESlint for a project we are working on and you publish the tutorial. Thanks alot
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
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
This was explained so beautifully, I'm losing my mind!
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.
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
Brad, you're the man! I've been searching for this guide and couldn't find anything with good quality.
same
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
Will these commands install the Airbnb Guide locally of globally?
@@Lucas-md8gg I would like to know as well
@@kyusungpark8346 they will install locally
ty
Feeling so relieved each time I hit your « T » logo on the search engine! Thanks Brad!
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!
Man....I love the way you write code.... Very clean and logical
before this video, i couldn't understand eslint at all, now it's clear, thanks for good explanation.
An updated version of this would be welcome, the eslint-airbnb packages seem to have been unmaintained for a few years now, and eslint 9 with flat config is now the thing.
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!
Brad's tutoarial are really exceptionnal
Thanks brad for this amazing video, you significantly help me ♥
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.
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.
Just what I was looking for. You’re a mind reader Brad! Awesome video as always
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.
Using a .prettierrc is a must if you're working with a team in order to coordinate your settings.
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!
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.
Great video & very informative demo. Thank you
I had a question... Do I have to do this manually every time for another project, or can I change all these settings globally?
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)
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.
Years I waited for this
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.
And another great video 👍
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",
},
}
Brad Is Awesome, Everything With You Looks Easy I Mean Very Easy :)
We need a SSR (NextJS) with React Hooks Course!!!
Thanks, Brad! You are fire, as always! 👍
I like double quotes. Should i be using the airbnb style you mentioned? 🤔 Dunno if i can disable one thing
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?
did you manage to configure and get everything working?
Thanks Brad. Would like to see React using CRA without ejected + eslint + prettier + airbnb
Hey brad!! Two videos in a week 😎😎😎
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?
1 million subs coming soon!!
Excellent vid! How do you guys put out so much good stuff :P
so do you have to follow these steps on each project? or is there a way to have these be the global settings?
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?
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?
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?
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?
You can inherit node modules and just copy the json file with configuration
BEST OF THE BEST !!
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'
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?
This is very good video. Thank you.
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.
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
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
Thanks guy. You are just great.
1 view. 12 likes. Souds about right 😂
Haha
do we have to do this each time for new projects ?
Yeah
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.
Bred, when will you release the video about algorithms and data structure?
Is it important to let the rule that must use comma? (;) how do you feel about this?
just brilliant
you are a good teacher but I have a suggestion. You should highlight why u are installing so many dependencies rather than just installing them. So many dependencies, how is each unique?
Is it possible to have VS Code handle the linting and formatting instead of using config files?
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?
Thank you very much brad ❤❤❤.
Do I have to install all npm packages in every project or just type eslint --init?
Do all of the settings remain globally or do they need to be copied for each project.
Thanks a lot again.
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
Do we need to both eslint and prettier installed on VS code or just config file is enough?
I was asked to use airbnb style in a project didn't know what they were talking of with this video 👌👌😢🇳🇬🇳🇬
Brother mi, you sabi ooo.
See my people!!!😂😂😂
Una deh here. Think say no only me Waka come.
We dey here kanpe
My people 🇳🇬🇳🇬🇳🇬❤
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?
Thank you so much Brad..
Thanks a lot Brad
*HI Brad can you make more videos on advance parallax websites..thanks*
Thanks Brad!
can you remove "plugin:" from "plugin:node/recommended" in "extends" and move it to plugins or is that not the same?
Do we always have to run and install all these npm packages manually?
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.
Add nodejs folder to PATH will solve this problem
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.
Do I need to install these packages in every single project I make?
Can you help when Prettier isn’t working on save? I’ve checked it and made it my default formatter.
Hi.
Can help me to set a eslint to a NodeJS project with TypeScript and Koa please?
awesome man
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.
thank you SO MUCH!!!
How we know when we save the code it is formatted as per Airbnb format ?
subbed! thanks!
good job!
Hello, what should I do to use Eslint in any .js files in vs code?
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
G.O.A.T
Brad 😎♥️🤗😍🤗🤗🤗
Love 🇮🇳🇮🇳🇮🇳
Hi , my vscode not fix the code after save .. what can be the problem ?
I had this issue running eslint
The eslint library loaded from /Users/development/ecommerce-project/e-commerce-front/node_modules/eslint/lib/api.js doesn't export a CLIEngine. You need at least eslint@1.0.0
any help :(
So I should remove everything regarding eslint and prettier and start from scratch
Since eslint got installed locally one can do node_modules/.bin/eslint --init instead.
hie Brad, i have this error in my code "Parsing error: Unexpected token =>eslint" how can i get rid of it
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
Thanks!
thank you
Which key you use for single quotes on mac?