@doppelmutzi/eslint-config-react

Shared ESLint configuration for React projects

This ESLint configuration deactivates all formatting rules of ESLint and makes sure that Prettier is used for code beautifying. If you want to find out more about this approach, feel free to read my articles on this topic:

• Efficient Code Analyzing and Formatting (for Vue.js) with ESLint and Prettier
• Efficient Code Analyzing and Formatting (for React) with ESLint, Prettier and VSCode – 2020 Edition
• Kick-Starting a Sophisticated ESLint and Prettier Workflow with Vue CLI 3 in a few Minutes

Integrate into new project

1. Install this package as devDependency

# with Yarn
$ yarn add -D @doppelmutzi/eslint-config-react

# with npm
$ npm i -D @doppelmutzi/eslint-config-react

# with pnpm
$ pnpm add -D @doppelmutzi/eslint-config-react

2. Install peer dependencies of this package in your project as devDependencies

Therefore, you can make use of the tool install-peerdeps:

# with Yarn
$ yarn dlx install-peerdeps --dev @doppelmutzi/eslint-config-react

# with npm
$ npx install-peerdeps --dev @doppelmutzi/eslint-config-react

#with pnpm
$ pnpm dlx install-peerdeps --dev @doppelmutzi/eslint-config-react

Instead, you can do this manually my adding all entries part of the peerDependencies property (see package.json).

3. Use ESLint config in your project

Create a .eslintrc.js file in project root with the following content:

module.exports = {
  extends: ["@doppelmutzi/eslint-config-react"],
};