ESLint, Prettier, and VSCode Setup for JavaScript Code Linting & Formatting | Tips for Clean Code

hey there fellow developers welcome to a coding Journey that's all about achieving code quality today we have got a special treat for you I'm going to start a new series that will transform the way you write and manage your code I'm going to start with es lint and prettier these two tools are essential to keep your code clean consistent and free from pesky bugs we will start by explaining what ES lint and prettier are and guide you through setting them up in your project we will even show you how they can work together to create code Harmony but that's not all in upcoming videos we will introduce you more code quality superheroes for example Husky and Lind stage they will ensure that your code base stay clean even when the pressure's on these tools are absolute must have in your developer toolkit by the end of this series you will wonder how you ever code without them so don't forget to hit the Subscribe button and ring notification Bell so you won't miss any upcoming videos in today's video we will start with es lint and prettier so let's get [Music] started [Music] let's start with es lint es lint is a powerful linter for JavaScript it scans your JavaScript code and helps you find errors and maintain consistent code Styles now why is es link important let me highlight a few key reasons and very first reason is error detection eslint catches syntax errors and potential bugs before they cause trouble during runtime it's like having a second set of eyes on your code second important reason is code consistency esent enforce coding standard and Style Guidelines this means your code base will have a uniform and readable structure even in large team project another key feature is early bug prevention by catching issues early eslint helps you prevent bugs before they be became hard to debug problems down the road and the best part of ESL is it is highly customizable you can tweak its rotes to match your Project's unique needs and coding style so let's see how it work so in the editor right now you can see we do not have any file to work with so let's create a new file so let's say its name is index.js let's write some example code to work with let's give it any name let's see XY Z and its value is 10 and now let's create a function and let's name it example and it is going to accept arguments and its default value is one and now here I'll say if arguments is equal to equal to 1 and then do something thing and then let's add else if arguments is equal to two then again do something and again let's add LF arguments is equal to is equal to 1 then do something now in this example code we have some issues for example here they duplicate comparison logically it is incorrect because it is never going to reach here so let's see how es lint going to catch errors in this code so for that let's install the es link but right now we do not have package J Json file so first let's create this so in the terminal here I'll run npm init i y it will create M package.json file and now I will install es link so npm install es link and save de it's complete next es link required a configuration file we can create this by executing es Link in it but here this command will not work because es lint is not installed globally so to execute this command we will run it with npx es lint in it this npx will execute es lint installed in this project so let's run this it will ask some questions so the first question is how would you like to use es lint I will use to check syntax find problems and enforce code sty the third option next is what type of modules does your project use we are going to use import export so we will select this first option JavaScript modules so next is the which framework does your project use right now we are not working with react or VJs so here I'll select none of these does your project use typescript I highly recommend typescript it is very powerful if you want to learn typescript and want tutorials on this write down in the comment section so for now I want to keep it simple so here I'll select no and next where does your code run in case if your application is server side renderer in that case you should select node and browser both but this project is not going to run on server side so here I'll select only browser next how would you like to to Define uh style for your project here I'm going to use popular style guide option the first one and here we have four popular style guide here let's select the Airbnb next what format do you want your config file to be in here I'll select Json and now it is going to install these dependencies would you like to install them now select yes and here here I'll use npm so it should have created this es link rc. Json file let's see this in the editor here we have es link rc. Json file and in this option we have VV this is our code style guide rules parser is ecma script version latest and Source type module to use import export in the project and here in these rules we can add more rules according to our project and now let's check errors via es link so in the terminal to check error here I'll run npx es lint and then we can pass the file name for example index.js in our case by using this dot we are giving instruction to es link to scan and validate all the files in the current directory so let's run this and here you can see it has got these many errors in the index.js now instead of running this command I recommend adding this in the script section of the package.json so let's add this so in the editor let's open the package.json file and right here in the script let's remove this here I'll add lint es lint Dot and then we can pass extensions to instruct which type of files it should scan we can say JS or if you are working in typescript then do TS if you are working on reactjs in that case you can pass GSX and DSX do Json and if you are working on vuejs Project then you can also pass do view but in this project we are only working in JavaScript so let's remove all these extension let's keep it simple now in terminal we can run npm run lint and you can see it has executed this command and in the index.js we have got these errors as mentioned earlier this dot is used to instruct es link to scan and validate all files in the current directory in this case let's assume all working files are in the source directory so let's create a source directory SRC and let's move this index.js in the SRC directory next let's assume that this SRC is compiled and GS file is generated in the disc directory so for now let's manually create this directory and let's copy this index.js from the source and paste that in the dis so let's assume this is the main working directory and this and dist is the compiled output so now in the terminal if I run npm run link you will notice that it displayed errors from both dis index.js and source index.js but we only want to display errors from the source index.js to achieve this in the package.json right here we will specify SRC to only scan and validate SRC directory now let's run npm run link this time you will see it has displayed the errors from only source index x. JS currently errors can only be seen when running the command on Terminal it would be beneficial to have error displayed within the editor so for that we need to install the es link extension in the vs code editor so let's click this extension icon and here I will search for ES lint this one it is by Microsoft so now let's install this now it is installed and close this and now navigate to index.js here you will see errors that es lint has detected you will also notice that es lint is showing errors on this index.js which we want to ignore to do this we can create a new file do es link ignore and here I will specify the dist directory that we want to ignore now immediately you can notice that this has stopped the es link from showing errors in the index.js of this directory so now let's close this now that we have es link reporting errors in the file let's set up uh automatic error fixing so let's move to package.json and here I will add one more command so let's duplicate this and here I'll say lint fix and next in the end I'll say hyphen hyphen fix this command will fix errors in the all files of the project to see this in action go to terminal first lesson npm run link here you can see we have these many errors here we have 15 errors and N9 errors out of 15 are fixable so here I'll run npm run lint fix now you will see that all fixable issues has been automatically resolved and now six errors are left which we have to fix manually now in the editor you can see only few errors left and we have to fix it manually we can also configure vs code to fix es L errors automatically on save file so for that first let's undo this to get back the errors and now let's open the vs code settings by pressing control comma if you want to configure it globally then make sure to select this user Tab and then press this small icon it will open Global settings. Json and any configuration in that Global settings. Json will affect all projects if you want Project Specific settings then select workspace and then click this small icon it will open the settings. Json for this project here you can add necessary configuration and it will affect only this project so here I'll say editor do code action on Save and here source. fix all do eslint through so now on Save JavaScript files this will automatically fix all autoc correctable errors to test this go to index.js and press crls to save file and you will see that the autoc correctable errors has been resolved how cool is that now let's fix these errors manually so the first error is this one XY Z is assigned value but never used we will see this in a moment and next is the this example function is defined but never used so to fix this let's call example function and then let's pass this XY Z right here and now you will notice this XY Z and example error gone and next here it is recommended to use triple equal to instead we have used double equal to so let's add triple equal to and here also same error triple equal to here again triple equal to and immediately you will notice that this bench can never execute its condition is a duplicate is same right here so it will never going to be executed so here we should remove it so now let's close the settings and the es link configuration right right here in the rules we can add custom rules as well for example let's say many developers do not like to use semicolons so we can add rules to remove semicolons for that here we have rule semi and here we will pass array and in the first value of this array is going to be one or off or error to specify the type of error and for the semi the next value has two options one is always we always want semicolon and second is never we do not want semicolon so let's save this and immediately you will see here error extra semicolon and on save it will automatically remove semicolon from here let's say here always we all always want semicolon immediately you will see here red underline missing semicolon and let's change error type Warn and now here you will see yellow underline with warning message on save file it will bring back semicolon in the browser these are the large list of es lint rules and here we have seen example of Sami this one now let's talk about formattings very first thing what is the difference between formatting and linting while linting mainly focus on detecting errors formatting is about ensuring that your code follows consistent formatting rules such as tab width CES comma semicolons and more by maintaining such formatting rules your code will appear consistent even when created by different developers using different idees so how do we apply formatting for our code eslint have some formatting covered eslint performs both linting and formatting however another tool prettier is more comprehensive and considered the industry standard prettier can be combined with es lint providing a robust solution for all of your formatting and linting needs so now let's start by installing prettier so in terminal npm install prettier save Dev is done next we will create configuration file for prer so in the editor here I'll create a new file do prier RC and here I'll paste few prier configuration we want semicolon single code true print width 80 and tab width is two and use tab false to use prettier with es lint we also need to install npm install es lint config prer save Dev this will disable the formatting rules in es lint that prer is going to be responsible for handling so let's press enter to install it it's done next we also need to install npm install es L plug-in prettier save Dev it runs preter as es lint Rule and reports differences as individual es lint issue so press enter to install it next let's register this in the es link configuration file so in editor let's close this P configuration and in the eslint rc. Json right here in this extend we want to add more configuration so let's convert this into array and now here I'll add plugin prer recommended and this plug-in is from this package and make sure this should be in the end of this array so preter can override rules of this plugin is done now in the package.json here I'll add new command to format files so I'll say format prer space Dot and then hyphen hyen right here this dot instruct the pror to format all the files in the current directory instead here we want to format the files in the source directory so here I'll say SRC and next here I will also say hyphen hyen ignore unknown so here we instruct the prer to format all the files in the source directory and ignore the files which are unknown actually preter can format various type of files if it detected the unknown file it will ignore for that now let's test this so in the index.js let's add some bad formatting and press save here it has automatically formatted it because of editor configuration so for now in the settings let's comment this and in the index.js let's add some bad formatting and save file you can see here we have some style issues so to fix this in the terminal we will run npm run format here it has formatted this index.js let's see here we go let's see this again save this file and in the terminal and PM run format it has executed this command and our index.js is formatted we can also instruct the vs code to format this on save file using prer so for that we need to install prier extension so let's click this extension icon and search for prer this one and it is from prier let's install this and now in the settings. Json right here editor. default formatter is going to be this one prer vs code and you also want editor. format on Save true so it is going to format the file on Save using preder so let's close this and this and in the index.js let's add some bad formatting it will format this style using prettier great but here editor has used the default format prettier for every language we do not want that maybe you are working in PHP for PHP you want different format we also do not want to format the file on save for every language so instead of this here I'll paste these configurations we specified the language JavaScript and for JavaScript default formatter is prettier and format on Save true similarly we specified for typescript View and react and I will also enable this so here on Save first it is going to fix es link errors and then it is going going to format the file using preder let's see now contrl s here we go issues are fixed great this is all in this today's lesson in this part we have learn the importance of es lint in maintaining code quality and how prer automates code formatting to keep your style on point in our next video we will dip even deeper we are going to introduce you to a coding superhero Husky and lint stage so stay tuned for our upcoming videos I hope you find this video helpful if you did don't forget to give it a thumbs up subscribe to our Channel and click the notification Bell to stay updated with our latest content thanks for watching and happy coding

Channel: QiroLab

Views: 1,386

Keywords: ESLint tutorial, Prettier setup, VSCode JavaScript linting, Code formatting in VSCode, JavaScript linting and formatting, ESLint and Prettier configuration, VSCode extensions for JavaScript, Code quality tools for JavaScript, JavaScript linting best practices, Automated code formatting tutorial, VSCode extensions for web development, JavaScript linting rules, Prettier VSCode integration

Id: F0IrHtPo-Ec

Length: 25min 35sec (1535 seconds)

Published: Fri Jan 19 2024