@natahouse/eslint-config

Overview   |    Features   |    Getting started   |    Style rules   

💻 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 👋🏻