Momenti-eslint NPM

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:

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

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

import momentiEslintConfig from 'momenti-eslint';

export default [...momentiEslintConfig];

Add the following to your package.json:

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

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;

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.

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.