loading...
Cover image for 🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦

🍿 Publish your own ESLint / Prettier config for React Projects on NPM 📦

viclafouch profile image Victor de la Fouchardière ・3 min read

Hello guys! 👨‍💻

You probably know ESLint and Prettier, but do you have your own configuration for your React projects? 💪

VSCode Eslint

VS Code + Prettier + ESLint

A quick reminder 🧠

ESLint 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.

Prettier 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 in order to save your configuration and to modify your rules when you want.

By convention, 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

Create the repository

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

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

Prettier config 🔸

Then, to custom your Prettier configuration, just add an object representing options to your custom rules. These options will be passed into prettier.

Prettier config

Example of my Prettier config

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

Publish your config on NPM 🚀

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

package.json metadata

Example with my own config

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

Example with my own config

Finally, you can add two scripts to your package.json to lint and/or fix your code:

Lint/fix your code

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

GitHub logo viclafouch / eslint-config-viclafouch

🛠 These are my settings for ESLint and Prettier in a react project

Voilàà

Cheers 🍻 🍻 🍻

If you enjoyed this article you can follow me on Twitter or here on dev.to where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Posted on by:

viclafouch profile

Victor de la Fouchardière

@viclafouch

🐦 Frontend developer and technical writer based in France. I love teaching web development and all kinds of other things online 🤖

Discussion

markdown guide
 

If you have your own custom config, do not hesitate to share it ! 🍿

 

I haven't published mine yet, I am still polishing it. I hope for it one day to be useful not just for myself: github.com/katawaredev/config

 

Really nice!! I can't start a project without first setting lint and prettier 😂