💻 Overview

This project provides a centralized ESLint configuration for projects utilizing Next.js, React, and Node.js. This configuration aims to enhance code quality, enforce best practices, and streamline the development process, by maintaining a consistent set of linting rules.

🌟 Features

@@ Next.js Ready: @@ 
Tailored rules for projects built with Next.js,
ensuring optimal linting for Next.js applications.

@@ React Guidelines: @@ 
Comprehensive linting rules specific to React, 
promoting clean and maintainable React code.

@@ Node.js Support: @@
Inclusive rules for Node.js applications, addressing common issues 
and ensuring code consistency across the full stack.

@@ Easy Integration: @@
Straightforward integration into your project, saving
development time and reducing configuration overhead.

🚀 Getting Started

To integrate this ESLint configuration into your project, follow these steps:

## Use your preferred package manager to install
$ yarn add -D @natahouse/lint-config
## OR
$ npm install --save-dev @natahouse/lint-config

Using in ReactJS (without NextJS)

inside the .eslintrc.json file

{
  "extends": "@natahouse/lint-config/react"
}

Using in NextJS

inside the .eslintrc.json file

{
  "extends": [
    "@natahouse/lint-config/next",
    "next/core-web-vitals",
  ]
}

Using in NodeJS

inside the .eslintrc.json file

{
  "extends": "@natahouse/lint-config/node"
}

🎨 Style rules

Prettier Configuration

The following table outlines the configuration rules for Prettier, a code formatter.

| Rule | Value | Description | | -------------------------- | ------------ | ----------------------------------------------------- | | printWidth | 80 | Specifies the maximum line length for your code. | | tabWidth | 2 | Sets the number of spaces per indentation level. | | singleQuote | false | Controls the usage of single or double quotes. | | trailingComma | "all" | Adds a trailing comma wherever possible (ES5+). | | arrowParens | "always" | Enforces parentheses around a sole arrow function | | semi | true | Adds semicolons at the end of statements. | | endOfLine | "auto" | Defines the line ending style for your files. |

ESLint Configuration for ReactJS

This ESLint configuration is tailored for projects using React.js, providing a set of rules to enhance code quality, enforce best practices, and improve maintainability. It extends popular configurations such as plugin:react/recommended, plugin:react-hooks/recommended, standard, plugin:@typescript-eslint/recommended, and plugin:prettier/recommended.

| Rule | Value | Description | | ---------------------------------------- | ------- | ------------------------------------------------------------------------------------------------- | | react/self-closing-comp | "error" | Enforces self-closing components in React to improve consistency. | | react/react-in-jsx-scope | "off" | Allows JSX to be used without importing React explicitly (not necessary in newer React versions). | | react/prop-types | "off" | Disables the requirement for prop types in React components, suitable for TypeScript projects. | | jsx-a11y/alt-text | "warn" | Warns about missing alt text in img elements with optional elements customization. | | jsx-a11y/aria-props | "warn" | Warns about problematic usage of ARIA props. | | jsx-a11y/aria-proptypes | "warn" | Warns about missing ARIA propTypes. | | jsx-a11y/aria-unsupported-elements | "warn" | Warns about unsupported ARIA elements. | | jsx-a11y/role-has-required-aria-props | "warn" | Warns about missing required ARIA props for certain roles. | | jsx-a11y/role-supports-aria-props | "warn" | Warns about unsupported ARIA props for certain roles. | | react/no-unknown-property | "error" | Flags the usage of unknown DOM properties in React components. |

ESLint Configuration for NextJS

This ESLint configuration is tailored for projects using Next.js, providing a set of rules to enhance code quality, enforce best practices, and improve maintainability. It extends popular configurations such as standard, plugin:@typescript-eslint/recommended, and plugin:prettier/recommended.

| Rule | Value | Description | | ---------------------------------------- | ------- | --------------------------------------------------------------------------------------------- | | prettier/prettier | "error" | Prettier configuration for consistent code formatting. | | jsx-a11y/alt-text | "warn" | Warns about missing alt text in img elements with optional elements customization. | | jsx-a11y/aria-props | "warn" | Warns about problematic usage of ARIA props. | | jsx-a11y/aria-proptypes | "warn" | Warns about missing ARIA propTypes. | | jsx-a11y/aria-unsupported-elements | "warn" | Warns about unsupported ARIA elements. | | jsx-a11y/role-has-required-aria-props | "warn" | Warns about missing required ARIA props for certain roles. | | jsx-a11y/role-supports-aria-props | "warn" | Warns about unsupported ARIA props for certain roles. |

Made with ♥ by nata.house 👋🏻