How to integrate Eslint & Prettier in React

Muhammad Kamran
Aug 10, 2018 · 3 min read

You have heard of Eslint & Prettier and how awesome are they if not then you can read here and here, today we are going to learn how we can integrate into React.

Create React App

to create react app you can use create-react-app package from npm so first thing to do is install it therefore start terminal and run below command.

sudo npm i -g create-react-app

Then to create app, run below command, take note it will create folder with the project name so you don’t need to do that.

create-react-app projectName

now move in the folder and start the app using below command, take note you don’t need to run yarn or npm install as it already did for you.

cd projectName 
yarn start or npm start

Install Eslint and Prettier

Second thing to do is installation so run below commands!

Eslint, it’s configuration by Airbnb and it’s required packages…

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

Prettier, it’s configuration to avoid conflict with Eslint and it’s required packages…

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

Now to stop letting user committing 💩 into the repository we will install below packages.

npm i -D husky lint-staged pretty-quick

husky: Will run npm script before the committing the code.

lint-staged: Will run custom script on the filtered files by the extensions like .js or .jsx

pretty-quick: Will prettify your code.

Add scripts in Packages.json

Add below script in packages.json file.

Below script will run before commit and run our custom scripts lint-staged.

"precommit": "NODE_ENV=production lint-staged"

Below script will first run, pretty quick to format code if something does not on standard, then eslint will check the code agains the eslint rules and give errors if any came and stop commiting the code and finally adding files to stage so that it could be also be commit.

"lint-staged": {  "*.{js,jsx}": [    "pretty-quick --staged",    "eslint src/ --fix",    "git add"  ]}

Set the Rules

Now everything is installed and setup, you need to setup the rules for both.

Eslint

For eslint create .eslintrc file on the root and add below.

Prettier

For Prettier create .prettierrc file on the root and add below.

All set now, you can play with code and see how this come out.

Bouns Tips

You can install extensions in your favourite IDE or code editor to highlight the eslint error and auto format the code accordingly to the rules you set.

My favourite is code editor is Visual Studio Code and this is how you can setup vscode.

Extensions

First thing first to add support for Eslint and Prettier, you need to install below two extensions.

  1. Eslint
  2. Prettier

Settings

There are some settings you have to do for making these extensions workable.

Thank you very much for reading and don’t forget to clap if you like this tutorial, put some stars on the gist if you like those too.

I have recently uploaded my workshop videos on youtube about the freelancing using Upwork and Fiverr, here are the links.

  1. Upwork
  2. Fivver

Also I have done some open source projects, It’s highly appreciable if you try and give you feedback.

Angular Material Snippets for Atom

Material Design Lite Snippets for Visual Studio Code

Bolt Language Support for Visual Studio Code

Tabs in Cloud — Chrome Extension

To know more about me checkout kamranqadri.me you can follow me and devncode here.

Facebook: https://www.facebook.com/smkamranqadri 
Twitter: https://twitter.com/smkamranqadri
Github: https://github.com/smkamranqadri
Facebook: https://www.facebook.com/devncode17
Twitter: https://twitter.com/devncode17
LinkedIn: https://www.linkedin.com/company/devn...
Github: https://github.com/devncode
Medium: https://medium.com/devncode
Youtube: https://www.youtube.com/channel/UC0_W...

Quick Code

Find the best tutorials and courses for the web, mobile…

Sign up for Developer Updates

By Quick Code

Receive weekly updates about new posts on programming, development, data science, web development and more Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Quick Code

Find the best tutorials and courses for the web, mobile, chatbot, AR/VR development, database management, data science, web design and cryptocurrency. Practice in JavaScript, Java, Python, R, Android, Swift, Objective-C, React, Node Js, Ember, C++, SQL & more.

Muhammad Kamran

Written by

Javascript Consultant | Social Entrepreneur | Community Evangelist | influencer | Mentor

Quick Code

Find the best tutorials and courses for the web, mobile, chatbot, AR/VR development, database management, data science, web design and cryptocurrency. Practice in JavaScript, Java, Python, R, Android, Swift, Objective-C, React, Node Js, Ember, C++, SQL & more.

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