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

Hello guys! 👨‍💻

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

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.

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:

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.

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.

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.

Publish your config on NPM 🚀

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

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):

Finally, you can add two scripts to your package.json to lint and/or 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!

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.

🤝 Promise.allSettled() VS Promise.all() in JavaScript 🍭

Victor de la Fouchardière ・ Aug 16 '20 ・ 2 min read

#javascript #node #webdev #beginners

📦 GitHub Profile: The RIGHT Way to Show your latest DEV articles + BONUS 🎁

Victor de la Fouchardière ・ Aug 5 '20 ・ 4 min read

#github #markdown #showdev #productivity