Streamlining ESLint and Prettier Configurations for Reusability
When working on multiple projects, it’s common to find yourself duplicating ESLint and Prettier settings. This approach can lead to a maintenance problem, especially when you need to make changes to your rule set regularly. In this article, we’ll explore how to bundle your ESLint and Prettier configurations into custom npm packages, making it easier to reuse them across projects.
The Benefits of a DRY Approach
By creating a single source of truth for your ESLint and Prettier configurations, you’ll reduce the effort required to maintain them. This approach allows you to make changes in one place and have them reflected across all your projects. Moreover, you can add or override rules, as well as add project-specific configurations.
Creating a Shared ESLint Configuration
To create a shared ESLint configuration, you’ll need to create a new npm package. Let’s take a look at the package.json file for our ESLint configuration package:
json
{
"name": "@doppelmutzi/eslint-config-react",
"version": "1.0.0",
"main": "eslint-config.js",
"peerDependencies": {
"eslint": "^7.2.0"
},
"publishConfig": {
"access": "public"
},
"scripts": {
"publish-manual": "npm publish"
}
}
The eslint-config.js file contains our ESLint configuration:
javascript
module.exports = {
// Our ESLint configuration goes here
};
To publish our package, we can run the publish-manual script.
Creating a Shared Prettier Configuration
Similarly, we can create a shared Prettier configuration package. Our package.json file will look like this:
json
{
"name": "@doppelmutzi/prettier-config",
"version": "1.0.0",
"main": "prettier-config.json",
"peerDependencies": {
"prettier": "^2.1.0"
},
"publishConfig": {
"access": "public"
},
"scripts": {
"publish-prettier-config": "npm publish"
}
}
Our prettier-config.json file contains our Prettier configuration:
json
{
// Our Prettier configuration goes here
}
Using Shared Libraries in React Projects
To use our shared libraries in a React project, we’ll need to install them as dependencies. We can do this by running the following command:
bash
npm install @doppelmutzi/eslint-config-react @doppelmutzi/prettier-config
Next, we’ll need to install the peer dependencies for each library. We can use the install-peerdeps package to do this.
Finally, we’ll need to set up our configuration files. For ESLint, we can create a .eslintrc.js file with the following content:
javascript
module.exports = require('@doppelmutzi/eslint-config-react');
For Prettier, we can create a .prettierrc file with the following content:
json
{
"extends": ["@doppelmutzi/prettier-config"]
}
Configuring VS Code and IntelliJ
To get the most out of our shared libraries, we’ll need to configure our IDEs. In VS Code, we can add the following configuration to our settings.json file:
json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
In IntelliJ, we can go to the Code Quality Tools section of the Preferences menu and select Automatic ESLint configuration. We can also check Run eslint –fix on save.
By following these steps, we can streamline our ESLint and Prettier configurations and make them reusable across projects. This approach will save us time and effort in the long run, and help us maintain a consistent code style across our projects.