@santi020k/eslint-config-santi020k

Welcome to @santi020k/eslint-config-santi020k, a comprehensive and opinionated ESLint configuration package for JavaScript, TypeScript, React, and various other frameworks. This repository was born out of my frustration with projects that suffer from bad practices and poor code quality. By automating code quality and reducing cognitive load during code reviews, this package aims to enforce a consistent coding style across your projects.

Why Use This Configuration?

• Consistency: Enforces a uniform coding style, minimizing code differences and easing collaboration.
• Quality: Promotes best practices and helps avoid common pitfalls in JavaScript, TypeScript, and React development.
• Automation: Reduces the need for manual code reviews by catching issues early in the development process.
• Customization: While opinionated, it can be tailored to fit your project's specific needs.

Installation

First, ensure you have ESLint (9.0.0 or latest) installed:

  npm install eslint --save-dev

Then, install the configuration package:

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

Usage

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

Basic Usage

For a basic JavaScript project:

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

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

Advanced Usage

For projects with specific configurations (TypeScript, React, Next.js, etc.), use the appropriate options:

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

  // Examples of different configurations

  // 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
  ];

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

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

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

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

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

Optionals Usage

Additionally, there are some optional parameters that add support to other technologies that could be needed in a front-end project. The idea is to add support for more options in the future. Here is an example of how to use these optionals:

  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
      ]
    }),
    // Your custom config
  ];

Opinionated but Flexible

This ESLint configuration is based on my personal preferences and practices. As such, it may evolve over time. I recommend using a fixed version to avoid unexpected changes. If a rule is too strict, consider changing it from an error to a warning to allow for more flexibility during development.

Scripts

Here are some useful scripts you can add to your package.json:

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

How to Implement in an Existing Project

1. Install the Dependencies: Ensure you have ESLint and this configuration package installed in your project.

2. Update Your ESLint Configuration: Extend @santi020k/eslint-config-santi020k in your ESLint configuration file as shown above.

3. Run ESLint: Run ESLint to lint your project files and fix issues:

     npm run lint
     npm run lint:fix

4. Adjust as Necessary: Review the linting rules and adjust them based on your project's needs. Since this configuration is opinionated, some rules might be too strict or not applicable to your project. Feel free to disable or modify them.

Future Features

• [ ] Unit testing
• [ ] Better documentation
• [ ] Additional Frameworks support
  • [ ] Vue
  • [ ] Angular
  • [ ] Astro (Process)
• [X] Refactor rules structure (eslint configurations are currently duplicated)

Contributing

If you find any issues or have suggestions for improvements, please open an issue or submit a pull request on the GitHub repository.

Acknowledgements

I would like to express my gratitude to the developers and maintainers of the following libraries, which form the backbone of this ESLint configuration:

• eslint-config-standard
• eslint-plugin-import
• eslint-plugin-jsx-a11y
• eslint-plugin-n
• eslint-plugin-promise
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-simple-import-sort
• eslint-plugin-sonarjs
• eslint-plugin-unused-imports
• @stylistic/eslint-plugin
• @typescript-eslint
• @cspell/eslint-plugin
• eslint-plugin-tailwindcss
• eslint-plugin-vitest
• etc...

These tools have significantly contributed to the JavaScript and TypeScript ecosystem, and their continued development helps maintain the high standards of code quality that we all strive for.

Thank you for using @santi020k/eslint-config-santi020k. Together, let's write cleaner, more maintainable code!