@tisoap/eslint-config-ts-react NPM

@tisoap/eslint-config-ts-react

ESLint config for React based TypeScript projects.

Rules

This config assumes that your project uses:

A recent version of React with Hooks
A recent version of Typescript
Jest as your test runner
Testing Library as your test utils
Absolute imports with baseUrl

For the full list of rules, check the .eslintrc.js file in this repo.

Installation & Usage

With NPM:

npm install --save-dev eslint typescript @tisoap/eslint-config-ts-react @shopify/eslint-plugin @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-import eslint-plugin-jest-dom eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component eslint-plugin-sonarjs eslint-plugin-testing-library eslint-plugin-unicorn

With Yarn:

yarn add -D eslint typescript @tisoap/eslint-config-ts-react @shopify/eslint-plugin @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-plugin-import eslint-plugin-jest-dom eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component eslint-plugin-sonarjs eslint-plugin-testing-library eslint-plugin-unicorn

.eslintrc configuration:

module.exports = {
	parserOptions: {
		// Replace with the path to your project's tsconfig file
		project: './tsconfig.json'
	},
	extends: ['@tisoap/eslint-config-ts-react']
}

Usage With Prettier

You can skip this section if you don't plan on using Prettier on your project.

Install the plugin and config:

With NPM:

npm install prettier eslint-plugin-prettier eslint-config-prettier --save-dev

With Yarn:

yarn add -D prettier eslint-plugin-prettier eslint-config-prettier

Update your .eslintrc configuration:

module.exports = {
	parserOptions: {
		project: ['./tsconfig.json']
	},
	plugins: ['prettier'],
	extends: ['@tisoap/eslint-config-ts-react', 'plugin:prettier/recommended'],
	rules: {
		'prettier/prettier': ['error', {}, { usePrettierrc: true }]
	}
}

Add a .prettierrc file with your configurations.