VSCode ESLint, Prettier & Airbnb Style Guide Setup
HTML-код
- Опубликовано: 10 сен 2024
- In this video we will setup linting with the Airbnb style guide for clean and consitent JavaScript code in VSCode
Commands & Config:
gist.github.co...
Sponsor: Freelancer Bundle (Use "brad25" for 25% off)
studywebdevelo...
💖 Become a Patron: Show support & get perks!
/ traversymedia
Website & Udemy Courses
www.traversymed...
Follow Traversy Media:
/ traversymedia
/ traversymedia
/ traversymedia
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
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
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
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
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!
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
before this video, i couldn't understand eslint at all, now it's clear, thanks for good explanation.
Man....I love the way you write code.... Very clean and logical
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!
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.
Brad's tutoarial are really exceptionnal
Brad YOU ARE THE BEST MAN ^^, Best wishes, all the way from Sudan ^^
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",
},
}
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!
Superb, just what I needed! Thank you for awesome content as always.
Using a .prettierrc is a must if you're working with a team in order to coordinate your settings.
Thanks brad for this amazing video, you significantly help me ♥
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
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 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)
Years I waited for this
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.
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'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.
Just what I was looking for. You’re a mind reader Brad! Awesome video as always
Great video & very informative demo. Thank you
Thanks, Brad! You are fire, as always! 👍
We need a SSR (NextJS) with React Hooks Course!!!
And another great video 👍
1 million subs coming soon!!
Thanks Brad. Would like to see React using CRA without ejected + eslint + prettier + airbnb
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?
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 Is Awesome, Everything With You Looks Easy I Mean Very Easy :)
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
Is it possible to have VS Code handle the linting and formatting instead of using config files?
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?
just brilliant
Thanks a lot again.
npm i -D eslint prettier eslint-plugin-prettier eslint-config-prettier eslint-plugin-node eslint-config-node
i ran above command but i got error below as follows.
gyp verb check python checking for Python executable "/node_modules/grpc/python2.x" in the PATH
gyp verb `which` failed Error: not found: /node_modules/grpc/python2.x.
please help me to solve above error.
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
so do you have to follow these steps on each project? or is there a way to have these be the global settings?
How we know when we save the code it is formatted as per Airbnb format ?
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 guy. You are just great.
Airbnb not installed,its shows error message (err undefined.)How can I solve this!!!!
Hey brad!! Two videos in a week 😎😎😎
Thank you very much brad ❤❤❤.
Can you help when Prettier isn’t working on save? I’ve checked it and made it my default formatter.
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
Do all of the settings remain globally or do they need to be copied for each project.
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?
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?
hie Brad, i have this error in my code "Parsing error: Unexpected token =>eslint" how can i get rid of it
This is very good video. Thank you.
can you remove "plugin:" from "plugin:node/recommended" in "extends" and move it to plugins or is that not the same?
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'
Thanks a lot Brad
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
];
Thank you so much Brad..
Oh boy. The lint tool is so buggy. ESLint triggers an error for using the `const` keyword. How else would I declare a constant?
Hi , my vscode not fix the code after save .. what can be the problem ?
Bred, when will you release the video about algorithms and data structure?
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!
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.
*HI Brad can you make more videos on advance parallax websites..thanks*
Do I have to install all npm packages in every project or just type eslint --init?
I like double quotes. Should i be using the airbnb style you mentioned? 🤔 Dunno if i can disable one thing
thank you
i am getting an error in installing airbone what to do ?
This doesn't work for me. I followed everything step by step but I get a permission error when installing eslint-config-node on rename syscall. I think that the fact that you started this tutorial with nodejs and npm already installed and vscode preconfigured renders it worthless for any people with future node versions.
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?
Do we need to both eslint and prettier installed on VS code or just config file is enough?
Hi.
Can help me to set a eslint to a NodeJS project with TypeScript and Koa please?
BRAD you are GREAT!
BEST OF THE BEST !!
thank you SO MUCH!!!
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?
Excellent vid! How do you guys put out so much good stuff :P
Hello, what should I do to use Eslint in any .js files in vs code?
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?
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?
So I should remove everything regarding eslint and prettier and start from scratch
1 view. 12 likes. Souds about right 😂
Haha
Do I need to install these packages in every single project I make?
Do we always have to run and install all these npm packages manually?
Hi Traversery,
I'm Hemanth Kumar.
npx install-peerdeps --dev eslint-config-airbnb
while running this command , I'm not getting any packages in my package.json file.
please help me to overcome this error.
Thank you.
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 we have to do this each time for new projects ?
Yeah
Is it important to let the rule that must use comma? (;) how do you feel about this?
Thanks!
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
thank you like a lot!!