Configuring prettier and eslint plugins for React from scratch

Anuradha Kumari
Nov 16 · 7 min read

Hi everyone, how are you? Today we are going to configure the prettier and eslint plugins for a React project from scratch.

Image for post
Image for post

We will be using VSCode as the default IDE, and all of the extension links in the below section will point to VSCode extensions. If you are using any other IDE, you can find respective extensions on the internet.

Let’s got through the steps one by one in the same order as below. Or, if you would like to check the final version of what we are going to discuss in the below section, go to the GitHub repo with complete settings.

Steps:

  1. Create an empty folder named react-setup (or anything that you would like).
  2. Run the below command to initialize an npm project:

It will create a package.json file with basic settings for us to get started with. You can always go ahead and update details in it, as per requirements.

3. Since we are going to create a react project, let’s install React and ReactDOM dependencies by running the below command:

4. It’s time now to add some code. Create a src directory inside the project, add few files with code as below:

  • index.html
  • app.js
  • style.css

5. Install parcel bundler to build the project and enable running it locally

You can use webpack as well for it, its configuration is out of scope for this article.

6. Add a dev script in package json for starting the local dev server:

Note: point it to the path of your index.html file. For my case, I have added it to the src directory, and hence that path. If you have it in your public directory, you need to add it as parcel public/index.html

7. Now let’s execute the dev command in the terminal:

You will see the local server running at URL http://localhost:1234. Go to this URL in the browser and you should see the content getting rendered.

8. Next, let’s install prettier by running the below command:

Here, we have used -D because we want to install prettier only as a dev dependency, and it is not required for the production version of our application.

9. After successful installation, we will see the entry for prettier being added to our package.json automatically:

10. We need to add the script to format the files by running the prettier. For this, let’s add a format command to scripts in package.json

Here, we are saying that run prettier on the files with extensions js, html or css.
— write flag is used to actually write the formatted code into the respective file. Otherwise, when we run format, it will just output the formatted version of our file.
Go ahead and execute the format command to check if your file got formatted:

11. By default, the files will get formatted when we run the format command on it. But what if the files could get formatted when we save the file, without needing to run the command again and again. Cool, right?

Well, we can achieve that through our IDE settings. For VSCode, follow the below steps to enable format on save:

  • Install prettier extension
  • Open vscode settings. Search for the “save on format” option and check it.
  • Search for “require config to format” and check it as well. This will format on save only if the prettier config is present for the current project, and this way we do not force our settings on all other projects which might not need the prettier.
  • Add the prettier config file by creating a file named .prettierrc and add an empty object inside it for now, which suggests that we are going to use all the default configurations of prettier. So, our .prettierrc file is going to look like below:
  • Now try to edit something in your app.js file and hit save. You will notice the file gets formatted automatically. That’s amazing, isn’t it?

12. Next, we are going to add eslint. Let’s start by adding the eslint plugin for prettier by executing the below command:

After successful installation, you will notice these dependencies get added to devDependencies section in package.json

13. Let's explore the difference between prettier and eslint before moving ahead with configuring eslint.

  • prettier: It is a code formatter. It deals with style issues like indentation, keyword spacing, missing semicolons, comma style, etc.
  • eslint: It concerns with the code quality rules like unused variables, incorrect variable names, etc. Eslint can catch bugs in code.
  • prettier and eslint complement each other, but there are some style rule conflicts between the two. This is why we have installed eslint-config-prettier. It helps in disabling all of eslint’s conflicting rules automatically.

14. Let’s add a file named .eslintrc for configuring the eslint for our project:

15. Now, let’s add the lint script in package json:

We use the quiet flag to ignore the warnings of eslint, otherwise, it might become too noisy.

16. Let’s also add the eslint extension for VSCode. If you are using any other IDE, you can check the extension for it too.

17. Now, we need to add the React specific eslint plugins. For that, we run the below command in the terminal:

Let’s break it up and see what each of these do:

ESLint’s default parser and core rules only support the latest final ECMAScript standard and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel.

babel-eslint is a parser that allows ESLint to run on source code that is transformed by Babel.

This plugin intends to support the linting of ES2015+ (ES6+) import/export syntax, and prevent issues with the misspelling of file paths and import names. All the goodness that the ES2015+ static module syntax intends to provide, marked up in your editor.

Explore the github repo for the elsint-plugin-import to gain more insights.

  • eslint-plugin-react : It contains React specific linting rules for ESLint. You can check the documentation for detailed rule information.
  • eslint-plugin-react-hooks : As the name suggests, it enforces the rules of React hooks. We need to add it only if we are using React hooks (which most of us might already be doing). Feel free to skip adding this plugin if you are by any chance not using React hooks in your project.
  • eslint-plugin-jsx-a11y : It is a static AST checker for accessibility rules on JSX elements. It supports many accessibility rules and it’s one of the must-have plugins for React in my opinion. Explore the GitHub documentation of plugin to learn more about the rules supported by this plugin.

18. After adding the plugins, it’s time now to update the .eslintrc config file:

19. Now, you should start seeing lint errors or warnings as you code further.

Success

Congratulations, you have successfully configured the basic prettier and eslint plugins for a React project. You can go ahead and add more rules as per specific project requirements. The npm website or GitHub repository of respective plugins would be the best place to explore the rules.

Credits: inspired from the learnings from the Complete React v5 course by Brian Holt on frontend masters.

If you found this useful, or have any suggestions, let me know in the comments. Also, feel free to reach out to me on twitter or linkedin.

Wish you happy learning, keep on shining. Always remember, you are the best 🙌

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Anuradha Kumari

Written by

Tech enthusiast, Development Specialist @teammediaocean. Creator of https://explore-a11y.netlify.app/ My motto — ‘Choose RIGHT over easy, always!’

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Anuradha Kumari

Written by

Tech enthusiast, Development Specialist @teammediaocean. Creator of https://explore-a11y.netlify.app/ My motto — ‘Choose RIGHT over easy, always!’

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store