Skip to content

Latest commit

 

History

History
203 lines (136 loc) · 5.26 KB

README.md

File metadata and controls

203 lines (136 loc) · 5.26 KB
Raw

eslint-config

A reusable eslint config that I use for most of my projects.

Starting at 5.0.0, I only support eslint@^9 or greater.

Installation

npm install -D eslint @mlaursen/eslint-config

Then create an eslint.config.mjs with the following:

// @ts-check
import { config, configs, gitignore } from "@mlaursen/eslint-config";

// choose the config you want to use:
// somewhat strict type checking
export default config(gitignore(import.meta.url), ...configs.frontend);

// strict type checking
export default config(gitignore(import.meta.url), ...configs.frontendTypeChecking(import.meta.dirname));

// NOTE: This is recommended for strict type checking. Callable as:
// `cross-env STRICT_TYPING=true eslint "**/*.{ts,tsx,mts,mtsx,js,jsx,mjs,cjs}`
//
// strict type checking with an environment variable. uncomment the following
// line to enable it in your editor
// const strict = true || process.env.STRICT_TYPING === 'true';
const strict = process.env.STRICT_TYPING === 'true';
const frontend = strict ? configs.frontendTypeChecking(import.meta.dirname) : configs.frontend
export default (gitignore(import.meta.url), ...frontend);

The config export is the typescript-eslint.config() function to provide type definitions and gitignore automatically ignores files from linting based on your .gitignore rules.

Configs

I normally just use the frontend or frontendTypeChecking configs, but the others can be used individually if needed.

base

The base config is automatically used by the typescript config and is just the eslint.configs.recommended and a few other stylistic changes.

This should not be used if the typescript or typescriptTypeChecking configs are used.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.base);

typescript

This extends the base config and the tseslint.configs.strict config. It also includes a few stylistic choices for type behavior and disabled strict rules in test files.

Only this rule or typescripttypechecking should be used. They should not be used together.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.typescript);

typescriptTypeChecking

This is the same as the typescript config but also includes the tseslint.configs.strictTypeCheckedOnly config.

Only this rule or typescript should be used. They should not be used together.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.typescriptTypeChecking(import.meta.dirname));

jest

This only enables the eslint-plugin-jest.configs['flat/recommended] rules on tests files.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.jest);

jestDom

This only enables the eslint-plugin-jest-dom.configs['flat/recommended] rules on tests files.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.jestDom);

testingLibraryReact

This enables the eslint-plugin-testing-library/.configs["flat/react] plugin and rules on test files.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.testingLibraryReact);

testingLibraryDom

This enables the eslint-plugin-testing-library/.configs["flat/dom] plugin and rules on test files.

This should not be used with the testingLibraryReact rules

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.testingLibraryDom);

react

This enables the eslint-plugin-react and eslint-plugin-react-hooks:

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.react);

jsxA11y

This enables eslint-plugin-jsx-a11y:

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.jsxA11y);

next

This is a small wrapper around the @next/eslint-plugin-next that works with eslint v9.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.next);

frontend

This is my normal frontend repo setup with react, jsxA11y, jest, jest-dom, typescript, testing-library/react.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.frontend);

frontendTypeChecking

Same as the frontend, but enables the strict type checking.

// @ts-check
import { config, configs } from "@mlaursen/eslint-config";

export default config(...configs.frontendTypeChecking(import.meta.dirname));