ESlint and Prettier
ESlint and Prettier
ESLint and Prettier#
In this lesson we are going to add two libraries which will improve our development experience.
ESLint and Prettier are libraries that together make your code more universal, as they make you stick to common programming style guidelines and patterns.
ESLint is a code linting tool that handles code quality and resolves coding style issues. If you are using Visual Studio Code I recommend this ESLint extension. You can find it by typing
ESLint in the extensions tab.
Prettier is a code formatter that will take care of code quality. In Visual Studio Code there is also a dedicated Prettier extension. You can find it by typing
Prettier in the extensions tab.
The next step is adding ESLint and Prettier to our project. Doing it manually can take some time, so I recommend this GitHub repo that comes with one command line that installs all the needed dependencies in our project.
After executing it in a terminal we have a few options to choose from:
Select package manager: (in my case it is
Select configuration file format: (I recommend using
Enter max line length: (80 is the most common and recommended)
Select trailing comma style: (I recommend selecting
es5). If you are interested why, please read this article.
After all the dependencies are installed, we can take a look at the generated files.
In our project we can see two new files
.eslintrc. They come with some default rules but these are not enough for our React Native project.
In the full source code for this course you can see complete configuration files that are tested and used by me. You can simply copy and paste them. They add some more specific rules, helpful for React Native projects.
Now, let me show you a small example of what exactly ESLint and Prettier can do for you.
Let's define the following variable:
As you can see our code editor lints one warning and one error. The warning simply tells us that variable
Errors will be taken care of automatically when I save the file, thanks to Visual Studio plugins.
To sum up, after installing ESLint and Prettier, we no longer have to worry about styling issues and can focus on the functionality of our app.
In the next lesson we are going to add a design system to our app that will provide us with components such as
Thank you and see you in the next lesson!