eslint-config-beslogic

v5.2.3

Published

3 months ago

ESLint rules, plugins and configs used at Beslogic

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.6:

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

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 using experimental decorators (likely for an Angular project), you still need to set

"compilerOptions": { 
  "emitDecoratorMetadata": true,
  "experimentalDecorators": true,
}

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`

Add the following into your .dprint.jsonc at the root of your git project (even if you have multiple workspaces):

{
  // https://dprint.dev/config/#extending-a-different-configuration-file
  "extends": "https://raw.githubusercontent.com/Beslogic/shared-configs/<hash>/.dprint.jsonc"
}

Read the dprint section of our Shared Configs for more information.

If also using json-like.mjs preset extend from https://raw.githubusercontent.com/Beslogic/shared-configs/main/.dprint-json-like.jsonc 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 [email protected].

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

import { defineConfig } from 'eslint/config';
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 defineConfig(
  beslogicReact,
  beslogicTypeScript,
  beslogicExtraStrict,
  // Your configs here
  {...}
)

import { defineConfig } from 'eslint/config';
import beslogicAngular from 'eslint-config-beslogic/angular.mjs'
import beslogicExtraStrict from 'eslint-config-beslogic/extra-strict.mjs'

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

import { defineConfig } from 'eslint/config';
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 defineConfig(
  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. If you have a non-standard tsconfig.json, you may need custom configurations for settings.import-x/resolver-next: [createTypeScriptImportResolver({project: ...})] and/or settings.parserOptions.projectService.

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.

If you are a writing library, use the following rule:

import { defineConfig } from "eslint/config"
import { explicitModuleBoundaryType } from "eslint-config-beslogic/extra-strict.mjs"

export default defineConfig(
  {
    rules: {
      "@typescript-eslint/explicit-module-boundary-types": explicitModuleBoundaryType
    }
  }
)