eslint-config-stylish

Stylish ESLint configuration for Front-end Engineers.

Getting Started

Requirements:

• eslint: v9 or later
• @eslint/js: v9 or later
• eslint-plugin-import: v2 or later
• eslint-plugin-jsx-a11y: v6 or later
• eslint-plugin-react: v7 or later
• eslint-plugin-react-hooks: v5 or later
• eslint-plugin-react-you-might-not-need-an-effect: v0.7.0 or later
• typescript-eslint: v8 or later (if you use TypeScript)
• eslint-import-resolver-typescript: v3 or later (if you use TypeScript)

pnpm add -D \
  eslint-config-stylish \
  eslint @eslint/js \
  eslint-plugin-import \
  eslint-plugin-jsx-a11y \
  eslint-plugin-react \
  eslint-plugin-react-hooks \
  eslint-plugin-react-you-might-not-need-an-effect \
  typescript-eslint \
  eslint-import-resolver-typescript

Features

• Base: Customized ESLint rules, import/export rules
• React: Customized rules for React, JSX a11y
• TypeScript: Adds TypeScript-specific linting rules and configurations.

Usage

set up your eslint.config.js file like this

Base

import { defineConfig } from 'eslint/config';
import stylish from 'eslint-config-stylish';

export default defineConfig([
  {
    files: ['**/*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'],
    extends: [stylish],
  },
  /* */
]);

React

import { defineConfig } from 'eslint/config';
import stylishReact from 'eslint-config-stylish/react';
import stylishReactHooks from 'eslint-config-stylish/react-hooks';

export default defineConfig([
  {
    files: ['**/*.{js,jsx,tsx}'],
    extends: [stylishReact, stylishReactHooks],
  },
  {
    files: ['**/use*.ts'],
    extends: [stylishReactHooks],
  },
  /* */
]);

TypeScript

import { defineConfig } from 'eslint/config';
import stylishTypeScript from 'eslint-config-stylish/typescript';

export default defineConfig([
  {
    files: ['**/*.{ts,mts,cts,tsx}'],
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json',
        ecmaFeatures: {
          jsx: true,
        },
        ecmaVersion: 12,
        sourceType: 'module',
      },
    },
    extends: [stylishTypeScript],
  },
  /* */
]);

Base rules

• js: recommend
• import: recommended
• react: recommended
• jsx-a11y: recommended
• react-you-might-not-need-an-effect: recommended
• @typescript-eslint strict type checked

Customized rules

js

Rule details

• array-callback-return: error (set allowImplicit to true)
• block-scoped-var: error
• class-methods-use-this: error
• consistent-return: error
• curly: error (multi, consistent)
• default-case: error (Ignore with skip default comment)
• default-case-last: error
• default-param-last: error
• eqeqeq: error
  • always use === and !==
  • ignore null
• grouped-accessor-pairs: error
• guard-for-in: error
• max-classes-per-file: error (1 class per file)
• no-alert: warn
• no-array-constructor: error
• no-await-in-loop: error
• no-caller: error
• no-console: warn
• no-constructor-return: error
• no-div-regex: error
• no-else-return: error (disallow else if blocks after a return too)
• no-eval: error
• no-extend-native: error
• no-extra-bind: error
• no-extra-label: error
• no-implied-eval: error
• no-inner-declarations: error
• no-iterator: error
• no-label-var: error
• no-labels: error
• no-lone-blocks: error
• no-loop-func: error
• no-new: error
• no-new-func: error
• no-new-wrappers: error
• no-object-constructor: error
• no-octal-escape: error
• no-param-reassign: error (ignore to reducer, contexts, request, response, state)
• no-promise-executor-return: error
• no-proto: error
• no-redeclare: error
• no-restricted-exports: error (disallow default, then exports)
• no-restricted-globals: error (isFinite, isNaN)
• no-restricted-properties: error (isFinite, isNaN, __defineGetter__, __defineSetter__)
• no-restricted-syntax: error (WithStatement, LabeledStatement)
• no-return-assign: error (disallow all assignments)
• no-script-url: error
• no-self-compare: error
• no-sequences: error
• no-shadow: error
• no-template-curly-in-string: error
• no-throw-literal: error
• no-undef-init: error
• no-unreachable-loop: error
• no-unused-expressions: error
• no-unused-labels: error
• no-unused-vars: error
  • ignore after used arguments
  • ignore pattern: /^_/
  • ignore rest siblings
• no-use-before-define: error
• no-useless-constructor: error
• no-var: error
• no-void: error (allows the void operator as a statement)
• prefer-promise-reject-errors: error (allow empty reject)
• prefer-rest-params: error
• prefer-spread: error
• radix: error
• symbol-description: error
• valid-typeof: error (require string literals)

Stylistic for js

Rule details

• arrow-body-style: error
• camelcase: error
  • does not check property names, ES2015 imports, global variables
  • allows unstable_ and experimental_ prefixes
• dot-notation: error
• func-names: warn (as needed)
• new-cap: error
  • allows uppercase-started functions to be called without new operators.
  • disables checks on object properties
• no-continue: error
• no-empty-function: error (allow arrowFunctions, functions, methods)
• no-lonely-if: error
• no-multi-assign: error
• no-multi-str: error
• no-nested-ternary: error
• no-plusplus: error (allows in for loops)
• no-unneeded-ternary: error (disallows the conditional expression as a default assignment pattern too)
• no-useless-computed-key: error
• no-useless-concat: error
• no-useless-rename: error
• no-useless-return: error
• object-shorthand: error (ignore constructors, avoid quotes)
• one-var: error (requires multiple variable declarations per scope)
• operator-assignment: error
• prefer-arrow-callback: error
• prefer-const: error (ignore variables that are read between the declaration and the first assignment)
• prefer-destructuring: error
  • VariableDeclarator: set false to array, true to object
  • AssignmentExpression: set true to array, false to object
  • set true to enforceForRenamedProperties
• prefer-exponentiation-operator: error
• prefer-numeric-literals: error
• prefer-object-spread: error
• prefer-regex-literals: error (disallow redundant wrapping)
• prefer-template: error
• unicode-bom: error (never)
• vars-on-top: error
• yoda: error

import

Rule details

• import/export: off
• import/extensions: error
  • disallow extensions after js, jsx, ts, and tsx
  • ignorePackages is set to true
• import/newline-after-import: error
• import/no-cycle: off (due to performance issues)
• import/no-extraneous-dependencies:error
  • set devDependencies for testing (default)
  • project-specific overrides may be required
• import/no-self-import: error
• import/no-unresolved: off
• import/order: error
  • sort by the groups type,builtin,external,internal,parent,sibling, index,
  • set newlines-between to always-and-inside-groups
  • in TypeScript, add the @/components/** pattern (after the internal group)
• import/prefer-default-export: error

react

Rule details

• react/button-has-type: error
• react/destructuring-assignment: error
• react/display-name: off
• react/function-component-definition: error
  • namedComponents set to arrow-function, function-declaration
  • unnamedComponents set to arrow-function
• react/jsx-curly-brace-presence: error (never for props, children)
• react/jsx-curly-newline: error (consistent for multiline, singleline)
• react/jsx-equals-spacing: error
• react/jsx-filename-extension: warn (.js, .jsx, .tsx)
• react/jsx-first-prop-new-line: error
• react/jsx-fragments: error (syntax mode)
• react/jsx-indent: error (2 spaces indentation)
• react/jsx-no-constructed-context-values: error
• react/jsx-no-script-url: error (also applies to Link component)
• react/jsx-no-target-blank: error
• react/jsx-no-useless-fragment: error
• react/jsx-one-expression-per-line: error (allows single child)
• react/jsx-props-no-multi-spaces: error
• react/jsx-tag-spacing: error (beforeSelfClosing only always Everything else never)
• react/jsx-wrap-multilines: error (all properties are set to parens-new-line)
• react/no-invalid-html-attribute: error
• react/no-namespace: error
• react/no-this-in-sfc: error
• react/no-unstable-nested-components: error
• react/no-unused-prop-types: error
• react/prop-types: off (almost all projects use the TypeScript)
• react/require-default-props off (same as above)
• react/self-closing-comp: error
• react/style-prop-object: error
• react/void-dom-elements-no-children: error

react-hooks

Rule details

• react-hooks/rules-of-hooks: error
• react-hooks/exhaustive-deps: warn

You Might Not Need an Effect all rules from the recommended configuration are enabled

jsx-a11y

Rule details

• jsx-a11y/anchor-has-content: error (include Link component)
• jsx-a11y/aria-role: error (apply non-DOM)
• jsx-a11y/control-has-associated-label: error (override depth to 5)
• jsx-a11y/label-has-associated-control: error
  • add Label component to labelComponents option
  • add Input component to controlComponents option
  • set assert to either
  • set depth to the maximum value(25)
• jsx-a11y/no-autofocus: error (apply non-DOM)

@typescript-eslint

Rule details

• @typescript-eslint/class-methods-use-this: error (extends class-methods-use-this)
• @typescript-eslint/consistent-return: error (extends consistent-return)
• @typescript-eslint/default-param-last: error (extends default-param-last)
• @typescript-eslint/no-base-to-string: error (ignore from Error, RegExp, URL, URLSearchParams, ReactNode, ArrayBuffer)
• @typescript-eslint/no-confusing-void-expression: error (ignore "shorthand" arrow functions)
• @typescript-eslint/no-empty-object-type: error (allow interfaces with single extends)
• @typescript-eslint/no-floating-promises: error (ignore void expressions and IIFEs)
• @typescript-eslint/no-loop-func: error (extends no-loop-func)
• @typescript-eslint/no-misused-promises: error (ignore when a Promise is returned from a function typed as returning void)
• @typescript-eslint/no-shadow: error (extends no-shadow)
• @typescript-eslint/no-unused-vars: error (extends no-unused-vars)
• @typescript-eslint/no-use-before-define: error (extends no-use-before-define)
• @typescript-eslint/no-useless-constructor: error (extends no-useless-constructor)
• @typescript-eslint/only-throw-error: error (extends no-throw-literal)
• @typescript-eslint/prefer-destructuring: error (extends prefer-destructuring)
• @typescript-eslint/prefer-promise-reject-errors: error (allow throwing values typed as unknown)
• @typescript-eslint/require-await: off
• @typescript-eslint/restrict-template-expressions: error (allow number)
• @typescript-eslint/unbound-method: error (ignore static)

Stylistic for @typescript-eslint

Rule details

• @typescript-eslint/adjacent-overload-signatures: error
• @typescript-eslint/array-type: error
• @typescript-eslint/ban-tslint-comment: error
• @typescript-eslint/consistent-generic-constructors: error
• @typescript-eslint/consistent-indexed-object-style: error
• @typescript-eslint/consistent-type-assertions: error
• @typescript-eslint/dot-notation: error (extends dot-notation)
• @typescript-eslint/no-confusing-non-null-assertion: error
• @typescript-eslint/no-empty-function: error (extends no-empty-function)
• @typescript-eslint/no-inferrable-types: error
• @typescript-eslint/prefer-find: error
• @typescript-eslint/prefer-for-of: error
• @typescript-eslint/prefer-function-type: error
• @typescript-eslint/prefer-includes: error
• @typescript-eslint/prefer-nullish-coalescing: error
• @typescript-eslint/prefer-optional-chain: error
• @typescript-eslint/prefer-regexp-exec: error
• @typescript-eslint/prefer-string-starts-ends-with: error