ESLint with VSCode, Prettier, Husky and React For Beginners

hi everyone so if you've been actually struggling to configure eslint with pretty ear and husky on your react and tie skill projects well in this particular video we will go ahead and like go step by step to explain all the dependencies all you need to do what you need to install and how to configure and put all the files together in order to make sure that ease links works perfectly with pretty ear and haskey for pre-commits and get contribution all that stuff with react so you can just have it with react application and of course with typescript and your projects right over here so if you want to just go ahead and jump into the video quickly so i just wanted to know let you know that we're going to go into the details of how to set up es links with preacher and everything just to enforce a really like a specific code style and we're going to be using more particularly the airbnb's code style and make sure to enforce this on typescript reacts and with prettier so let's go ahead and jump right into it so we have a project in here set up using the create reacts up cli and this is just a basic project in here there isn't much of differences or any changes made yet uh just unless some dependencies installed in here so this project was created using the query react up using the npx query top then he did like we selected template of typescript and we just named this project and of course the installation was successfully installed all the packages and everything so you can just go ahead and get started with this so the reason i chose create react up over just going from a basic webpack thing is it's a lot easier i know a lot of people would be able to get access and create a project using query react app or willing to create use the query x hub other than just going to the webpack stuff so it's much much easier for you to follow guys with the video tutorial on this so first things first what we want to do is actually set up eos links so this is the most complicated part is actually setting up es lens because it has a lot of dependencies it has a lot of peer dependency so you need to make sure you are actually stretching it together in order to be able to use it properly with the create react up or with the react application going to be using so we're going to use the airbnb asset before we're going to be using the airbnb style guide and everything so we're going to be just go ahead and start just doing the configuration so if you go to the website of eslinting here you're going to be finding like how to initialize this so simply i'm going to use npm instead of yarn uh simply because i got the package.json in here and because npm is a lot easier compared to yarn for most of people like most variety of people would prefer npm okay so i can do npm init and it can do as lens config so by putting this command it will just you don't need to install anything just put that command straight through on your like in your terminal here and you will be to get in this so this is a cli we'll just ask you a couple questions for you to install um eslint and configure this so we get like check syntax only check syntax and find problems or check syntax fire problems and enforce account style and this is exactly what we want we want to enforce the airbnb's code style so click enter going to ask you a couple of more questions we're going to be using importing export because yeah we're going to use es6 we're not going to use es5 with required export so you can do that if you have like a node.js application but no we're using typescript and we are using react as well so i'm going to choose the first one and you say oh which framework you're using yeah i'm using react so go with that uh does your project have typescript yes we initialize our projects with typescript and it's creating there's a typescript config.json in here so i'm going to choose yes again and is this browser or node this is a browser make sure you choose note if you're a note but this is more like a browser kind of tutorial but they apply both the same rules actually um and here do you want to use a popular style guide or you don't exactly want to so i want to use a popular style guide and one of the most popular stuff for most popular code or style guides is the airbnb one you can you choose google's you can choose a standard one but airbnb is just crushing it in this particular field a lot of people enjoy using the airbnb eco styler following the guides in there and among them is actually me that's why i chose to go with airbnb and if we just go and take a look on airbnb's code like style guide in here it's it's actually available in github has like more than 120k stars which is um crazy right so if you take a look in here there's a couple of style guys inside of this there's the javascript one which we're seeing here which is like absolutely amazing it has a lot of stuff into it and there is the other stuff there is the reacts the es5 deprecated and much more so i'm going to be more interested into the react as well as that the javascript one so the reacts has different rules as well it has like how to put components house to uh which one to use like do you want to use the create class instead of like initializing class and yeti area so we want to follow this style again make sure if you want to follow a different style guide there's the google style guide there is different other style guides you can go ahead and choose that particular style guide to go and choose it but for us airbnb style guide is is literally the best one so i'm gonna go ahead and follow this and it works really well with react as well so i'm gonna click enter and it's gonna ask me how you want to put the config and this will just basically create the eslint rc config for you and in my opinion the best way is just to follow the json one you can do javascript if you want to like do manipulation but i don't really advise you yamo yes a pretty good one as well but we're more familiar with json so i'm going to go with json and here it's going to like install pure dependencies it's going to check well like is is the pure differences installed everything and it's going to ask you this is what's going to be installed clearly there is uh plug-in react there's the typescript es lanes plug-in reacts the plug-in reactive hooks there's the airbnb config plenty plenty more and it's installing this exact version this is curious in here so make sure it's actually installing the exact versions and this will this will basically install the versions that work with your eslint and with your query act up and everything so we do like to continue of course yes click enter and this will start the installation for us and you don't have to go ahead and worry about the dependencies and this is what i really really like about this cli it actually kind of configures everything in just like a seconds and it puts all the dependencies together now if you go and check out the package.json you're going to find a lot of dependencies installed for you but this is actually a good thing so there is the airbnb there is the typescript eslint parser eslint plug-in um there is the eslimp plug-in react hooks there is plenty plenty more so this one is absolutely amazing so there is a single dependencies that is missing and this is particularly useful for the typescript project since integrates like the airbnb plus typescript and it gives you the eslint config so make sure just to install es lanes config airbnb types created make sure to save it as dev just to be you know like a dev dependency whatever and this should be installed and you should be all good to go all right that's pretty sweet pretty good now let's go ahead and see our magical file and this is the most important part of all the eslanes is actually the config file of the slang so if you want to check the truth for es links or anything the configuration is where you need to go ahead and check out all the rules or the plugins or the extended you know like configuration and yeti area so this is this is actually the truth and this is the first place now to get started first things first what i usually do with any config or any eslint config is to go ahead and initialize this to be um to use js so make sure just to include just in here to be true because most of us in korea react up as well uses just for testing so make sure to add that to the environments so it would know that well we're using this okay the next very much important option is the extends so this one actually extends this current configuration from a different configuration and this is exactly what's happening here it's extending from airbnb's um you know code style or reacts and javascript configuration but this is not the best way to approach it especially since we're using typescript in here plus react and everything so there is a little bit better way to do this so completely go ahead and discard all of those and start from the beginning and i'm going to put like react up so there's a config for the react up itself uh there is a config as well for the react up forward slash just to be used as well with with es lanes um there is the airbnb one so put the airbn b1 and there is the airbnb typescript one so you can just do like airbnb for a slash typescript you add that as well and there is actually some like recommendations so there is prettier and all that sort of stuff we have an install approach here anyway there's also the plugin of so i'm doing plug-in time scripts import and this is as well as a very very important one or i guess it's um it's important then for slash typescript sorry and uh yeah so i guess this is this is the most one and there's the preaching one i'm gonna be getting into this a little bit later on but this is what the configuration that needs to extend this is actually the best one so this will use airbnb and as well as it's gonna use the react application or react up the query x application uh you know basic configuration in here from eslant to make it all works and as well as going to use the typescript imports to make sure that it imports the typescript stuff as well so this will work absolutely fine and also make sure to specify the project's property in here so just add a project and you know just give you the projects like the ts configuration or the typescript configuration file path which is the ts config.json so make sure to specify this in order to make sure that it works perfectly well while like transpiling and compiling typescript all right pretty sweet now let's jump into the package.json and we need to add another script that is going to run the eslanes linker so i'm going to do here i'm going to add a script name it lanes and this will whenever we call this it's going to lead us the es lanes and i'm going to call eslins and we're going to give it dots that means a use whatever configuration that is in the current root directory so it's going to look for instant rc.json it's going to go ahead and link for us and there is another really awesome command from the east lanes it's actually a fix so eastern actually can give you errors and can fix some of the errors so it's not all of the years but it can actually fix some of the areas that are fixable maybe like double quotes to single quotes or something like that so for this to basically work you can you can just go ahead and do like lens maybe do fix and do eslin dash dash fix and make sure to provide the dot at the end in order to know the current coffee file all right pretty sweet now if we're going to open up the terminal real quick we're going to see like how to run asleep so if i do npm run lanes this will go ahead and run islands screws in here and this will start the leaning just go ahead and ignore this warning if you're using typescript like me but there you go we got a couple of errors already with the current code base from reacts because we actually included or extended a different kind of approaches or different code styles especially the airbnb is one so it's actually giving us a couple of errors as well in here and if you try to go and take a look actually on these errors for example there is the app.t type script in here so this one it tells us that oh line 11 column 16 you've got a code must be placed in a new line and this is the rule that has been applied so it actually gives you like a really awesome simple handy message uh it gives you like it's an error not it gives you the location of the line of code that is defected and it actually gives you like the rule so as we all know eslint has these particular rules every single rule has something like this it uses this particular syntax like for example tells react javascript or whatever then a forward slash then the actual rule name so for example this one is gsx one expression per line so there is only or there should only be a single expression per line when it comes to gsx and this is a very bad one exclusive here because they have been multiple expressions per nine so what we can do is actually just go ahead and make make this um go to like one line and this can go to the other lines like simply like this and if you go ahead and like clear and run the linter again this arrow should be gone so hopefully i'm not exactly sure but there you go so yeah strings must must use single quotes exclusive here so this is uh from airbnbs so it tells us oh strings must use single quotes so let's say maybe we don't like we to use single quotes right so maybe this is it's not going to be working right for our projects or for our case or just like we don't like it so let's say how how do we override this rule because this rule is actually made from airbnb's code style and how how do we override this so simply just go ahead and put rules against this and you would just like override whatever you've got rules so inside of these objects inside of the eslint rc json you put exactly what rules you want so whatever the rule you want to put in here is actually going to take effects proceeding the other one so it's going to like override any rule that you're currently extending or any plugin or whatever is going to like whatever rule you're going to put in here so for example i want to check out the rules of like the quotes so this is the actual syntax of rules so for example you put quotes uh you you tell it like oh like you want this to err or something like this if it finds it or maybe you want this to be warning only or you want this to be off like if it does find double quotes or single quotes you want it oh completely off so for me i want this to be error and it's it's actually always to have it here because this is how you imply or how you force an actual code style right and here for example you want double quotes so for quotes i want this to error if it doesn't a double or doesn't find a double quotes if it does find a double codes that's good uh avoid escaping here just like you know like when you have a single a new line so it's it's completely not mandatory and also we need to override this because now we're using typescale as well so we need to override this both on the actual es lanes for javascript and for typescript as well so basically copy paste in this one doing the same so this rule will overwrite any other rule we've got already now if i jump back in here i clear the console and or clear the terminal and go ahead and run linting again this should give us actually a pretty good uh output it won't complain about single rows but it will complain about double quotes as curious in here because it says oh timescale instance quote area strings must use double quotes in in this particular location so for this one it's actually all of them or most of them actually they are used in single quotes and this is a very very bad approach most of them are double quotes double quote double quotes and there is an expected line price in here now the other feature that we can really use from eslint is actually fixing errors that are easily fixable by the esl and cli or by the instance parser so for example it's clearly there's 29 problems most of them are 29 errors and zero warnings and there are 29 errors and zero warnings potentially fixable with the fix option okay so if you run eslints dash dash fix which we already had putting inside of our package.json we can easily fix those and most of these double quotes are fixable which makes our lives a lot easier so if you've got this huge code base and you want to quickly fix some like double quotes some like line breaks some like objects something small and simple you can easily go ahead and do it so let's gonna try to do this i'm gonna do npm run lens and fix so we already put up black app you know a script for it so this should go into links and put the fix for it it's crazy it's done in here in just a couple of seconds and if you notice that the phone has changed so from single quotes to double quotes hallelujah that's pretty nice check out the other one yes that's a single quote a double quotes and yeti ariana so this is actually pretty good now if we do npm run links again to go and check if actually we still have got any errors or whatever so boom we got no errors and it's done and we got linkedin works so it finds absolutely no errors in our code base that's absolutely amazing and easton can actually help you a lot to fix a larger code base now let's say somebody on the team or you decided to make some changes on the code and of course you already set up aslant and you know you've got this code style first and all that kind of stuff in place so for example this is it this is actually a simple table using the react table so it renders a table and everything and he has quite some code right he has a lot of stuff he has the functions he has used effects he has uh gsx and all of those are included in the code south airbnb and like the recommended stuff from react and typescript so what we want to do in here for example this one has a defect so it's a quite small issue and if i quickly can find that what is that um it should be it should be an error function so it should be um so this is actually a table ah there you go so it's an edible editable style sorry and this one for actual best practice from airbnb side this should be a function so always any component any react component that you define should be defined as a function or a class you don't need or you must not use a like an error function in here because it just like it's very bad in naming and it's like it references with different variables so it doesn't look like a component anymore so for example take a look on airbnb's in here this is a style guide from react and it's curious in here there's this approach bad for class like that does only single rendering so if it doesn't use other stuff or whatever and here as well this is bad relying on function name interference is discouraged so for this one particularly what we like we don't need to use any components or names in like an error function so the best way is to approach this using a function and that's exactly what happened with us now if we try to go and do linkedin or the other way around is actually to go ahead and do yarn or sorry npm run start this will start the actual server and it will start like the compilation server and the development server of the create reacts up so it will do is slinting and this is the actual really awesome part with re create react up it actually puts eslint in and he puts it into the play screw city we got a bunch of errors already some of them like our warnings for like prop spreading is forbidden everything but some of others are exclusive our errors and it says like what is where is that so we're gonna find this so exclusively function components is not a function it is not a function declaration is from react's function component definition so this is the rule that defines this and we should change this now if i go here and go and just like quickly change this to a function so you remove the error function remove the area at the top right there like just make this look better ctrl s save it again execute this in here boom it's gone and we got way much better thinking here going on for the basic part in here and before jumping to prettier i just want to know you like let you know that i've got some rules already set up in here just to override the overall rules for example there is this react in gsx scope and this rule is pretty good to put it off because in react 17 you don't need to import react anymore because it's actually in in the global scope by the react engine so it's actually pretty good a couple of more in here just to make it good for example the no shadow in here i made it off and the gsx props no spreading which we just saw is a warning instead of an error because i want this just to be a warning i don't want this just to bug me or every single time i have it all right now let's go ahead and add prettier to our projects in order to make sure that eslints works with prettier the correct way as well as we're going to add our custom configuration file for how to use protruder and we're going to install preview extension in vs code so whenever we do like control as for saving it will automatically or magically like save the file and it will just like format it the correct way to work with eslint and to follow some of like the guidelines or the code styles that we perfectly want to be applied to our files or our code base so simply go ahead and just go and install npm pre to your eslints config printer and eslint plug-in preacher and the printer itself in here make sure to save them as a dependency or as a dev dependency sorry and this should install everything that you need in order to make sure that es lanes works perfectly with preacher and that also that esl knows that there is prettier so it would it would basically like just tell you oh if you've got this configuration from preacher i'm going to completely ignore it because appreciate is already there it knows what it's doing so i'm not going to be like bugging you about this particular stuff because you've already got a specific configuration for first year and that you know what you're doing all right so the first thing we need to do is actually jump to the insulin rc the config of eslins and make sure to add pre-tier here so just plug in pre to your recommended and this will actually apply or extend the recommended rules from butchery and apply them to the es lanes so that is the first part the second part since we already installed the prettier plug-in so make sure to go ahead and put the plug-in right over here is actually just to put prettier and just a quick notice from the documentation the guys who worked on pretty are just telling you that make sure to have prettier the last one on the array or on the list this way pretty you can override whatever comes before it so anything is from reacts or anything if you got a configuration until like a preacher configuration that is telling you to do something preacher will override whatever that says it says something otherwise okay so make sure just to have it last this is the best experience it would just be like working as charming as it would be and this would be all of it for just like setting up prettier with es lanes the other most important part is actually to create the pre to your configuration and make sure to have it on the root project or the root directory of your project so to add just thought pre to your rc and this is the configuration this is the basic naming convention for picture configuration whatever just put it like this one and you're good to go so this will be a json file and this is actually my kind of like default producer configuration so like the tab with uh two use tabs false just like use spaces in indentations uh single quotes for us because we want to use like double quotes maybe this swimmy is a semicolon exclusively just gives you like whatever hints you need and this is a pretty good one maybe there's the trailing comma you want to like oh all the training comments to be in there and the print within here is like when should be should it wrap up like the the maximum show so you could wrap up or whatever so this is my basic or my actual recommended pre-serial configuration so i want to put it in there that's pretty good now the last thing to make sure that we have for sure and we can apply this configuration whenever we save to that whenever we do control s in our block projects in here so we're never going to do like something and ctrl s we let put your work exclusion here uh i think i already have already got preach you're working the screws in here it's actually formatting if you go to the output you're going to see this is what is being currently using uses typescript and and this is the configurations using so how can you have the same simply go ahead and install the extension from the vs code so just go to the extensions search for prettier click on it click install you're good to go this is basically all you need to do just to make sure the extension works the other part is actually just going into settings so open user settings and go in here search for formatter it's going to find you the first one screws here defines the default formatter which takes proceedings over all the four mana settings and make sure to choose prettier there is a plenty of them but of course pretty is the best one for us as javascript developers as well uh so i'm not sure if it does support i guess it does support a couple of other languages but mostly javascript is the best one for pretty here so just go ahead and do this and also you can just enable format on save so like whenever you hit ctrl s or you go file save this will automatically go ahead and do like hit the formatter and runs prettier sweet now if you want to just not go and test this in action now what we have is like we've got a configuration that sells us oh do never use single quotes so if you want to try this in here for example i'm going to import something and i'm going to import it in single quotes okay so you put something in here that's okay from vs code right that's that looks pretty pretty damn okay now if a control s prettier will run so there you go it turned it two back quotes in here and this is a pretty good one maybe the trailing commas this is a pretty good one as well so if you remove a trading comment control s the training command coming back uh maybe the width one as well which is like the not you know take any characters uh the tap width in here so if you have like something like going beyond that for a particular indentation you control s the indication going to be fixed for you so this is what basically pretty is going to be is going to be like absolutely amazing and it works really really well with eslins so if you try to run eslint now to lint it will automatically know oh you've got this prettier configuration so i'm going to respect whatever preview tells you and i'm going to use like whatever else pretty is not telling you so it will they both can work in harmony together just to give you the best experience for forcing the code style for formatting your code and for having the best code pace um you ever can gm off basically also for eslins mostly there are tons and tons of rules that you can very hardly just keep track of and sometimes you don't know what a rule does for example what does that heli rule does right you don't know that you need to go in and look up google maybe look up the documentation of eslint and yeti area especially if it comes from like plugins and different stuff which is making your lives a lot harder and it happened with me a couple of times i don't find exactly what the rule does and he keeps searching google which takes a lot of time luckily there is this awesome co like extension vs code extension called lintel i absolutely adore vs code extensions please drop a like if you do as well because i i adore them of course uh they're just so good so this lentil one will give you a configuration file visualizer and it would give you like hints it would give you license it will give you comments of what different one does and it gives you just a basic gui or graphical user interface to manage your es lens configuration so make sure to install this after installing just go back into your projects whatever just go in and do like the command palette run lint tool and control or click on this this will run the interior screws in here there's the es9 json in here which is the one that we have if you click on it it's going to tell you like what are the current active ones for example if you click on the active rules these are the current active rules and what it gives you as well it gives you the rules from eslanes the typescript eslants the import plug-in the gsx plug-in the pre-trigger plug-in and the react plug-in remember we are using a lot of plugins in here scripting they're extending different stuff and we are using different plugins so it knows everything is from those plugins and it just tells you exactly what the plugin is if you want to search for a rule for example maybe i want to go oh i don't know what this gsx uses reacts i want to copy this i'm going to go back in here i'm going to go to react because this is from the react scope make sure to choose the right scope of course for the plugin and just put that so this one will prevent react to be marked as unused wow that's pretty good right so this is actually completely off because i already have it off in here if i change this to be error this will automatically go ahead and change into this but of course when you save it just give it a couple seconds and there you go i want to change it back to off because this is a very bad behavior and you don't want to like something to use uses react so i think this yep this should be off and i don't want to back with this so as i said blind tool is a pretty good extension make sure to go ahead and check it out and it can give you like different stuff from best practices to active stuff to different different configuration and i absolutely adore this all right so the last thing we want to do in here is actually to run linkedin or to run eslins whenever we are about to do a commit so maybe if somebody just like didn't run the linkedin before that or didn't notice we want to force that lint in so you can force linting on ci maybe you want to like force it in github actions and bit bucket so many different places but the most practical and the best place to like force this is pre-command script and what i mean by pre-commit script is whenever somebody a developer on the project tries to go in and do like for example git commits or commit whatever changes a script is gonna run prior to that commit so for the for that particular commit to work that script has to succeed then it passes to that particular commit which is absolutely amazing and most of project developers pro projects and bigger projects are like big scale projects it uses this particular approach so to do that we just brought in here haskey which is a really awesome tool that basically allows you to do or manage the get hooks which can allow you to add post commits pre-commands uh pre-publish and those kind of stuff so we want to just like mess up with the pre-commit stuff and we want to go ahead and add this into or like our projects the git projects using haskey so it's closing you can read more about like the features and everything but i'm going to just straight through jump into the implementation i'm going to go to the mpx haski init and npm install so this will basically go in and do the automatic recommended there is the menu way which i don't recommend at all but the basic one is to go ahead and use this one so i'm going to go and copy paste this into my projects to do a pre-commit that make sure to link our projects before you can make any changes sweet so i'm going to just go ahead and paste that click enter and just like the magic of mpx and npm work together to do haskey security already created for us this haskey folder in here and he already added some pre-commands and if you try to quickly look at it you're going to just open this one you're going to find all these scripts for you just this card this one is just like to run this properly from haski side but this is the actual script that is going to run pre-commit or prior to the actual commit thing so it's going to do npm test we're going to want npm test you can go in and edit this immediately in this like after has keys has configured and it works right now hex is completely getting started it actually can work right out of the box so you can go in an in this file you can be a professional you can add this file or if you want to like be a lazy dog like me you can completely go in and use the haskey cli to go ahead and manage and add edit whatever commits or commands you want to do for defense github hooks or git hooks sorry so simply what you need to do is just like mpx has key and this will grab the latest haskey version whatever because using mpx and here you give it like what you want to do like the command so when i add or set so since we already got this one we're going to do use the sets just to update it and i'm going to just give it the location that where our commits are hosted so you need to use dot has key so i'm going to be asking for slash and it's going to be pre-commit okay so this is the hook name and make sure this hoax names whatever you can read more about documentation about on haski's website but make sure these can like this these names that you're providing here are following it together with the actual get hooks names otherwise they won't work properly okay so you provide the actual hook name in here like the location and the hook name the last line here between close you can go in and provide whatever script that is going to be put in right over here to run prior to every single commit so for us what we want to run if we go to our pack.json we want to run lanes okay you couldn't go and run tests but for us we have a setup test they are basically not working so mainly you just go ahead and do like npm run leans and you can also do go in and do like and npm run test to make sure that they both run before or prior the commits but for us we only want to lend go and click enter and this will just go and create the pre command for us if you open the pre command there you go now it works and we have it absolutely fine now if we're not going to commit if we take a look on the train here we go whoa that's a plenty of changes right so we got so many changes and you know what because we already got a lenter and we don't want people or different developers just to go and commit code that is not following together with the current code style especially the airbnb skills now maybe they have like some syntax issues they didn't notice and we don't want this to go ahead and pollute the production and have production issues and area data so how we can do this using the pre-commit using our lovely husky dog so what can do this is actually going to like commit get add for example you want to add whatever exclusive we got this and of course whenever you're using a gui like the gui from vs code in here it's still going to be working absolutely fine so i'm going to do like git commits um adding or in forcing code style to my projects whatever that is so once you click enter excuse me it's going to run this screen first you're going to run eslanes first and if es1 is going to pass through which it didn't for some reason as curiously there is some weird issue that is going on in here so housekeeper can be executed with one so he can't continue so the the these changes aren't committed just yet so if you can quickly go in and fix those go to report with vitals and this is basically coming from the preacher here because we already have this in the eastlands so it tells us oh these are they shouldn't be on the new line so if you control s prettier work you know successfully fixed that for us and we are in the gear part and i'm just going to clear out the errors run the commit again and now we should pass eoslin's is completely fine and it's completely successful it doesn't find any issues only warnings and there you go security here we gotta find like enforcing the code style to my and it all has been successfully committed to our file screws in here we got different stuff in here that are you know like the new changes whatever but we got the commit pass it because eslint has actually passed and everything is working fine with prettier with code styling with hasking pre-commands and all the sort of stuff so that was actually guys i hope you guys enjoyed that was actually a little bit of complicated and deep dive into how to use es lens plus picture here plus haske for like pre-commands and to have the best projects you can probably ever imagine and just like have this all this setup with react plus typescript so hope you guys enjoyed this one hope you guys like this particular video tutorials i'm pretty sure this setup in here sometimes if you just follow documentation you're going to find it super hard to follow along so i tried to go ahead and put that video together for you guys to go and understand what is exactly and how to set it up and all the things behind the scenes so if you guys enjoyed for this one catch you hopefully in the next ones [Music] you

Channel: CoderOne

Views: 110,005

Keywords: React, vscode, eslint, prettier, husky, git husky, tslint, eslint react, react eslint, react typescript, eslint vscode, eslint prettier, prettier react, prettier vscode, vscode prettier, prettier extension, prettier setup, eslint config, eslint airbnb, eslint google, eslint javascript, vscode typescript, husky github, husky hooks, husky react, learn eslint, master eslint, learn prettier, vscode eslint prettier, eslint best config, react code style, enforce code style

Id: ZXW6Jn6or1w

Length: 35min 3sec (2103 seconds)

Published: Mon Mar 07 2022