@santi020k/eslint-config-santi020k NPM

@santi020k/eslint-config-santi020k

Welcome to @santi020k/eslint-config-santi020k, a comprehensive and opinionated ESLint configuration package for JavaScript, TypeScript, React, and other frameworks. Born from a desire to eliminate bad practices and ensure high-quality code, this configuration automates code quality checks and reduces cognitive load during code reviews by enforcing a consistent coding style across your projects.

Why Use This Configuration?

Consistency: Enforces a uniform coding style, reducing code discrepancies and easing collaboration.
Quality: Promotes best practices and helps avoid common pitfalls in JavaScript, TypeScript, Frameworks, Libraries, Tools and more.
Automation: Catches issues early in the development process, minimizing manual code review effort.
Customization: While it comes with strong opinions, you can tailor it to suit your project's specific needs.

Installation

Before installing, make sure you have ESLint (version 9.0.0 or later) installed:

npm install eslint --save-dev

Then, install the configuration package. Important: I recommend using a fixed version (do not use ^ or ~), as any new functionality or change may introduce new linter errors that require manual updates.

npm install @santi020k/eslint-config-santi020k --save-dev

Usage

Create an eslint.config.js file (or update your existing one) and extend @santi020k/eslint-config-santi020k based on your project type.

Basic Usage

For a basic JavaScript/Node.js project:

import { eslintConfig } from '@santi020k/eslint-config-santi020k'

export default [
  ...eslintConfig()
  // Your custom config
]

Advanced Usage

For projects that require specific configurations (e.g., TypeScript, React, Next.js, ...Etc), use the appropriate options:

import { ConfigOption, eslintConfig } from '@santi020k/eslint-config-santi020k'

// TypeScript project
export default [
  ...eslintConfig({ config: [ConfigOption.Ts] })
  // Your custom config
]

// React project
export default [
  ...eslintConfig({ config: [ConfigOption.React] })
  // Your custom config
]

// TypeScript and React project
export default [
  ...eslintConfig({ config: [ConfigOption.React, ConfigOption.Ts] })
  // Your custom config
]

// Next.js project
export default [
  ...eslintConfig({ config: [ConfigOption.Next] })
  // Your custom config
]

// Expo project (Beta)
export default [
  ...eslintConfig({ config: [ConfigOption.Expo] })
  // Your custom config
]

// Astro project (beta, supports Astro with React)
export default [
  ...eslintConfig({ config: [ConfigOption.Astro] })
  // Your custom config
]

Optional Usage

There are additional optional parameters to add support for other front-end/back-end technologies. This enables you to extend support as needed:

import { ConfigOption, eslintConfig, OptionalOption } from '@santi020k/eslint-config-santi020k'

export default [
  ...eslintConfig({
    config: [ConfigOption.Next, ConfigOption.Ts],
    optionals: [
      // Spell checker
      OptionalOption.Cspell,
      // TailwindCss
      OptionalOption.Tailwind,
      // Vitest and testing-library
      OptionalOption.Vitest,
      // I18next
      OptionalOption.I18next,
      // Mdx
      OptionalOption.Mdx,
      // Markdown
      OptionalOption.Markdown,
      // Stencil
      OptionalOption.Stencil
    ]
  })
  // Your custom config
]

Settings Usage (Experimental)

This experimental option allows ESLint to honor your .gitignore file:

import { eslintConfig, SettingOption } from '@santi020k/eslint-config-santi020k'

export default [
  ...eslintConfig({
    // ESLint will ignore files specified in .gitignore
    settings: [SettingOption.Gitignore]
  })
  // Your custom config
]

Opinionated but Flexible

This ESLint configuration is based on my personal preferences and practices, and it may evolve over time. Important: I recommend using a fixed version to avoid unexpected changes that might introduce new linter errors. To ensure stability, do not use ^ or ~ when specifying the version. If a rule feels too strict, consider changing it from an error to a warning to allow more flexibility during development.

Scripts

Add the following useful scripts to your package.json:

"scripts": {
  "lint": "eslint . --report-unused-disable-directives",
  "lint:fix": "npm run lint -- --fix"
}

How to Implement in an Existing Project

Install the Dependencies: Ensure that both ESLint and this configuration package are installed.
Update Your ESLint Configuration: Extend @santi020k/eslint-config-santi020k in your ESLint configuration file as shown above.
Run ESLint: Lint your project files and automatically fix issues if possible:
```
npm run lint
npm run lint:fix
```
Adjust as Necessary: Review and modify the linting rules based on your project's needs. Some rules might be too strict or not applicable; feel free to disable or adjust them.