NexusUI ESLint Config

This is a Shareable Configuration for ESLint. This is the configuration used in all NexusUI packages and contains linting rules that we recommend for all NexusUI applications.

This ESLint configuration is based off of the airbnb, airbnb-typescript and react-app recommended rules, it covers javascript, typescript, jsx-a11y, react, react-hooks, jest and testing-library.

Installation

First, add the necessary peer dependencies to your to your project's devDependencies:

# With yarn
yarn add --dev eslint

# With npm
npm install --save-dev eslint

Second, add the NexusUI eslint config library as a devDependency to your project:

# With yarn
yarn add --dev @nexusui/eslint-config

# With npm
npm install --save-dev @nexusui/eslint-config

Third, if add eslint-config-prettier and eslint-plugin-prettier which will disable ESLint rules that conflict with prettier rules (prettier rules will take precedence over ESLint) if combining eslint and prettier. Otherwise, it is optional.

# With yarn
yarn add --dev eslint-config-prettier eslint-plugin-prettier

# With npm
npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Usage

Create a configuration file .eslintrc.json in the root directory and fill in the details here.

Basic

In the simplest case, you can simply extend the @nexusui eslint config:

{
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true
  },
  "extends": ["@nexusui"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json"]
  },
}

Popular Rule Extensions

You may wish to define your own additional rules or tweak some of the recommended settings. Some popular additions are shown below:

Combine with prettier， add prettier-config and prettier to disable ESLint rules that conflict with prettier rules.
Override the necessary rules for your project.

{
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true
  },
  "extends": ["@nexusui", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": [
      "warn",
      {
        "endOfLine": "auto"
      }
    ],

    // override rules as necessary
    "import/no-anonymous-default-export": "off",
    "import/no-relative-packages" : "off",
    "import/no-dynamic-require": "off",

    // https://mui.com/material-ui/guides/minimizing-bundle-size/#option-one-use-path-imports
    "@typescript-eslint/no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "lodash",
            "message": "Import [module] from lodash/[module] instead"
          },
          {
            "name": "@mui/material",
            "message": "Import [module] from @mui/material/[module] instead"
          },
          {
            "name": "@mui/icons-material",
            "message": "Import [module] from @mui/icons-material/[module] instead"
          }
        ]
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.stories.tsx"],
      "rules": {
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-restricted-imports": "off"
      }
    },
    {
      "files": ["*.test.ts", "*.test.tsx"],
      "rules": {
        "@typescript-eslint/no-unused-expressions": "off",
        "@typescript-eslint/no-unused-vars": "off",
        "@typescript-eslint/no-restricted-imports": "off"
      }
    }
  ]
}

Scripts

Update the package.json file to add eslint scripts.

// package.json
"scripts": {
  "lint": "eslint .",
  "lint-and-fix": "eslint . --fix",
}

Migration Guide

0.X.X -> 1.0.0

If you were using version 0.x.x before and plan to upgrade to version 1.0.0, please read the update below carefully.

1) `google` lint was removed

2) `prettier` lint was removed

We removed eslint-config-prettier and eslint-plugin-prettier from package. As prettier config is often used as the last item to disable ESLint rules that conflict with prettier rules. Putting it in the package loses the flexibility of expansion, so it needs to be used at the app layer now.

3） `airbnb` and `airbnb-typescript` lint were added

We replaced google lint to airbnb lint, as google lint archived on Jan 11, 2023. airbnb lint includes full ECMAScript 6+ rules and it's a popular and continuously maintained rule base.

// before (0.x.x)
{
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true
  },
  "extends": ["@nexusui"],
  "rules": {
    // Your rules
  }
}

// after (1.0.0)
{
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true
  },
  "extends": ["@nexusui", "prettier"],
  "plugins": ["prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json"]
  },
  "rules": {
    // Your rules
  }
}

Related Packages

@nexusui/prettier-config is a complementary package that includes recommended prettier Shareable Configuration for NexusUI projects.

npm