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
-
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
-
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
-
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, }, };