eslint-config-ruppy-react ⚛🐤

Ruppy's eslint configs for React.js projects

Description

This eslint configurations is mostly follow and heavily inspired by Airbnb JavaScript Style Guide. Ruppy use prettier styles for formatting the codes. With that it mind, this configs extends prettier for linting javascript code styles with prettier.

ruppy-react

This is the default configs. It contains all eslint rules without deprecated and removed rules. It support for linting ES2015/ES6 - ESNext javascript syntax with assumption you have polyfill for ESNext syntax. It enforce linting for react and JSX.

ruppy-react/ts

This is the extension configs for typescript. This disable some rules not needed for TS (like props validation).

Usage

• The easiest way to add this configs into project is running this commands in your root project:

  npx eslint-ruppy -i
  

---

OR follow along these steps below:

• Install this configs and its peer dependencies.

  yarn add -D eslint-config-ruppy-react eslint prettier
  

  or

  npm install -D eslint-config-ruppy-react eslint prettier
  

• Create .eslintrc.js file in the root project and extends this configs. Also set the environment your project would live on.

  require("eslint-config-ruppy-react/patch");
  
  module.exports = {
    extends: ["ruppy-react"],
    env: {},
  };

  An environment defines global variables that are predefined. See eslint configurations guide for available environments.

• Optionally create prettier configuration file for the code styles, .prettierrc:

  {
    "overrides": [
      {
        "files": "*.{js,jsx,ts,tsx}",
        "options": {
          "singleQuote": true
        }
      }
    ]
  }

  See all available prettier options and how to write configuration files to see more info on that.

Hacking to the Gate~! 🎶