eslint-config-succinct

An ESLint configuration library for projects based on React 18+ with Typescript 5+.

Purpose

This is an opinionated ESLint configuration that enforces consistent usage of ES6 & strict TypeScript non-OOP paradigms, as well as stylistic rules. It encourages adherence to functional-programming & accessibility best practices and restricts certain language features that are prone to anti-patterns.

NB: Not be used alongside Prettier, since this config includes @stylistic/eslint-plugin which supersedes its rules.

Particularities

Notable linting rules include:

• class declarations are disallowed (encouraging the use of pure functions).
• default exports are disallowed (named exports keep imports consistent).
• interface declarations are disallowed (avoids declaration merging - use type instead).
• enum declarations are disallowed (use string unions instead).
• Object keys, union types, imports and component props are sorted in case-insensitive alphabetical order.
• Unused variables in object spreads or function arguments can be denoted by prefixing with a "_".
• Semicolons are not used, instead relying on ASI.
• Enforces use of tab characters instead of spaces for indentation. This article lays out the debate, with pros and cons.

Installation

First, install this package alongside eslint:

npm install -D @kitnato/eslint-config-succinct eslint

Next, create the .eslintrc.json configuration file at the root of your project:

{
  "extends": "@kitnato/eslint-config-succinct",
}

Remember to set here any ignorePatterns if you require them beyond the standard build and dist folders, along with any other config overrides you may desire.

Usage

Once installed, you can run any eslint command.

You may also define scripts that will lint, fix and format your files to help automate your workflow.

For example, in your package.json, add the following under scripts:

"scripts": {
  "lint-code": "eslint --fix --ext .ts,.tsx .",
}

IDE setup

VS Code

If you use Microsoft VS Code, you can add the following snippet at the top of your .vscode/settings.json to automatically run the linter and fix all issues whenever a file is saved.

"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}
"eslint.format.enable": true,

License

This work is licensed under the GNU General Public License version 3.