Eslint Config Beslogic

Installation and usage

Run npm i --save-dev eslint-config-beslogic

Depending on your needs, you will need to also install other peer dependencies for linting.

In your eslint.config.[cm]?js file, simply extend our presets appropriate for your project.

For stylistic rules, it is highly recommended to use a dedicated formatter over ESLint. Read more here: https://typescript-eslint.io/docs/linting/troubleshooting/formatting/
We assume dprint and don't enable any rules it covers by default. If you're not using a formatter, a stylistic.mjs configuration is offered below.

Parallel configurations

These are configuration files you'll have to update manually to best work with these presets.

package.json

Read the package.json section of our Shared Configs for one-liner shortcut scripts you can use.

Base tsconfig.json

Extend the following in your base tsconfig.json (follow link for more details):

typescript@>=5.0:

"extends": ["eslint-config-beslogic/tsconfig.5.0.json"],

typescript@>=4.3:

"extends": "eslint-config-beslogic/tsconfig.4.3.json",

"No Unchecked Indexed Access" makes index accesses even stricter. You may not want it in your project or in your tests. You can disable it with "compilerOptions": { "noUncheckedIndexedAccess": false }.

If deploying / bundling with an Angular npm package, also set angularCompilerOptions": { "strictMetadataEmit": true }.

.vscode/settings.json and .vscode/extensions.json

Read and copy the sections for the languages you use from BesLogic/shared-configs/.vscode.

.dprint.jsonc

Extend the following in your base .dprint.jsonc (follow link for more details):

{
  // https://dprint.dev/config/#extending-a-different-configuration-file
  "extends": "https://raw.githubusercontent.com/BesLogic/shared-configs/main/dprint.json"
}

This configuration automatically includes known "exclusion" folders. But if you need to add more, you can copy and expand the exludes list in dprint.json.
If you'd like to pin your config version, you can use a commit hash, like https://raw.githubusercontent.com/BesLogic/shared-configs/a0d9a34/dprint.json.

If also using json-like.mjs preset extend from https://raw.githubusercontent.com/BesLogic/shared-configs/main/dprint-json-like.json instead.

PR Autofixes

We've stopped attempting to support pre-commit.ci.
Read the PR Autofixes section of our Shared Configs for an explanation and alternatives.

Patched packages

The following packages cause problems or have other type-safety issues that are automatically patched out by eslint-config-beslogic on install. To see the complete logs, add foreground-scripts=true to a root .npmrc file, or run npm install with --foreground-scripts.

NX/NRWL

NX has a reusable add-linting generator that adds configuration that hides our own and/or conflicts with our best practices. We automatically patch-out that NX generator.

If you have a project that used NX before also using eslint-config-beslogic@>=1.5.2, make sure to remove all @nrwl/* and @angular-eslint/template/process-inline-templates entries from "extends" in all eslint configuration files. You can keep entries generated under "rules".

NX also doesn't support trailing commas in jsonc files. You'll have to make sure that your configurations contains none (and go upvote the referenced issue!).

Angular Material

Angular Material's MatDialogRef defaults it dialog result generic to any. This breaks type safety and is automatically patched out since eslint-config-beslogic@1.5.2.

Presets

Below are all the different configurations you can extend from. You can mix and match as you want if a predefined configuration does not exist for your specific stack. You should import TypeScript configs after regular javascript ones at the root of the configuration.

Examples

React + TypeScript

import tseslint from 'typescript-eslint'
import beslogicExtraStrict from 'eslint-config-beslogic/extra-strict.mjs'
import beslogicReact from 'eslint-config-beslogic/react.mjs'
import beslogicTypeScript from 'eslint-config-beslogic/typescript.mjs'

export default tseslint.config(
  beslogicReact,
  beslogicTypeScript,
  beslogicExtraStrict,
  // Your configs here
  {...}
)

Angular

import tseslint from 'typescript-eslint'
import beslogicAngular from 'eslint-config-beslogic/angular.mjs'
import beslogicExtraStrict from 'eslint-config-beslogic/extra-strict.mjs'

export default tseslint.config(
  beslogicAngular,
  beslogicExtraStrict,
  // Your configs here
  {...}
)

Frameworkless TypeScript w/o dprint

import tseslint from 'typescript-eslint'
import beslogicExtraStrict from 'eslint-config-beslogic/extra-strict.mjs'
import beslogicJavascript from 'eslint-config-beslogic/javascript.mjs'
import beslogicStylistic from 'eslint-config-beslogic/stylistic.mjs'
import beslogicTypeScript from 'eslint-config-beslogic/typescript.mjs'

export default tseslint.config(
  beslogicJavascript,
  beslogicTypeScript,
  beslogicExtraStrict,
  beslogicStylistic,
  // Your configs here
  {...}
)

index.mjs

Default preset, extends from javascript.mjs and typescript.mjs.

jest.mjs

Jest and Testing Library configs. Is already extended by javascript.mjs and typescript.mjs for all *spec.[jt]s and *.test.[jt]sx files, as well as *.[jt]s and *.[jt]sx files inside of __tests__ folders. You should not need to extend from this configuration unless you want to add it to a test file that is not automatically picked up by the naming convention.

javascript.mjs

Basic javascript configs, is extended by all other configs except typescript.mjs, jest.mjs, storybook.mjs and json-like.mjs.

typescript.mjs

Basic TypeScript-specific configs and TSX support, is extended by all other TypeScript exclusive configs. To avoid rules conflicts, it does not already extend from javascript.mjs. So you should extend from both in a pure TypeScript project. You may also need to specify parserOptions.project. ie: "parserOptions": { "project": ["tsconfig.json"] }, and "parser": "@typescript-eslint/parser" if you reconfigure some rules yourself.

For the linting to be fully effective, please make sure that your base tsconfig.json extends eslint-config-beslogic/tsconfig.X.X.json (see Parallel configurations).

If you want extra strict linting, consider adding the extra-strict.mjs preset.

node-js.mjs

Configurations for NodeJS backends.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-n

rxjs.mjs

Configurations for projects using RxJs. Already extends and typescript.mjs for TypeScript-specific rules and is already extended by angular.mjs.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-rxjs

react.mjs

Configurations for React projects. Comes with JSX support.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component

react-native.mjs

Configurations for React Native projects, including Expo. Already extends react.mjs.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-react-native eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component

react-redux.mjs

Configurations for React projects using the Redux bindings. Already extends react.mjs.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-react-redux eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component

mui.mjs

MUI/material framework configurations. Already extends react.mjs and typescript.mjs.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-mui eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-react-prefer-function-component

angular.mjs

Configurations for NGX projects. Comes with html template and inline template support. Already extends rxjs.mjs and typescript.mjs. Also extends node-js.mjs for Javascript files.

For the linting to be fully effective, please make sure that your base tsconfig.json extends eslint-config-beslogic/tsconfig.X.X.json (see Parallel configurations).
If bundling as an npm package set "strictMetadataEmit": true under angularCompilerOptions.

NOTE: angular-eslint won't work on HTML files on ESLint v8 due to parser configuration issues.

Add the following devDependencies to your package.json:

npm install --save-dev @angular-eslint/eslint-plugin @angular-eslint/eslint-plugin-template @angular-eslint/template-parser github:BesLogic/eslint-plugin-rxjs-angular#dist eslint-plugin-angular-file-naming

storybook.mjs

Includes strict Storybook ESLint plugin and a custom rule for Angular components. This preset should be added last.
If you're using different ESLint configs for your Angular and Storybook projects, you should add this preset to both.

Add the following devDependencies to your package.json:

npm install --save-dev eslint-plugin-storybook

Stylistic and pedantic Presets

If used, these presets should always come last, in this specific order.

extra-strict.mjs

Enables extra-strict rules for typescript.mjs and angular.mjs, and forces that your tsconfig.json is strictly configured.

stylistic.mjs

Enables stylistic rules that would be taken care of by dprint. Please read What About Formatting?

We don't recommend using this preset, and to use dprint instead (see Parallel configurations).

But if for some reason, dprint isn't an option for you, this preset follows our standards using ESLint.

json-like.mjs

Enforces stylistic rules for JS objects to look like valid JSON objects.

Changelog

You can view the changelog under the Code Tab, or at https://socket.dev/npm/package/eslint-config-beslogic/files/latest/CHANGELOG.md