├── .gitignore ├── LICENSE.md ├── README.md ├── package.json └── src ├── config.js ├── index.js └── plugins.js /.gitignore: -------------------------------------------------------------------------------- 1 | # OSX 2 | .DS_Store 3 | 4 | # IntelliJ 5 | build/ 6 | .idea 7 | .gradle 8 | local.properties 9 | *.iml 10 | 11 | # node.js 12 | node_modules/ 13 | npm-debug.log 14 | yarn-error.log 15 | yarn.lock 16 | 17 | # VSCode 18 | .vscode 19 | 20 | # JSconfig 21 | jsconfig.json 22 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Matteo Mazzarolo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![npm version](https://badge.fury.io/js/eslint-plugin-react-app.svg)](https://badge.fury.io/js/eslint-plugin-react-app) 2 | 3 | # eslint-plugin-react-app 4 | 5 | A minimal set of easy to install ESLint rules for your project: just install a single NPM package, add it to your `.eslintrc`, and you'll be all set. 6 | 7 | > This plugin exposes [the ESLint configuration used by Create React App](https://github.com/facebook/create-react-app/tree/master/packages/eslint-config-react-app) without the need of declaring all its dependencies. 8 | Use it if you need a simple and tested ESLint configuration but you don't want to install a bunch of dependencies. 9 | It also works in React Native out of the box. 10 | 11 | ## Setup 12 | 13 | 1. Install it using npm: `npm install --development eslint eslint-plugin-react-app`. 14 | 2. Extend `plugin:react-app/recommended` in your `.eslintrc`. 15 | 16 | Example `.eslintrc`: 17 | 18 | ```json 19 | { 20 | "extends": ["plugin:react-app/recommended"] 21 | } 22 | ``` 23 | 24 | 3. You're done! 25 | 26 | ## Optional - Configuring the rules 27 | 28 | If you want to change a rule of an included plugin (for example of `eslint-plugin-react`) you must prefix the rule with `react-app/` (for preventing namespace collisions). 29 | For example: 30 | 31 | ```json 32 | { 33 | "extends": ["plugin:react-app/recommended"], 34 | "rules": { 35 | "react-app/react/react-in-jsx-scope": ["warn"] 36 | } 37 | } 38 | ``` 39 | 40 | ## Optional - Adding Prettier 41 | 42 | This plugin works nicely alongside [Prettier](https://prettier.io/). 43 | Install it with `npm install --development prettier eslint-config-prettier eslint-plugin-prettier`. 44 | And setup your `.eslintrc` this way: 45 | 46 | ```json 47 | { 48 | "extends": ["react-app", "plugin:prettier/recommended"], 49 | "plugins": ["prettier"] 50 | } 51 | 52 | ``` 53 | 54 | ## Included plugins   55 | 56 | The currently included create-react-app plugins are the following: 57 | 58 | - [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import) 59 | - [eslint-plugin-flowtype](https://github.com/gajus/eslint-plugin-flowtype) 60 | - [eslint-plugin-jsx-a11y](https://github.com/evcohen/eslint-plugin-jsx-a11y) 61 | - [eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) 62 | - [eslint-plugin-react-hooks](https://www.npmjs.com/package/eslint-plugin-react-hooks) 63 | - [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint) 64 | 65 | ## Acknowledgements 66 | 67 | Thanks to [fson](https://github.com/fson) and its [Create React App pull request](https://github.com/facebookincubator/create-react-app/pull/993) for the initial idea of this plugin. 68 | Thanks to [gaeron](https://github.com/gaearon) and everyone who contributed to Create React App. 69 | 70 | ## Disclaimer 71 | 72 | This project is not officially maintained (nor officially "supported") by the Create React App team. 73 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "eslint-plugin-react-app", 3 | "version": "6.2.2", 4 | "description": "ESLint configuration used by Create React App", 5 | "repository": "mmazzarolo/eslint-plugin-react-app", 6 | "license": "MIT", 7 | "main": "src/index.js", 8 | "files": [ 9 | "src/" 10 | ], 11 | "dependencies": { 12 | "@typescript-eslint/eslint-plugin": "2.x", 13 | "@typescript-eslint/parser": "2.x", 14 | "babel-eslint": "10.x", 15 | "eslint-config-react-app": "^5.2.1", 16 | "eslint-plugin-flowtype": "3.x || 4.x", 17 | "eslint-plugin-import": "2.x", 18 | "eslint-plugin-jsx-a11y": "6.x", 19 | "eslint-plugin-react": "7.x", 20 | "eslint-plugin-react-hooks": "1.x || 2.x" 21 | }, 22 | "peerDependencies": { 23 | "eslint": "6.x" 24 | }, 25 | "devDependencies": { 26 | "prettier": "^1.17.0" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | const plugins = require("./plugins"); 3 | const reactAppConfig = require("eslint-config-react-app"); 4 | 5 | const rules = {}; 6 | 7 | // Is the rule part of an eslint plugin? 8 | const isPluginRule = ruleName => { 9 | for (const plugin of plugins) { 10 | if (ruleName.indexOf(`${plugin.rulePrefix}/`) !== -1) { 11 | return true; 12 | } 13 | } 14 | return false; 15 | }; 16 | 17 | // Renames the plugins rules prefixing them with 'react-app' 18 | Object.keys(reactAppConfig.rules).forEach(ruleName => { 19 | if (isPluginRule(ruleName)) { 20 | rules[`react-app/${ruleName}`] = reactAppConfig.rules[ruleName]; 21 | } else { 22 | rules[ruleName] = reactAppConfig.rules[ruleName]; 23 | } 24 | }); 25 | 26 | module.exports = { 27 | parser: reactAppConfig.parser, 28 | plugins: ["react-app"], 29 | rules, 30 | settings: reactAppConfig.settings, 31 | env: reactAppConfig.env, 32 | root: reactAppConfig.root, 33 | parserOptions: reactAppConfig.parserOptions, 34 | overrides: reactAppConfig.overrides 35 | }; 36 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | const config = require("./config"); 3 | const plugins = require("./plugins"); 4 | 5 | const rules = {}; 6 | 7 | // Requires and sets the rules of the eslint-plugins used by create-react-app. 8 | plugins.forEach(plugin => { 9 | try { 10 | const pluginModule = require(plugin.name) 11 | Object.keys(pluginModule.rules).forEach(ruleName => { 12 | rules[`${plugin.rulePrefix}/${ruleName}`] = pluginModule.rules[ruleName] 13 | }) 14 | } catch (err) { 15 | // If the user doesn't have typescript installed skip the @typescript-eslint 16 | // rules setup. The other JS rules will still work correctly. 17 | const isTypescriptMissing = 18 | err.message.indexOf(`Cannot find module 'typescript'`) > -1 && 19 | plugin.rulePrefix === "@typescript-eslint" 20 | if (!isTypescriptMissing) { 21 | throw err 22 | } 23 | } 24 | }) 25 | 26 | module.exports = { 27 | configs: { 28 | recommended: config 29 | }, 30 | rules 31 | }; 32 | -------------------------------------------------------------------------------- /src/plugins.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = [ 4 | { name: "eslint-plugin-import", rulePrefix: "import" }, 5 | { name: "eslint-plugin-flowtype", rulePrefix: "flowtype" }, 6 | { name: "eslint-plugin-jsx-a11y", rulePrefix: "jsx-a11y" }, 7 | { name: "eslint-plugin-react", rulePrefix: "react" }, 8 | { name: "eslint-plugin-react-hooks", rulePrefix: "react-hooks" }, 9 | { name: "@typescript-eslint/eslint-plugin", rulePrefix: "@typescript-eslint" } 10 | ]; 11 | --------------------------------------------------------------------------------