mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Jiwon ChoiandGitHub
0f786e04f4
> [!WARNING]
> v16 will not support backwards compatibility of legacy config. The
users can either migrate to flat config via `@next/codemod
next-lint-to-eslint-cli` or stay at v15.
### Why?
`eslint-config-next` is the recommended way to use the ESLint
configuration for Next.js, but it hasn't correctly supported the Flat
config. This PR makes `eslint-config-next` a Flat config by default, and
the users can use it by:
```js
import coreWebVitals from "eslint-config-next/core-web-vitals";
import typescript from "eslint-config-next/typescript";
const eslintConfig = [
...coreWebVitals,
...typescript,
{ ignores: [/* ...ignores to override default ignores */] },
];
export default eslintConfig;
```
Double-checked the usage at
https://github.com/vercel/next.js/tree/ba0db6f1c0256ac7a2941abaadc41f8e47c654a6/examples/with-supabase
### How?
- Converted to Flat config format
- Removed `@rushstack/eslint-patch` hack for peerDeps
- Replaced `@typescript-eslint/` packages to `typescript-eslint`
- https://github.com/vercel/next.js/pull/84874#discussion_r2432032100
- Replaced `env` property with `languageOptions.globals`
- https://github.com/vercel/next.js/pull/84874#discussion_r2432061040
### Follow up
- Update Codemod
- Update CNA templates
- Update Docs https://github.com/vercel/next.js/pull/84781
117 lines
3.2 KiB
TypeScript
117 lines
3.2 KiB
TypeScript
import type { Linter } from 'eslint'
|
|
|
|
// plugins
|
|
import next from '@next/eslint-plugin-next'
|
|
import react from 'eslint-plugin-react'
|
|
import reactHooks from 'eslint-plugin-react-hooks'
|
|
import tsEslint from 'typescript-eslint'
|
|
// import * as ... for plugins without default export
|
|
import * as importPlugin from 'eslint-plugin-import'
|
|
import * as jsxA11yPlugin from 'eslint-plugin-jsx-a11y'
|
|
|
|
// utils
|
|
import globals from 'globals'
|
|
import eslintParser from './parser'
|
|
|
|
const config: Linter.Config[] = [
|
|
{
|
|
name: 'next',
|
|
// Default files, users can overwrite this.
|
|
files: ['**/*.{js,jsx,mjs,ts,tsx,mts,cts}'],
|
|
plugins: {
|
|
react,
|
|
'react-hooks': reactHooks,
|
|
import: importPlugin,
|
|
'jsx-a11y': jsxA11yPlugin,
|
|
'@next/next': next,
|
|
},
|
|
languageOptions: {
|
|
parser: eslintParser,
|
|
parserOptions: {
|
|
requireConfigFile: false,
|
|
sourceType: 'module',
|
|
allowImportExportEverywhere: true,
|
|
// TODO: Is this needed?
|
|
babelOptions: {
|
|
presets: ['next/babel'],
|
|
caller: {
|
|
// Eslint supports top level await when a parser for it is included. We enable the parser by default for Babel.
|
|
supportsTopLevelAwait: true,
|
|
},
|
|
},
|
|
},
|
|
globals: {
|
|
...globals.browser,
|
|
...globals.node,
|
|
},
|
|
},
|
|
settings: {
|
|
react: {
|
|
version: 'detect',
|
|
},
|
|
'import/parsers': {
|
|
'@typescript-eslint/parser': ['.ts', '.mts', '.cts', '.tsx', '.d.ts'],
|
|
},
|
|
'import/resolver': {
|
|
node: {
|
|
extensions: ['.js', '.jsx', '.ts', '.tsx'],
|
|
},
|
|
typescript: {
|
|
alwaysTryTypes: true,
|
|
},
|
|
},
|
|
},
|
|
rules: {
|
|
...react.configs.recommended.rules,
|
|
...reactHooks.configs.recommended.rules,
|
|
...next.configs.recommended.rules,
|
|
'import/no-anonymous-default-export': 'warn',
|
|
'react/no-unknown-property': 'off',
|
|
'react/react-in-jsx-scope': 'off',
|
|
'react/prop-types': 'off',
|
|
'jsx-a11y/alt-text': [
|
|
'warn',
|
|
{
|
|
elements: ['img'],
|
|
img: ['Image'],
|
|
},
|
|
],
|
|
'jsx-a11y/aria-props': 'warn',
|
|
'jsx-a11y/aria-proptypes': 'warn',
|
|
'jsx-a11y/aria-unsupported-elements': 'warn',
|
|
'jsx-a11y/role-has-required-aria-props': 'warn',
|
|
'jsx-a11y/role-supports-aria-props': 'warn',
|
|
'react/jsx-no-target-blank': 'off',
|
|
},
|
|
},
|
|
{
|
|
name: 'next/typescript',
|
|
// Default files, users can overwrite this.
|
|
files: ['**/*.ts', '**/*.tsx'],
|
|
plugins: {
|
|
'@typescript-eslint': tsEslint.plugin,
|
|
},
|
|
languageOptions: {
|
|
parser: tsEslint.parser,
|
|
parserOptions: {
|
|
sourceType: 'module',
|
|
},
|
|
},
|
|
},
|
|
// Global ignores, users can add more `ignores` or overwrite this by `!<ignore>`.
|
|
{
|
|
ignores: [
|
|
// node_modules/ and .git/ are ignored by default.
|
|
// https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
|
|
'.next/**',
|
|
'out/**',
|
|
'build/**',
|
|
'next-env.d.ts',
|
|
],
|
|
},
|
|
]
|
|
|
|
// Use `export =` instead of `export default` for ESLint parser compatibility.
|
|
// ESLint expects parser modules to be directly importable as CommonJS modules (module.exports).
|
|
export = config
|