@mgtitimoli / eslint-config-react

An ESLint Shareable Config to be used on projects that use React

Installation

$ npm install --save-dev \
eslint \
eslint-plugin-react \
@mgtitimoli/eslint-config-react

:scream: What?! Why I also need to install all these packages?!

I completely understand your feeling, so let me briefly enumerate the reasons of why they are required:

• eslint

I guess you won't be here if you did not know ESLint, but just in case, taken for their page:

ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, its goal is to provide a pluggable linting utility for JavaScript.

• eslint-plugin-react

This is the THE GUY :sunglasses: in this config; all of the rules specified here are from this excellent plugin

Usage

General

ESLint allows being configured using a widely amount of flavours, but I personally find the followings very practical:

• Place all the settings under an eslintConfig entry in your package.json:

{
    "name": "my-awesome-project",
    "eslintConfig": {
        "extends": "@mgtitimoli/eslint-config-react"
    }
}

• Create an .eslintrc.json to hold all the configuration:

{
    "extends": "@mgtitimoli/eslint-config-react"
}

Custom

This configuration, at the same time, extends the following configurations:

• Provided by eslint-plugin-react
  • plugin:react/recommended, that enables the following rules:
    • display-name
    • jsx-no-duplicate-props
    • jsx-no-undef
    • jsx-uses-react
    • jsx-uses-vars
    • no-danger
    • no-deprecated
    • no-did-mount-set-state with allow-in-func option
    • no-did-update-set-state with allow-in-func option
    • no-direct-mutation-state
    • no-is-mounted
    • no-unknown-property
    • prop-types
    • react-in-jsx-scope
• Provided by us
  • @mgtitimoli/eslint-config/general
  • @mgtitimoli/eslint-config/jsx

You can pick just the one(s) that you need, specifying them as follows:

• For example, if you would want to use only jsx configuration, then your .eslintrc.json should contain:

{
    "extends": "@mgtitimoli/eslint-config/jsx"
}

Other configurations

You might also be interested in the following configurations:

• @mgtitimoli/eslint-config: Native rules
• @mgtitimoli/eslint-config-babel: Enables the integration with Babel

License

Unlicense