Create React App with ESLint & Prettier in VSCode (2022)

eslint together with pritia is a really nice combination for linting and enforcing a code style in your react project and you will find a lot of tutorials which teach you how to add island and pretear to a project created with the create react app tool but unfortunately a lot of tutorials add unnecessary dependencies to your project and also overwrite the default eslint config which comes with create react app in this video i will show you exactly which dependencies and config files you need to add eslint to a react project created with the create react app tool and on top of that you will also learn how to add the code for meta prettier to your project this by the way can also be dangerous because if you are not careful island and pritia might be working against each other but don't worry in this video you will learn all of that if you haven't worked with eslint yet then i suggest that after this video you watch my eastlin tutorial to learn the basics of eastland and as always please like the video and subscribe to my channel so here we have a project that has been created with the create react app tool that means i have created it like this i typed npx create minus react app and then i had to type in the name in my case that's react minus island minus red here and now i will show you how you can set up eastland in such a project and usually the first thing that you want to do when you are working with eslint you have to add the eastlin dependency so usually you would type npm install eslint and you would make it a dev dependency because eslint is a development tool so you only need it during development however the create react app tool is a really powerful tool and it comes with a lot of dependencies and a lot of configuration already so let's first check if eslint is maybe already part of our project so for that we can use the ls command of npm so we type npm ls eslint and then it takes a moment but then we can see that there it says eslint which means eslint is already part of our dependencies um and when we have a closer look we can see our project has a dependency which is called react scripts and this react script has a dependency island so let's look at our package.json file and there we see this react scripts dependencies so this react scripts dependency seems to have a dependency to the eslint or in other words with the react scripts package we also get the eslint package and as a short side note the react scripts package is basically the container which contains all the configurations and scripts that come with the create react app tool all right so now we know that eslint is already part of our project and now we could theoretically create a config file for eslint and start working with eastland however eslint at least in the base version only contains rules that are specific to javascript so there are no rules specific to react and let's say for example you're building a component which has some jsx and inside this jsx you want to display a list then you should to every list item assign a unique key and i think it would be cool to have an eslint rule which reminds you when you forget such a key and in order to use such rules we need to install an eslint plugin and that eastlin plug-in is called eslint plug-in react and you would install it with npm install eslint minus plug in minus react and we again would made it a depth dependency so save def um because it's also a development tool however this eslint plug in react is also already part of our project and we can verify this again by using the alice command so i type ls eslint minus plugin minus react and then it's telling us when we wait a short moment it's telling us that our project again contains ux scripts that react scripts contains the eslint config react app and that contains the eslint plugin for react alright so we also don't have to install this but there's another important plug-in and that is called eslint plug-in react hooks which on top of the eslint rules for react adds specific rules for hooks and we also want to install that but here again this is also already part of our project that has been created with the create react app tool so let's verify this also i type npm ls eslint minus plugin minus react minus hooks and here we can again see that it's already part of our project so let me summarize that so in order to work efficiently with eslint in react we need three dependencies eslint itself a plug-in which adds rules for react to island and a plug-in which adds rules for hooks to island and luckily for us they are already installed when we create a project with the create react app tool so we don't have to install any dependencies and now the next step would be to create a configuration for eastland but we already have a configuration when we scroll down inside our package.json file we can find a block which is called eslint config and it only contains this extends block and it extends these two configurations here and for now let's just copy this and we create a new file and i call that dot eslint rc so i create a separate configuration file for eastland and there i copy paste this and then i can remove this so what i've basically done is i just removed the eslint configuration from the package.json file and moved it to a separate file and the reason why i did this is because i think that's much cleaner to have that in a separate file because later we need to make some changes in the eslint configuration when we add prettier to our project and i don't want to pollute our package.json file with all of these changes here so that's why we extracted the configuration into a separate file but basically we didn't do anything we didn't have to install any dependencies and we also didn't have to create a new configuration because this configuration was already there and now let's take a moment to talk about this react app and this react app chest configuration that we extend the documentation for the create react app tool states that this is the base eslint configuration that comes with a project that has been created with the create react app tool and it also states that our own configuration should always extend these two here so we just keep this file as it is so let's summarize what you just learned basically we would need to install three plugins eslint the eslint plugin for react and the eastlin plug-in for react hooks and we would need to create our own configuration but all of this is already taken care of when we have a project that has been created with the create react app tool so we can now move on to adding prettier to our project all right so now we know how to properly set up island in a project created with the create react app 2. if you are new to eastland then i suggest that after this video you watch my eastlin tutorial to learn the basics of island but now let me show you how you can add prettier to a react project which uses eslint so the first thing that you have to do when you want to use fritia in your project is you need to install it for that we use the npm install command so npm install print here and because it's a development tool we also add the save miner staff option and we should also add the save minus exact option which ensures that you always get the exact same version of prettier when you are installing the dependencies then i press enter and then we have to wait a moment until pretty is installed and the next step is to first create a configuration file for prettier and it's called dodge prettier rc.json for now we keep it empty but later we're going to put some configuration in here and then we also need an ignore file so i call that pre dot prettier ignore and there we can put all the paths to all the files and folders that a prettier should not format and i think we should put the node modules folder there because we don't want prettier to format the code inside the node modules right so node modules has to go here and now there's only one problem left before we can use prettier and that is we now have two tools which have something to do with the code style or with the formatting because eslint i mean it checks the correctness of the code but it also has rules which have something to do with how the code looks like and with the code styling and so on and prettier on the other hand is a formatter which has also something to do with how the code looks like so what we need to do is we need to go inside our eslint configuration and there we have to disable all the eslint rules that have something to do with how the code looks like and luckily for us there is a good package which helps us with this task so let's install the package called island minus config minus prettier and because this is something related to eslint and eslint is a development tool we add the save minus dev option to that command all right so now it's installing the eslint config prettier and what this is is it's basically a configuration which disables all the rules of eslint that have something to do with the styling so we can extend this rule here so let's go inside our prettier config file and at the end of our extends array i put prettier so prettier is that config that disables all the rules which have something to do with styling and it's important that you put it at the end of this list so that it can override rules that come from these two configurations here and now we are ready to use prettier so we could just go inside our terminal and there we could type npx prettier minus minus right and then the current folder so just a dot and then this will format all the files inside our a root folder except for the node modules folder um according to the rules of prettier for example we can look at our app.js file and what i don't like here already is that you see these quotes here these are double double quotes and i personally prefer single quotes so maybe we should configure prettier so that it uses only single quotes instead of double quotes for that we can now put something inside our prettier rc files or configuration file for pittian so there i type single quote and i set it to true and now when we go back to our app.js file and i run that command again it should change those quotes at the top to single quotes perfect these quotes here which denote a string props they are not affected by this because i guess they always have to be double quotes but here it worked that's what we wanted to achieve and that's basically it you now have a react app where eslint and pretty are already configured and now it's up to you to do some research and to get some inspiration how you would like to further configure your eslint and your prettier for example maybe you want to enforce that you always have semicolons at the end of every statement so for example you say that something like this or you want that something like this is not allowed then you could go inside your eslint configuration file there you could create a rules block so rules and then you could use the semicolon rule and you could set the error level to warn and now you will always get a warning whenever you forget a semicolon so let's go back to our app.js file and there you see um there it says missing semicolon and that's also another thing that i want to show you or that i should at least mention the reason why i get this yellow line here is because i have installed an extension which is called eslint and you should probably also install it when you're working with vs code and this is adding this integration of eastland to your editor and there's another extension for vs code and that is called prettier and maybe it also makes sense to install it for you when you're working with the vs code and this adds further support for ptr to your vs code alright that's it for this video if you want to learn more about eslint then please watch my eastlin tutorial where i teach the basics of eastland if you like this video then give it a thumbs up and subscribe to my channel

Channel: Olli

Views: 15,917

Keywords: eslint, prettier, vscode, react, tutorial, webdev, javascript, create react app, npm, dependencies, eslint react, eslint prettier, eslint prettier vscode setup, visual studio code, web development, eslint react vscode, eslint react plugin, eslint prettier create react app, web development tutorial for beginners, web development for beginners, web development tutorial, eslint vs prettier, prettier vscode, eslint explained, eslint tutorial, eslint prettier react, vs code

Id: xinJSYiOB6Q

Length: 12min 1sec (721 seconds)

Published: Mon Jul 18 2022