README

ESLint Config - Effective Project

This preset is based on the excellent work of the many developers of the following projects:

Collections:

ESLint TypeScript: This preset is TypeScript-focused and uses the significantly extended rules from the TypeScript ecosystem whenever possible.
ESLint Recommended: Recommendations from the ESLint core package that have not yet been geared towards TypeScript are added.
Create React App: This project's settings combine everything that the developers of Create React App consider critical code base issues for general JavaScript, ReactJS (including hooks and accessibility).
Airbnb: As one of the most widely used standards, it would probably not have been wise to leave out the know-how of the Airbnb developers. We use all the knowledge from the rules, which have not been covered differently so far, to be able to offer much more extensive checks.

Plugins:

React: The React plugin offers a lot of tests related to React code quality. This preset includes the rules and settings from the "recommended" rules.
JSDoc: This plugin provides some good options to check the content of JSDoc comments. We have deliberately chosen to use only those rules that make sense in TypeScript typed projects.
Unicorn + Shopify: Both are a wonderful collection of really smart additional self-implemented rules. We're using the best of these two projects to make some great additions to the ruleset.

Utilities:

Jest: The TestRunner of choice is directly supported by the preset. We recognize test files by the "test" folder or by the component ".test." in the file name. Only here we activate the recommended preset of Jest and deactivate some of our stricter rules, which are often harder to follow in tests.
Babel: By using the Babel resolver, we have created an alias - that points to the src folder. This is useful in more deeply structured projects, since you don't have to shimmy along the parent folders as often via ....

And it combines them in an intelligent and harmonious way to create a modern, high-performance linting infrastructure. The preset provides the best building block for the development of modern JavaScript applications.

Additions:

Sorts imported names and the actual imports. Splits between global and local imports (divided by a new line).
Prevents short variable names which could not explain the meaning well enough.
Includes limits for code complexity, function depth, number of parameters or statements to keep code clean and lean.

Customization:

The idea is to include this oreset in your configuration and override what you do not like or need. This is meant as a starting point for many projects – not as a final solution for everyone.

By the way: All rules that are automatically correctable were automatically reduced to the level Warning - no matter what was entered in the originally imported ones and regardless of their absolutely relevant value for the correctness of the code.

And yes, it might hurt your feelings. Please excuse if the preset knocks you out a bit to point out errors. Some settings are a bit stricter. But it is precisely these that make this preset a great help, especially for new code to be written. In existing code, large rule sets are often a burden, as many errors are reported and nobody has the time or inclination to take care of them.

Installation

npm install -D @effective/eslint-config
npm install -D eslint prettier typescript

Note: As this is based on the TypeScript parser it even requires the TypeScript installation in JS-only projects. This typically prepares the ground for a step-by-step migration to TypeScript and generally the rules in TypeScript are more advanced than their "native" ESLint counterparts.

Usage

ESLint supports our scoped packages by just extending from the scope like so:

{
  "extends": "@effective",
  "rules": []
}

extends: "@effective"

We also suggest adding the following scripts to the package.json:

TypeScript projects:

"lint": "run-s \"lint:* {@}\" --",
"lint:style": "prettier --check '**/*.{js,jsx,ts,tsx,mjs,json,md}'",
"lint:script": "eslint '**/*.{js,jsx,ts,tsx,mjs}'",
"lint:types": "tsc --noEmit",

JS projects:

"lint": "run-s \"lint:* {@}\" --",
"lint:style": "prettier --check '**/*.{js,jsx,json,md}'",
"lint:script": "eslint '**/*.{js,jsx}'",

Note: The run-s command requires installation of NPM Run All.

Addons

Depending on the project the following plugins might be interesting additions:

Node: Adds additional capabilities for NodeJS scripts e.g. server-side applications.
Compat: Validates browser support for the written code and warn on required Polyfills. Excluded by default as it requires defining a browser list and does not work well in a mixed NodeJS/Browser code environment.
GraphQL: Validates usage of queries against an existing schema. Excluded by default as it requires a downloaded schema.
Cypress: Offers rules and presets for working with Cypress E2E solution.

License

Apache License Version 2.0, January 2004

@effective/eslint-config

Usage no npm install needed!