I have a Node.js project with an existing eslint config, I generated a new next.js project in the same project so now I have
📁 src
📄 .eslintrc.yml
📁 website
📄 .eslintrc.json
How could I set up next.js's eslint config with my already existing one? This is what the existing one looks like:
env:
es2020: true
node: true
extends:
- eslint:recommended
- plugin:@typescript-eslint/recommended
parser: "@typescript-eslint/parser"
parserOptions:
sourceType: module
plugins:
- "@typescript-eslint"
- import
rules:
no-duplicate-imports: error
no-template-curly-in-string: warn
no-unreachable-loop: warn
camelcase: error
curly: error
eqeqeq: error
no-console: error
no-else-return: error
no-empty-function: error
no-eval: error
no-new: error
no-param-reassign: error
no-return-await: warn
no-unneeded-ternary: error
no-useless-rename: error
no-var: error
prefer-arrow-callback: error
prefer-const: error
prefer-destructuring: error
prefer-object-spread: error
prefer-template: error
block-spacing: error
padding-line-between-statements:
[error, { blankLine: "always", prev: "*", next: "return" }]
"@typescript-eslint/explicit-module-boundary-types": off
"@typescript-eslint/no-shadow": error
import/order:
[
error,
{
alphabetize: { caseInsensitive: true, order: asc },
groups: [[external, builtin], internal, parent, sibling, index],
newlines-between: never,
},
]
I decided to remove everything eslint related in the website project and installed eslint-config-next in the root project:
env:
es2021: true
shared-node-browser: true
extends:
- eslint:recommended
- plugin:@typescript-eslint/recommended
- next/core-web-vitals
- prettier
parser: "@typescript-eslint/parser"
parserOptions:
sourceType: module
plugins:
- "@typescript-eslint"
- import
settings:
next:
rootDir: "./website"
rules:
no-duplicate-imports: error
no-template-curly-in-string: warn
no-unreachable-loop: warn
camelcase: error
curly: error
eqeqeq: error
no-console: error
no-else-return: error
no-empty-function: error
no-eval: error
no-new: error
no-param-reassign: error
no-return-await: warn
no-unneeded-ternary: error
no-useless-rename: error
no-var: error
prefer-arrow-callback: error
prefer-const: error
prefer-destructuring: error
prefer-object-spread: error
prefer-template: error
block-spacing: error
padding-line-between-statements:
[error, { blankLine: "always", prev: "*", next: "return" }]
"@typescript-eslint/explicit-module-boundary-types": off
"@typescript-eslint/no-shadow": error
import/order:
[
error,
{
alphabetize: { caseInsensitive: true, order: asc },
groups: [[external, builtin], internal, parent, sibling, index],
newlines-between: never,
},
]
I'm not using next lint this way but linting should work fine this way, if I can get some nicer integration I'd be open to suggestions