|
1 | | -# @fieryeagle/eslint-config-react |
2 | | - |
3 | | -Common eslint + prettier config for React that comes with most dependencies and a patch package to allow minimal setup in userland. |
4 | | - |
5 | | -## Usage |
6 | | - |
7 | | -- add packages `yarn add -D @fieryeagle/eslint-config-react @rushstack/eslint-patch` |
8 | | -- create .eslintrc.js |
9 | | - |
10 | | -``` |
11 | | -require("@rushstack/eslint-patch/modern-module-resolution"); |
12 | | -module.exports = { |
13 | | - extends: ['@cheshirecode/eslint-config-react'], |
14 | | - parserOptions: { tsconfigRootDir: __dirname } |
15 | | -}; |
16 | | -``` |
17 | | -- create .prettier.js |
18 | | -``` |
19 | | -const prettierConfig = require('@fieryeagle/eslint-config-react/.prettierrc'); |
20 | | - |
21 | | -module.exports = prettierConfig;const prettierConfig = require('@fieryeagle/eslint-config-react/.prettierrc.js'); |
22 | | - |
23 | | -module.exports = prettierConfig; |
| 1 | +# @fieryeagle/eslint-config-react |
| 2 | + |
| 3 | +Common eslint + prettier config for React that comes with most dependencies and a patch package to allow minimal setup in userland. |
| 4 | + |
| 5 | +## Why? |
| 6 | + |
| 7 | +Initial setup of linting and formatting get repeated over and over across codebases and teams, wasting alot of time and maintenance with duplicated then diverged configs. This package brings together: |
| 8 | + - [eslint-config-react-app](https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app) |
| 9 | + - [@typescript-eslint/parser](https://typescript-eslint.io/docs/linting/) |
| 10 | + - [eslint-plugin-prettier](https://github.com/prettier/eslint-config-prettier) |
| 11 | + |
| 12 | +to reduces package.json clutter from |
| 13 | +``` |
| 14 | + "@typescript-eslint/eslint-plugin": "^5", |
| 15 | + "@typescript-eslint/parser": "^5", |
| 16 | + "babel-eslint": "^10.1.0", |
| 17 | + "eslint": "^7.12.0", |
| 18 | + "eslint-config-prettier": "^8.3.0", |
| 19 | + "eslint-config-react-app": "^6.0.0", |
| 20 | + "eslint-plugin-flowtype": "^5.2.0", |
| 21 | + "eslint-plugin-import": "^2.24.2", |
| 22 | + "eslint-plugin-jsx-a11y": "^6.4.1", |
| 23 | + "eslint-plugin-prettier": "^4.0.0", |
| 24 | + "eslint-plugin-react": "^7.26.1", |
| 25 | + "eslint-plugin-react-hooks": "^4.2.0", |
| 26 | + "prettier": "^2.6.2", |
| 27 | + "typescript": "^4.6.4" |
| 28 | +``` |
| 29 | +to |
| 30 | +``` |
| 31 | + "@fieryeagle/eslint-config-react": "^0.0.5", |
| 32 | + "@rushstack/eslint-patch": "^1.1.3", |
| 33 | +``` |
| 34 | +and simplifies config down to few lines of code ([example](#usage)). This is possible thanks to the workaround provided by [@rushstack/eslint-patch](https://www.npmjs.com/package/@rushstack/eslint-patch) |
| 35 | +``` |
| 36 | +This patch is a workaround for a longstanding ESLint feature request that would allow a shared ESLint config to bring along its own plugins, rather than imposing peer dependencies on every consumer of the config. In a monorepo scenario, this enables your lint setup to be consolidated in a single NPM package. Doing so greatly reduces the copy+pasting and version management for all the other projects that use your standard lint rule set, but don't want to be bothered with the details. |
| 37 | +``` |
| 38 | + |
| 39 | +## Usage |
| 40 | + |
| 41 | +- add packages `yarn add -D @fieryeagle/eslint-config-react @rushstack/eslint-patch` |
| 42 | +- create .eslintrc.js |
| 43 | + |
| 44 | +``` |
| 45 | +require("@rushstack/eslint-patch/modern-module-resolution"); |
| 46 | +module.exports = { |
| 47 | + extends: ['@cheshirecode/eslint-config-react'], |
| 48 | + parserOptions: { tsconfigRootDir: __dirname } |
| 49 | +}; |
| 50 | +``` |
| 51 | +- create .prettier.js |
| 52 | +``` |
| 53 | +const prettierConfig = require('@fieryeagle/eslint-config-react/.prettierrc'); |
| 54 | + |
| 55 | +module.exports = prettierConfig;const prettierConfig = require('@fieryeagle/eslint-config-react/.prettierrc.js'); |
| 56 | + |
| 57 | +module.exports = prettierConfig; |
24 | 58 | ``` |
0 commit comments