Usage with Eslint version 10

The latest version of this package requires ESLint v10. For ESLint 9, use @nish1896/eslint-flat-config@3. The ts and next-ts modules use typescript-eslint, which supports typescript below 6.1 only, so pin it to ~6.0 if your starter ships TypeScript 7.

note

If you are upgrading from version 3 of this package, please refer the migration guide.

If you have specified "type": "module" in the package.json of your application, create a eslint.config.js file, else use eslint.config.mjs file.

touch eslint.config.mjs

Node.js

The js import extends the recommended rules of ESLint and adds stylistic rules. Use the ts import for TypeScript.

eslint.config.mjs

import jsConfig from '@nish1896/eslint-flat-config/js';

export default [
  ...jsConfig,
  {
    rules: {}
  }
];

With Typescript

eslint.config.mjs

import jsConfig from '@nish1896/eslint-flat-config/js';
import tsConfig from '@nish1896/eslint-flat-config/ts';

export default [
  ...jsConfig,
  ...tsConfig,
  {
    rules: {}
  }
];

React & Vite

Use both js and jsx rules from the package for React and Vite applications.

note

The latest create-vite templates use Oxlint by default, which does not read eslint.config.mjs. Choose the ESLint option when scaffolding, or install eslint in the project, to use this package.

eslint.config.mjs

import jsConfig from '@nish1896/eslint-flat-config/js';
import jsxConfig from '@nish1896/eslint-flat-config/jsx';

export default [
  ...jsConfig,
  ...jsxConfig,
  {
    rules: {}
  }
];

With Typescript

eslint.config.mjs

import jsConfig from '@nish1896/eslint-flat-config/js';
import tsConfig from '@nish1896/eslint-flat-config/ts';
import jsxConfig from '@nish1896/eslint-flat-config/jsx';

export default [
  ...jsConfig,
  ...tsConfig,
  ...jsxConfig,
  {
    rules: {}
  }
];

Next.js

A dedicated ESLint configuration for Next.js applications integrates seamlessly with the create-next-app boilerplate, which sets up projects using Next.js version 16. This simplifies setup, ensuring compatibility and optimized linting rules tailored for Next.js applications.

The next and next-ts modules in this package consolidates rules from both jsx and typescript configurations, extending the respective stylistic plugin. It leverages the typescript-eslint and other React plugins provided by eslint-config-next, ensuring no need to duplicate plugin configurations for Next.js projects and to prevent the redefine plugin error.

eslint.config.mjs

import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
import jsConfig from '@nish1896/eslint-flat-config/js';
import nextConfig from '@nish1896/eslint-flat-config/next';

const eslintConfig = defineConfig([
  ...nextVitals,
  ...jsConfig,
  ...nextConfig,
  globalIgnores([
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts'
  ])
]);

export default eslintConfig;

With Typescript

eslint.config.mjs

import { defineConfig, globalIgnores } from 'eslint/config';
import nextVitals from 'eslint-config-next/core-web-vitals';
import nextTs from 'eslint-config-next/typescript';
import jsConfig from '@nish1896/eslint-flat-config/js';
import nextConfig from '@nish1896/eslint-flat-config/next';
import nextTsConfig from '@nish1896/eslint-flat-config/next-ts';

const eslintConfig = defineConfig([
  ...nextVitals,
  ...nextTs,
  ...jsConfig,
  ...nextConfig,
  ...nextTsConfig,
  globalIgnores([
    '.next/**',
    'out/**',
    'build/**',
    'next-env.d.ts'
  ])
]);

export default eslintConfig;

Duplicate Import Error

For ESLint 10, the error "Cannot redefine plugin @typescript-eslint" or anything similar occurs because the @typescript-eslint plugin is initialized twice: once from the ts config of this package and then from your current configuration. To fix this:

• Remove @typescript-eslint from the plugins key in your ESLint config.
• Let the ts module of @nish1896/eslint-flat-config manage the plugin initialization.
• Configure or turn off any rule in the rules key of eslint config.

This approach ensures no duplication while retaining flexibility for rule customization.