@inrupt/eslint-config-react

eslint-config-inrupt-react

Eslint and prettier configs

Installation

1. npm install --save-dev @inrupt/eslint-config-react @rushstack/eslint-patch

Setup (Quick start)

Create a .eslintrc.js in the the root of your project with the following contents:

require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  extends: ["@inrupt/eslint-config-react"],
  parserOptions: {
    project: "./tsconfig.eslint.json",
  },
  rules: {},
};

The file tsconfig.eslint.json is your typescript configuration with the e2e tests, unit tests and examples included, e.g.,

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*.ts", "e2e/**/*.ts", "*.md"],
  "exclude": ["**/node_modules", "**/dist/**"]
}

For typescript projects:

require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
  root: true,

  extends: [
    "@inrupt/eslint-config-react",
    "@inrupt/eslint-config-lib",
    "plugin:import/typescript",
  ],

  parserOptions: {
    project: "./tsconfig.eslint.json",
  },

  // These settings and the `plugin:import/typescript` are required until we add
  // this configuration to our @inrupt/eslint-config-lib base
  settings: {
    "import/parsers": {
      "@typescript-eslint/parser": [".ts", ".tsx"],
    },
    "import/resolver": {
      typescript: {
        alwaysTryTypes: true,
        project: "./tsconfig.eslint.json",
      },
    },
  },

  rules: {
    "react/jsx-filename-extension": [
      "error",
      {
        extensions: [".tsx"],
      },
    ],
  },
};

Migrating to this configuration:

1. Add extends: ['@inrupt/eslint-config-react'] to your .eslintrc.js file.
2. Add the following line to the top of the .eslintrc.js file:

require("@rushstack/eslint-patch/modern-module-resolution");

Rules

Exhaustive documentation forthcoming. For now, the general principles are:

• Load a stylistic base set - in this case, airbnb and airbnb/hooks
• Load inrupt-base, which loads recommended configs for common libraries: eslint, jest, typescript, and prettier
• Do very little else- as few custom rules or overrides as possible.
• Some rules are updated to work with nextjs.