Shared ESLint configuration for React projects written in TypeScript

This ESLint configuration is tailored for projects written in TypeScript and React. It deactivates all formatting rules of ESLint to let Prettier be in charge of formatting.

Integrate into new project

1. Install this package as a devDependency

   # with Yarn
   $ yarn add -D @kapeta/eslint-config
   
   # with npm
   $ npm i -D @kapeta/eslint-config
   
   # with pnpm
   $ pnpm add -D @kapeta/eslint-config

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

   You can make use of the tool install-peerdeps:

   # with Yarn
   $ yarn dlx install-peerdeps --dev @kapeta/eslint-config
   
   # with npm
   $ npx install-peerdeps --dev @kapeta/eslint-config
   
   #with pnpm
   $ pnpm dlx install-peerdeps --dev @kapeta/eslint-config

3. Use ESLint config in your project

   Create a tsconfig.eslint.json file in project root with the following content:

   {
       "extends": "./tsconfig.json",
       "include": [
           ".eslintrc.js"
           // Add other files that should be linted (probably the same as in tsconfig.json)
       ]
   }

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

   module.exports = {
       extends: ['@kapeta/eslint-config'],
       env: {
           node: true,
       },
       parserOptions: {
           project: `${__dirname}/tsconfig.eslint.json`,
           tsconfigRootDir: __dirname,
       },
   };