Package Exports

@nexusui/eslint-config
@nexusui/eslint-config/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@nexusui/eslint-config) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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 google and react-app recommended rules and also adds rules defined by typescript, jsx-a11y, react, react-hooks, jest, and testing-library. This package also integrates eslint-config-prettier and eslint-plugin-prettier, which will disable ESLint rules that conflict with prettier rules (prettier rules will take precedence over ESLint).

Installation

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

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

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

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

Usage

Create a configuration file .eslintrc 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"]
}

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:

{
  "env": {
    "browser": true,
    "jest": true,
    "es2021": true
  },
  "extends": ["@nexusui"],
  "rules": {
    // override rules as necessary
    "import/no-anonymous-default-export": "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",
}

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