Effective / ESLint-Config

Introducing @effective/eslint-config—your definitive ESLint configuration package. By synthesizing the most effective practices and presets from industry-leading sources including React, XO, and TypeScript ESLint, Effective ESLint offers a premier linting solution that stands on the shoulders of giants. This configuration is meticulously crafted to enhance your development workflow, ensuring that your code is not only clean and efficient but also meets the highest standards of coding excellence.

Key Features

• Comprehensive Configurations: Effective ESLint integrates a variety of top-tier ESLint presets into one unified configuration, offering the best practices from the ESLint community. This approach ensures you have a comprehensive and effective linting setup.
• Fully Customizable: With the understanding that each project is unique, Effective ESLint is built to be fully customizable. It allows for easy adjustment or deactivation of specific rules to fit your project's needs, providing a perfect mix of guideline enforcement and creative latitude.
• Streamlined Integration: Effective ESLint is designed to be user-friendly, streamlining the setup process. Its configuration facilitates quick integration, allowing you to refine your codebase efficiently, without the complexities of intricate setups.
• Enhanced Efficiency: Effective ESLint enhances the linting process by combining multiple presets into one, which not only eases management but also improves the linter's startup time. This results in a quicker and more productive development workflow.
• Local Preset: Effective ESLint includes local rules that enhance code consistency, specifically for imports, JSX code, and enforcing sensible defaults to maintain low code complexity.
• Community-Driven Development: The development of Effective ESLint is community-driven, emphasizing continuous improvement and inclusivity. Contributions from the community are highly encouraged, helping to keep our configurations up-to-date with the latest coding standards and practices.

Installation

To use @effective/eslint-config in your project, you need to install it via npm, yarn or pnpm. Ensure you have ESLint installed in your project; if not, you can install it alongside this package.

npm install @effective/eslint-config eslint --save-dev
# or
yarn add @effective/eslint-config eslint --dev
# or
pnpm add @effective/eslint-config eslint --dev

Usage

After installation, you can configure ESLint to use @effective/eslint-config by adding it to your eslint.config.js (flat configuration) file:

import { main } from "@effective/eslint-config"

export default [
  main

  // room for custom overrides
]

There is also a main import as an alternative to recommended which does not include any of the listed addons.

Rules

You can check the full resolution table here which shows which rules are active and from where.

Approach

All starts with eslint:recommended the built-in recommendations list from ESLint.

Collections

Effective ESLint incorporates rules from the following collections to establish a comprehensive linting foundation:

1. XO: Constituting over 50% of Effective ESLint's preset, XO provides a robust, TypeScript-centric base. It stands out for its thorough approach and specialized focus on TypeScript.
2. TypeScript ESLint: Effective ESLint utilizes the strict and stylistic rules from TypeScript ESLint, opting for the type-enhanced versions. While there is significant overlap with XO rules, XO typically enforces stricter standards, offering finer-grained exceptions and options.

Framework Collections

Effective ESLint embraces best practices by integrating presets from leading React frameworks:

1. Create React App: Focused on React (including JSX-A11Y), the CRA preset offers a well-rounded, common-sense-oriented foundation for React development.
2. NextJS: Specializes in framework-agnostic rules, specifically excluding @next/plugin-specific rules.
3. Remix: Enhances Effective ESLint's presets with standards from the Remix framework.

Plugins

Effective ESLint is further enriched by recommended rules from these plugins:

1. React Plugin & React Hooks: Integrates all recommended rules not already part of CRA, including warnings on deprecated APIs, the use of string refs, and more.
2. JSX-A11Y: Adopts all recommended accessibility rules from the JSX-A11Y plugin.
3. Unicorn Plugin: Implements all recommended practices from the Unicorn plugin to promote superior coding patterns.
4. Node: A maintained fork of the original Node.js plugin, with all recommended ESM Node.js rules enabled.
5. JSDoc: Enables all recommended JSDoc rules, excluding those starting with required-. This reflects the TypeScript project's reliance on the type system over extensive JSDoc comments.
6. RegExp Plugin: All recommended RegExp rules are enabled to ensure expressions are both efficient and error-free.

Local Preset

The local preset option was introduced to enable non-code moderation capabilities, addressing the limitations of a purely priority-based approach. In certain situations, this single-faceted method proves insufficient, such as when a specific setting from one preset should prevail due to its more common usage, despite conflicting with a higher-priority preset. The local preset currently encompasses four categories:

• import: Automates the sorting and grouping of import statements.
• naming: Implements XO-based naming conventions for variables and functions but adds support for uppercase global constants.
• quality: Establishes sensible defaults for various code quality metrics, such as complexity, file size, and type definition styles.
• react: Promotes a unified coding style for JSX, enhancing readability and maintainability.

These enhancements are part of the local preset, which predominantly builds upon the foundations set by existing presets, as previously mentioned.

Focussed on React/TypeScript

Effective ESLint globally excludes specific namespaces/plugins to maintain focus and avoid conflicts:

1. vue/*: Tailored for ReactJS, hence all Vue-related rules are excluded.
2. flowtype/*: Dedicated to TypeScript, omitting all Flowtype-related rules.
3. @next/*: Framework-specific rules, such as those from NextJS, are avoided to prevent conflicts in diverse environments.
4. import/*: Given its reduced relevance in TypeScript projects, the import plugin is not very utilized in most presets nowadays. It is also relatively slow in execution for TypeScript code.

Disabled Formatting

Effective ESLint employs Prettier's configuration to disable any stylistic/formatting rules that could conflict with Prettier's guidelines. This encompasses core ESLint rules and those from React and TypeScript plugins.

License

Apache License; Version 2.0, January 2004

Copyright

Copyright 2024Sebastian Software GmbH