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
andtesting-library
.
- First, add the necessary peer dependencies 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
andprettier
. 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
Create a configuration file .eslintrc.json
in the root directory and fill in the details here.
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"]
},
}
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
andprettier
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"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["tsconfig.json"]
},
"rules": {
"prettier/prettier": [
"warn",
{
"endOfLine": "auto"
}
]
},
"overrides": [
{
"files": ["*.test.ts", "*.test.tsx", "e2e/**/*.ts", "test-utils.tsx", "msw-server.ts", "setupTests.ts", "log.ts"],
"rules": {
"no-console": "off",
"no-await-in-loop": "off",
"class-methods-use-this": "off",
"@typescript-eslint/no-unused-expressions": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-restricted-imports": "off"
}
},
{
"files": ["*.stories.tsx"],
"rules": {
"@typescript-eslint/no-unused-expressions": "off",
"@typescript-eslint/no-unused-vars": "off",
"@typescript-eslint/no-restricted-imports": "off"
}
}
]
}
Update the package.json
file to add eslint
scripts.
// package.json
"scripts": {
"lint": "eslint .",
"lint-and-fix": "eslint . --fix",
}
If you were using version 1.x.x before and plan to upgrade to version 2.0.0, please read the update below carefully.
If you want to continue to use the react-app
rules, you can add the eslint-config-react-app
package to your project's devDependencies
and extend it in your .eslintrc.json
file.
# With yarn
yarn add --dev eslint-config-react-app
// .eslintrc.json
{
"env": {
"browser": true,
"jest": true,
"es2021": true
},
"extends": ["@nexusui", "react-app", "react-app/jest", "prettier"]
"plugins": ["prettier"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["tsconfig.json"]
},
"rules": {
// Your rules
// Enforce a convention in module import order.
"import/order": "off", // It's annoying
// Ensure consistent use of file extension within the import path.
"import/extensions": "off", // Not necessary in most case
// Prefer a default export if module exports a single name or multiple names.
"import/prefer-default-export": "off", // Not necessary
// Forbid anonymous values as default exports.
"import/no-anonymous-default-export": "off", // Should allow
}
}
If you were using version 0.x.x before and plan to upgrade to version 1.0.0, please read the update below carefully.
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.
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
}
}
@nexusui/prettier-config is a complementary package that includes recommended prettier Shareable Configuration for NexusUI projects.