momenti-eslint

A shareable ESLint configuration for Next.js projects using TypeScript, TSX, JavaScript, and JSX. Designed with modern best practices, accessibility, and maintainability in mind.

Features

• Optimized for Next.js + TypeScript + React projects
• Balanced rule set for good code quality without being too strict
• Performance optimized for faster linting
• Built-in Prettier integration
• Accessibility (a11y) rules included
• Unused imports detection
• SVG imports support

Installation

# Using npm
npm install --save-dev momenti-eslint

# Using yarn
yarn add --dev momenti-eslint

# Using pnpm
pnpm add -D momenti-eslint

# Using bun
bun add -D momenti-eslint

Next.js Setup

This ESLint configuration is optimized for Next.js projects. Follow these steps for the best setup:

1. Install the package and its peer dependencies:

# Using npm
npm install --save-dev momenti-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-next @next/eslint-plugin-next eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

# Using yarn
yarn add -D momenti-eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-next @next/eslint-plugin-next eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks

2. Create an eslint.config.mjs file in your project root:

import momentiEslintConfig from 'momenti-eslint';

export default [...momentiEslintConfig];

3. Add the following to your package.json:

{
  "scripts": {
    "lint": "eslint --config eslint.config.mjs .",
    "lint:fix": "eslint --config eslint.config.mjs . --fix"
  }
}

4. For proper SVG imports support, update your next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack(config) {
    // SVG Configuration
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    });
    return config;
  },
};

export default nextConfig;

5. Install SVGR for Next.js:

npm install --save-dev @svgr/webpack

Usage

Create an eslint.config.mjs file in your project root:

import momentiEslintConfig from 'momenti-eslint';

export default [...momentiEslintConfig];

TypeScript Configuration

For proper TypeScript support, especially with SVG imports, create or update your tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}

SVG Type Declarations

To properly type SVG imports and icon objects, create a types.d.ts file in your project:

declare module '*.svg' {
  import * as React from 'react';
  const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  export default ReactComponent;
}

// For icon objects that reference SVG files
declare module '@/constants/icons' {
  const Icons: {
    [key: string]: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;
  };
  export default Icons;
}

Development vs Production

The configuration automatically detects the NODE_ENV environment variable:

• In development: Type checking is disabled for faster linting
• In production: Full type checking is enabled

To run linting in development mode:

NODE_ENV=development eslint .

To run linting in production mode with full type checking:

NODE_ENV=production eslint .

What’s Included?

Installed Dependencies:

Included Dependencies

The following dependencies are included in this package to ensure proper linting rules are applied:

| Dependency | Purpose | | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | | @eslint/eslintrc | For FlatCompat, enabling modern configs. | | @typescript-eslint/eslint-plugin | TypeScript-specific linting rules. | | @typescript-eslint/parser | Parses TypeScript code for ESLint. | | eslint | Core linting engine. | | eslint-config-next | Next.js-specific linting rules. | | @next/eslint-plugin-next | Next.js-specific linting rules. | | eslint-plugin-import | Rules for ES module imports. | | eslint-plugin-jsx-a11y | Accessibility rules for JSX elements. | | eslint-plugin-prettier | Integrates Prettier for formatting rules. | | eslint-plugin-react | React-specific linting rules. | | eslint-plugin-react-hooks | Ensures proper use of React Hooks. | | globals | Defines browser and Node.js global variables. | | prettier | Code formatter integration. |

Changelog

The changelog is automatically generated following Conventional Commits. See the CHANGELOG.md file for detailed updates.

npm Package

You can find the npm package here.

PUBLISHING NEW VERSIONS

To publish a new version, run the following commands:

npm run release

This will create a new version, push to GitHub, and publish to npm.

or

npm run release:patch
npm run release:minor
npm run release:major

or you can also use npm publish directly after updating the version in package.json with npm version patch or npm version minor or npm version major.

License

ISC