Vite React App with EsLint & Prettier in VSCode (2023)

hello my name is Ollie and today I'm going to show you how you can create a new react app with Veet eslint and prettier and I'm also going to show you how you can install the eslint and prettier plugin for vs code and you will also learn how to configure these plugins so that whenever you save your file it's automatically formatting your code with prettier so if you like my style of teaching then please give the video a like And subscribe to the channel and activate the notification Bell alright so the first thing that we need to do is we need to create a new project with Veet so for that I need to type npm create Veet at latest and then the wizard is going to ask us to install that package here so I proceed with yes and after that it's going to ask us how we want to name our project and I'm going here with my project but you can pick whatever name you want so when I press enter then it's going to ask me which framework I want to use in our case we are talking about react so I picked the react framework and then we can choose between a typescript or a plain JavaScript version and it actually doesn't matter for this tutorial what you choose but I'm going with JavaScript here alright and now which tool has created the project and all that I need to do is I need to CD into my project folders on my case here CD my project and there then I just need to install the dependencies so npm install alright and once I have installed the dependencies I can open up the project folder inside my IDE so I'm personally using visual studio code so that's why I have opened this my project folder inside this code and the first thing that I want to do is I want to have a quick look inside the package.json file and the reason for that is I want to check our Dev dependencies here because when we have a look at the dev dependencies we can see that we have eslint we have eslint plugin for react we have Eastland plugin we Hooks and we have eslint plug-in react refresh so it seems to be the case that a project which has been created with Veet already comes with an Eastland config because otherwise these eslint dependencies here wouldn't make sense and another hint that there is already a slint installed and configured is that when we have a look at the scripts here there's a script which is called lint and it's actually executing eslint here so that's already a pretty good sign that a project which has been created with Veet already comes with Eastland configured the next thing that I want to do is I want to look inside this dot islindrc.c.js file here this is the config file for eslint and what is very important is to have a quick look inside this extensor area here because we need to check which rules are applied and in this case here this config is basically extending the recommended rules of eslint and it's also extending some of the rules which come with the eslint plugins for so here we have the recommended rules from the react plug-in here we have the rules from the jsx runtime plug in and very important here we have the recommended rules from the react hooks eslint plugin so this is looking pretty good because that means whenever you create a new react project with Veet then it already comes with eslint installed and configured the next step is then to check if the IDE that you are using has a plug-in which integrates eslint into your IDE in my case I'm using this code so what I have done here or what you can do in case you are also using vs code you can click on your extensions and there you are searching for eslint and there you will find and this eslint plug in here and then you can install it here you can see I've already installed it and this adds basically the eslint integration to vs code and what this means is that whenever you are coding and you are making a mistake according to the eslint rules that you have set up in your config then this eslint plugin for vs code of all your IDE is going to underline the errors that you've made for example here you see this red line it says using Target blank without Rel and so on and so on and you can see this is against the eslint rule react slash jsx no target minus blank or another thing could be if you for example create a use effect and then inside that effect you use a reactive variable so for example console.log count then we get an error because whenever I use a reactive variable or variable that can change through State then it has to be inside the dependencies array but I have not added the count here which is a state variable I have not added it to the dependencies error here so the eslint plugin tells us hey we have an error here this is against the react talks exhaustive depth rule so this is basically the benefit that you get from installing this eslint plugin for views code or maybe for any other IDE alright so now we are finished with the islin part and we have checked that Eastland is already set up and configured when you create a new react project with vit the next step is to install prettier and here I've opened up the package.json file and there you can see inside our Dev dependencies there is no package named prettier so that means we need to install it and configure it on our own so let's do that now so for that I need to open up a terminal and there I need to install prettier so I type NP PM install prettier and then I need to add two options to that install command first of all I want to say minus minus save minus Stef so we installing it as a Dev dependency so that means that it's only used during development and is not actually part of the product that we're building and then I also want to have the save minus exact option and we need that because sometimes when there are new versions of petia they change the way how things are formatted and we don't want the formatting to be changed we want to lock it to one version with one set of formatting rules and we don't want to change that so that's why we need the save minus exact option here and then we can just press enter and we just have to wait until it's installed alright so now we have prettier installed and we can close our terminal and the next thing that we need to do is we need to create a config file for prettier just like we have a config file for Eastland we need to have a config file for prettier so let's create a new file we're going to name that file dot prettier RC dot Json and this is basically the Json file where we configure how pretty air is formatting our code so I'm going to add curly braces and there we can then add all the options that pretier gives us to configure how prettier is going to format the code and I usually like the default rules the default formatting but there's one thing that I would like to change I want to activate single quotes so that means that prettier is formatting the code in a way where it's always using single quotes instead of double quotes so single quote and we need to set that to true all right and that's it with the config file on the prettier website you can find all the different options that you can set up so you maybe want to have a look at the website I'll put a link into the video description so that you can configure your prettier formatting in the way you like it so now we have installed and configured pritia and we have installed and configured eslint but there's one problem because some of the eslint rules might conflict with how pretty is formatting the code so what we need to do is we need to disable all the Eastland rules which have something to do with how prettier is formatting the code and luckily for us we don't need to do that manually there is a cool plugin for that so we open up a terminal and then we type npm install minus minus save minus def again this Dev option here because we install a plug-in for eslint and that is a development tool so we only need it while we are developing and that tool is called eslint minus config minus prettier and then we press enter and what we can then do is we can first of all close our terminal and then we can go back to our eslin config file so this islindrc.cjs file and there what we then do is we go inside this EXT tense area here and then as the last entry we just put prettier so this prettier rule set here basically disables all the rules which might interfere with um prettier and that's why you need to put it at the end here even if you want to add your own rules here and your own stuff then make sure that prettier is always the last one that you extend all right then we can save our file and then just to make sure that there's no problem with Eastland and prettier there is a really cool command line tool which comes with this plugin that we just installed so let's open up the terminal and then we can just type MPX Eastland minus config minus prettier and then we just need to pass in a path to one of our JavaScript files so what we can do is we can say dot slash Source slash main.jsx and then we press enter and then it's going to tell us no rules that are unnecessary or conflict with pretty are well found so that means our setup is done now there are no conflicts between prettier and Eastland alright and now we are ready to use prettier to format our project and what I want to do is I want to create a script so that it's pretty easy to format the project I call that script format and then what we want to do is we want to type prettier and we want to use the right option which means that it's going to format the code and then I want to format the whole Source folder just like this and then I can open up a terminal and then whenever I want to format my project I can just type npm run format and then it's going to format the whole Source folder with prettier and there you can see in my case here it has formatted the app.jsx file and the main.jsx file so now we can format our whole project with prettier from the command line but just like with eslint there is also a vs code plugin for prettier so we also want to install that because that is also pretty amazing so let's open up our extensions and there we search for prettier and you can see here that's a plugin I've already installed it so you can install it and then this basically adds the integration of prettier into vs code and then let's for example open our app.jsx file and now let's just add some unnecessary white spaces remove the semicolon here so when I now run prettier it should remove those white spaces here and it should also add the semicolon again so what I can now do is I can execute the format command so form a document with and then it's going to ask me which formatter it should use and because we've installed the prettier plugin for this code I can just use prettier here and then you can see it is going to format the code for us with prettier and what you also probably would like to do is you open up the settings and then you search for formatter and then first of of all you can set your default formatter so that you don't need to specify every time you want to format your code with which format you want to format you can just select the format that I want to use here so I set prettier as the default formatter and then there are two other very nice options and that is called format on paste and format on Save and I have them both activated so that means whenever I paste in a file or I save that file it's automatically formatting that file with prettier for me so here you can see let me add again some white spaces and remove the semicolon here and now whenever I save you can see it's automatically formatting the code or I can also do something like this I'm going to add some white spaces and remove the semicolon again and then I am cut this line here and then you can see when I paste it it's immediately formatting it and now we're at the end of the video you have learned how to set up a new react project with Veet ear Slim and prettier and if you want to learn more about islint then check out this video here and if you generally want to learn more about react and JavaScript and web development and so on then subscribe to the channel and activate the notification Bell

Channel: Olli

Views: 8,605

Keywords: vite, react, prettier, react setup, vs code, prettier vscode, create react app, react eslint, eslint react, eslint prettier, visual studio code, how to, web development, software development, vscode setup, vscode tutorial, react setup without create react app, react setup project, react setup vs code, create react app is dead, create react app with vite, create react app without create-react-app, prettier vscode not working on save, prettier vscode format on save

Id: SMbqi1HPprc

Length: 12min 41sec (761 seconds)

Published: Mon Jul 31 2023