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 🙏🙏🙏🙏🙏
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.
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
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.
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!
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.
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!
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.
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'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.
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)
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?
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.
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?
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
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?
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?
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.
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?
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?
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?
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.
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?
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 :(
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 ];
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
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
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’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?
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
Brad, you're the man! I've been searching for this guide and couldn't find anything with good quality.
same
This was explained so beautifully, I'm losing my mind!
Feeling so relieved each time I hit your « T » logo on the search engine! Thanks Brad!
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
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
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.
Man....I love the way you write code.... Very clean and logical
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!
Brad's tutoarial are really exceptionnal
before this video, i couldn't understand eslint at all, now it's clear, thanks for good explanation.
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?
@@meow-iskander I would like to know as well
@@kyusungpark8346 they will install locally
ty
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.
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!
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.
Thanks brad for this amazing video, you significantly help me ♥
Brad YOU ARE THE BEST MAN ^^, Best wishes, all the way from Sudan ^^
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.
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.
Superb, just what I needed! Thank you for awesome content as always.
Years I waited for this
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!
Just what I was looking for. You’re a mind reader Brad! Awesome video as always
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.
Great video & very informative demo. Thank you
Hey brad!! Two videos in a week 😎😎😎
Using a .prettierrc is a must if you're working with a team in order to coordinate your settings.
1 million subs coming soon!!
Thanks, Brad! You are fire, as always! 👍
Thanks Brad. Would like to see React using CRA without ejected + eslint + prettier + airbnb
Brad Is Awesome, Everything With You Looks Easy I Mean Very Easy :)
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)
And another great video 👍
We need a SSR (NextJS) with React Hooks Course!!!
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?
I like double quotes. Should i be using the airbnb style you mentioned? 🤔 Dunno if i can disable one thing
Bred, when will you release the video about algorithms and data structure?
so do you have to follow these steps on each project? or is there a way to have these be the global settings?
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",
},
}
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.
Is it possible to have VS Code handle the linting and formatting instead of using config files?
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?
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?
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 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?
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?
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 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 🇳🇬🇳🇬🇳🇬❤
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?
Excellent vid! How do you guys put out so much good stuff :P
Since eslint got installed locally one can do node_modules/.bin/eslint --init instead.
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.
*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.
Can you help when Prettier isn’t working on save? I’ve checked it and made it my default formatter.
How we know when we save the code it is formatted as per Airbnb format ?
Thanks guy. You are just 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?
do we have to do this each time for new projects ?
Yeah
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
can you remove "plugin:" from "plugin:node/recommended" in "extends" and move it to plugins or is that not the same?
Do I have to install all npm packages in every project or just type eslint --init?
Thank you very much brad ❤❤❤.
Is it important to let the rule that must use comma? (;) how do you feel about this?
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?
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
This is very good video. Thank you.
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?
BRAD you are GREAT!
how can i get autocomplete eslint value 12:32 ?
Hi , my vscode not fix the code after save .. what can be the problem ?
Hi.
Can help me to set a eslint to a NodeJS project with TypeScript and Koa please?
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 :(
Hello, what should I do to use Eslint in any .js files in vs code?
hie Brad, i have this error in my code "Parsing error: Unexpected token =>eslint" how can i get rid of it
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
];
Do we need to both eslint and prettier installed on VS code or just config file is enough?
Do we always have to run and install all these npm packages manually?
Do I need to install these packages in every single project I make?
i am getting an error in installing airbone what to do ?
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
Which key you use for single quotes on mac?
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
First one.. thank you brad for videos
Airbnb not installed,its shows error message (err undefined.)How can I solve this!!!!
Oh boy. The lint tool is so buggy. ESLint triggers an error for using the `const` keyword. How else would I declare a constant?
just brilliant
BEST OF THE BEST !!
Thank you so much Brad..
1 view. 12 likes. Souds about right 😂
Haha
Thanks a lot again.
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
Brad 😎♥️🤗😍🤗🤗🤗
Love 🇮🇳🇮🇳🇮🇳
Airbnb linter is too restrictive.. i cant even do a i++.. gotta change the rules
I hear you. It's not for everyone. Everyone has different preferences.. I don't even use linting in small projects
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 a lot Brad
This looks incredibly complicated for a simple linter
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?