🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦
Tags: javascript, react, npm, eslint
Published: 2020-08-24 09:23:08

Hello guys! 👨‍💻

You probably know [ESLint](https://eslint.org) and [Prettier](https://prettier.io), but do you have __your own configuration__ for your __React__ projects? 💪

![VSCode Eslint](https://dev-to-uploads.s3.amazonaws.com/i/vrn2j6ewerdkpbuyrmz8.gif)
<figcaption>VS Code + Prettier + ESLint</figcaption>

## A quick reminder 🧠

> [ESLint](https://eslint.org) is a static code analysis tool for identifying problematic patterns found in JavaScript code. You can configure ESLint to fix all the problems in a file when this file is saved.

<p/>

> [Prettier](https://prettier.io) is an opinionated code formatter that supports a lot of different programming languages, like: JavaScript; JSON; JSX; CSS; Markdown. Prettier will make your code look good without you ever having to dabble in the formatting. I estimate the time saved thanks to Prettier at about 1 hour a day.

In this article, we will see __how to create your own ESLint + Prettier configuration__ in order to reuse it in your own __React apps__ ! 🔥 

Example : https://github.com/viclafouch/eslint-config-viclafouch

## 1. Create the repository ✏️

First of all, I advise you to [create a repository](https://github.com/new) in order to save your configuration and to modify your rules when you want.

[By convention](https://eslint.org/docs/developer-guide/shareable-configs), the module name begins with __eslint-config-__, such as __eslint-config-foo__. For example __eslint-config-viclafouch__ (it's my username) or __eslint-config-react__.

![GitHub create](https://dev-to-uploads.s3.amazonaws.com/i/g1grr443njm96ui4pwtm.png)
<figcaption>Create the repository</figcaption>

Then, __clone the new repository__ into your local disk. 

```
git clone https://github.com/$USERNAME/eslint-config-$USERNAME.git
```

## 2. Create an ESLint configuration 🧰

Let's start our configuration for our React projects. 

First, __add your ESLint dependencies__ 💪. The packages below will change according of what you want.

- babel-eslint
- eslint
- prettier
- eslint-config-prettier
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-jsx-a11y

Just copy/past 🗒 the following command:

```
npm install -D eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y babel-eslint
```

> ℹ️ The documentation mentions that if your shareable config depends on a plugin, you __should also specify it as a peerDependency__ (plugins will be loaded relative to the end user's project, so the end user is required to install the plugins they need).

Your `package.json` should now look like this:

![package json](https://dev-to-uploads.s3.amazonaws.com/i/nzcg5vij14h7gpezhc38.png)

### ESLint config 🔹

Next, let's create a `.eslintrc.js` file and add the ESLint plugins that apply certain rules (for React, React Hooks, ...) to our configuration.

![Eslint react config](https://dev-to-uploads.s3.amazonaws.com/i/c7818vaelapvohs3h7aa.png)

### Prettier config 🔸

Then, to custom your Prettier configuration, just add an object representing [options](https://prettier.io/docs/en/options.html) to your custom `rules`. These options will be passed into prettier.

![Prettier config](https://dev-to-uploads.s3.amazonaws.com/i/mdk7b1eplrf6vvpcfvjq.png)
<figcaption>Example of my Prettier config</figcaption>

You can find a simple example of my configuration here: https://github.com/viclafouch/eslint-config-viclafouch

## Export your config 💡

The next step is to create an `index.js` file to export your configuration to your React applications.

![export eslint](https://dev-to-uploads.s3.amazonaws.com/i/4y6l3efvs4pc9r1eejhm.png)

## Publish your config on __NPM__ 🚀

Before publishing your configuration, make sure to give good metadata like the *name*, *keywords*, *description* ...

![package.json metadata](https://dev-to-uploads.s3.amazonaws.com/i/3bwbr6n3efsu60m8tf98.png)
<figcaption>Example with my own config</figcaption>

If everything looks fine, you can publish to the NPM registry 🥳

```
npm publish
```

## Import your config into your React Apps 🎉

First, we need to install everything needed by the config:

**Example with my own config**:

```
npx install-peerdeps --dev @viclafouch/eslint-config-viclafouch
```

Then, create a `.eslintrc.js` file in the root of your project's directory. My `.eslintrc.js` file looks like this (be sure to extend with your own configuration): 

![viclafouch eslint](https://dev-to-uploads.s3.amazonaws.com/i/absgj7zau3lokmjts0r1.png)
<figcaption>Example with my own config</figcaption>
 
Finally, you can add two __scripts__ to your __package.json__ to lint and/or fix your code:

![Lint/fix your code](https://dev-to-uploads.s3.amazonaws.com/i/zuie8zkjj0u8uchqlmqd.png)

Now you have your own config available on __NPM__, ready to be used in your React projects, and editable at any time!

{% github viclafouch/eslint-config-viclafouch no-readme %}

*Voilàà*

Cheers 🍻 🍻 🍻 

If you enjoyed this article you can follow me on [Twitter](https://twitter.com/TrustedSheriff "TrustedSheriff") or here on [dev.to](https://dev.to/viclafouch) where I regularly post bite size tips relating to HTML, CSS and JavaScript.

{% link https://dev.to/viclafouch/promise-allsettled-vs-promise-all-in-javascript-4mle %}

{% link https://dev.to/viclafouch/github-profile-the-right-way-to-show-your-latest-dev-articles-bonus-398m %}