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:

  1. Select package manager: (in my case it is npm)

  2. Select configuration file format: (I recommend using .js)

  3. Enter max line length: (80 is the most common and recommended)

  4. 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 .prettierrc and .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 test is assigned a value but never used. This helps us to avoid defining variables that are never used in our code and yet take up memory. The error is linted by the Prettier rule that removes any unnecessary semi-colons to make our code cleaner and more readable. I know that it might be surprising to some of you but in JavaScript semi-colons are not really necessary in most cases.

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 <Buttons/> and <TextInputs/>.

Thank you and see you in the next lesson!

Start a new discussion. All notification go to the author.