Hello guys! 👨💻
In this article, we will see how to create your own ESLint + Prettier configuration in order to reuse it in your own React apps ! 🔥
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
Let's start our configuration for our React projects.
First, add your ESLint dependencies 💪. The packages below will change according of what you want.
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).
package.json should now look like this:
Next, let's create a
.eslintrc.js file and add the ESLint plugins that apply certain rules (for React, React Hooks, ...) to our configuration.
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
The next step is to create an
index.js file to export your configuration to your React applications.
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 🥳
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!
Cheers 🍻 🍻 🍻