@wagtail/eslint-config-wagtail

Shareable ESLint config for Wagtail.

The package provides Wagtail's ESLint configuration as an extensible shared config using the ESLint flat config format.

• Usage
• Links
• Code style
• Contribution Guidelines
  • Install
  • Development
• Rules

Usage

This package uses ESLint v9+ flat config format. Install it with its peer dependencies:

npm install --save-dev @wagtail/eslint-config-wagtail@latest

Then, import and use the config in your eslint.config.js file:

import wagtailConfig from '@wagtail/eslint-config-wagtail';

export default [
  ...wagtailConfig,
  // Your custom config here
];

Code style

This ESLint config includes recommended rules from:

• ESLint rules
• eslint-plugin-import
• eslint-plugin-react
• eslint-plugin-react-hooks
• eslint-plugin-jsx-a11y
• eslint-config-prettier

With some Wagtail-specific customizations:

• Use soft-tabs with a two space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
• We accept snake_case in object properties, such as ajaxResponse.page_title, however camelCase or UPPER_CASE should be used everywhere else.

Contribution Guidelines

Install

• Required Node
• We recommend using nvm
• Clone the project on to your computer
• Run nvm install to ensure you have the correct Node version
• Run npm install to install project dependencies
• Ensure your editor is set up to use editorconfig, Prettier and Eslint

Development

• Run nvm use to set Node to the correct version
• Run tests via npm run test
• Run linting via npm run lint
• Run preflight checks before commiting final code via npm run preflight
• Note: When working with the rule set, only modify the index.js file, not the eslint.config.js file as it is for the linting of this project only

Rules

Rule	Severity	Config
@stylistic/lines-between-class-members	error	"always", {"exceptAfterOverload":true,"exceptAfterSingleLine":true}
@stylistic/spaced-comment	error	see Config
@typescript-eslint/adjacent-overload-signatures	error
@typescript-eslint/array-type	error	{"default":"array-simple"}
@typescript-eslint/ban-ts-comment	error	{"minimumDescriptionLength":10}
@typescript-eslint/ban-tslint-comment	error
@typescript-eslint/class-literal-property-style	error
@typescript-eslint/consistent-generic-constructors	error
@typescript-eslint/consistent-type-assertions	error
@typescript-eslint/consistent-type-definitions	error
@typescript-eslint/no-array-constructor	error
@typescript-eslint/no-confusing-non-null-assertion	error
@typescript-eslint/no-duplicate-enum-values	error
@typescript-eslint/no-dynamic-delete	error
@typescript-eslint/no-empty-function	error	{"allow":["arrowFunctions","functions","methods"]}
@typescript-eslint/no-empty-object-type	error
@typescript-eslint/no-explicit-any	error
@typescript-eslint/no-extra-non-null-assertion	error
@typescript-eslint/no-extraneous-class	error	{"allowConstructorOnly":true}
@typescript-eslint/no-inferrable-types	error
@typescript-eslint/no-invalid-void-type	error
@typescript-eslint/no-misused-new	error
@typescript-eslint/no-namespace	error
@typescript-eslint/no-non-null-asserted-nullish-coalescing	error
@typescript-eslint/no-non-null-asserted-optional-chain	error
@typescript-eslint/no-require-imports	error
@typescript-eslint/no-shadow	error
@typescript-eslint/no-this-alias	error
@typescript-eslint/no-unnecessary-type-constraint	error
@typescript-eslint/no-unsafe-declaration-merging	error
@typescript-eslint/no-unsafe-function-type	error
@typescript-eslint/no-unused-expressions	error	see Config
@typescript-eslint/no-unused-vars	error	see Config
@typescript-eslint/no-use-before-define	error
@typescript-eslint/no-useless-constructor	error
@typescript-eslint/no-wrapper-object-types	error
@typescript-eslint/prefer-as-const	error
@typescript-eslint/prefer-for-of	error
@typescript-eslint/prefer-function-type	error
@typescript-eslint/prefer-literal-enum-member	error
@typescript-eslint/prefer-namespace-keyword	error
@typescript-eslint/triple-slash-reference	error
@typescript-eslint/unified-signatures	error
array-callback-return	error	{"allowImplicit":true,"checkForEach":false,"allowVoid":false}
arrow-body-style	error	"as-needed"
block-scoped-var	error
camelcase	error	see Config
consistent-return	error	{"treatUndefinedAsUnspecified":false}
constructor-super	error
default-case	error	{"commentPattern":"^no default$"}
default-case-last	error
default-param-last	error
dot-notation	error	{"allowKeywords":true,"allowPattern":""}
eqeqeq	error	"always", {"null":"ignore"}
for-direction	error
func-names	warn	"always", {}
getter-return	error	{"allowImplicit":false}
grouped-accessor-pairs	error	"anyOrder", {"enforceForTSTypes":false}
guard-for-in	error
id-length	warn	see Config
import-x/default	error
import-x/export	error
import-x/first	error
import-x/namespace	error
import-x/newline-after-import	error
import-x/no-absolute-path	error
import-x/no-amd	error
import-x/no-cycle	error
import-x/no-duplicates	error
import-x/no-dynamic-require	error
import-x/no-extraneous-dependencies	error	see Config
import-x/no-import-module-exports	error	{"exceptions":[]}
import-x/no-mutable-exports	error
import-x/no-named-as-default	error
import-x/no-named-default	error
import-x/no-relative-packages	error
import-x/no-self-import	error
import-x/no-unresolved	error	{"commonjs":true,"caseSensitive":true}
import-x/no-useless-path-segments	error	{"commonjs":true}
import-x/no-webpack-loader-syntax	error
import-x/order	error	see Config
jsx-a11y/alt-text	error
jsx-a11y/anchor-has-content	error
jsx-a11y/anchor-is-valid	error
jsx-a11y/aria-activedescendant-has-tabindex	error
jsx-a11y/aria-props	error
jsx-a11y/aria-proptypes	error
jsx-a11y/aria-role	error
jsx-a11y/aria-unsupported-elements	error
jsx-a11y/autocomplete-valid	error
jsx-a11y/click-events-have-key-events	error
jsx-a11y/control-has-associated-label	error	see Config
jsx-a11y/heading-has-content	error
jsx-a11y/html-has-lang	error
jsx-a11y/iframe-has-title	error
jsx-a11y/img-redundant-alt	error
jsx-a11y/interactive-supports-focus	error	see Config
jsx-a11y/label-has-associated-control	error	{"assert":"both","depth":25}
jsx-a11y/lang	error
jsx-a11y/media-has-caption	error
jsx-a11y/mouse-events-have-key-events	error
jsx-a11y/no-access-key	error
jsx-a11y/no-autofocus	error
jsx-a11y/no-distracting-elements	error
jsx-a11y/no-interactive-element-to-noninteractive-role	error	{"tr":["none","presentation"],"canvas":["img"]}
jsx-a11y/no-noninteractive-element-interactions	error	see Config
jsx-a11y/no-noninteractive-element-to-interactive-role	error	see Config
jsx-a11y/no-noninteractive-tabindex	error	{"tags":[],"roles":["tabpanel"],"allowExpressionValues":true}
jsx-a11y/no-redundant-roles	error
jsx-a11y/no-static-element-interactions	error	see Config
jsx-a11y/role-has-required-aria-props	error
jsx-a11y/role-supports-aria-props	error
jsx-a11y/scope	error
jsx-a11y/tabindex-no-positive	error
new-cap	error	see Config
no-alert	warn
no-async-promise-executor	error
no-await-in-loop	error
no-bitwise	error	{"allow":[],"int32Hint":false}
no-caller	error
no-case-declarations	error
no-class-assign	error
no-compare-neg-zero	error
no-cond-assign	error	"always"
no-console	warn	{}
no-const-assign	error
no-constant-binary-expression	error
no-constant-condition	error	{"checkLoops":"allExceptWhileTrue"}
no-constructor-return	error
no-continue	error
no-control-regex	error
no-debugger	error
no-delete-var	error
no-dupe-args	error
no-dupe-class-members	error
no-dupe-else-if	error
no-dupe-keys	error
no-duplicate-case	error
no-else-return	error	{"allowElseIf":false}
no-empty	error	{"allowEmptyCatch":false}
no-empty-character-class	error
no-empty-pattern	error	{"allowObjectPatternsAsParameters":false}
no-empty-static-block	error
no-eval	error	{"allowIndirect":false}
no-ex-assign	error
no-extend-native	error	{"exceptions":[]}
no-extra-bind	error
no-extra-boolean-cast	error	{}
no-extra-label	error
no-fallthrough	error	{"allowEmptyCase":false,"reportUnusedFallthroughComment":false}
no-func-assign	error
no-global-assign	error	{"exceptions":[]}
no-implied-eval	error
no-import-assign	error
no-inner-declarations	error	"functions", {"blockScopedFunctions":"allow"}
no-invalid-regexp	error	{}
no-irregular-whitespace	error	see Config
no-iterator	error
no-label-var	error
no-labels	error	{"allowLoop":false,"allowSwitch":false}
no-lone-blocks	error
no-lonely-if	error
no-loop-func	error
no-loss-of-precision	error
no-misleading-character-class	error	{"allowEscape":false}
no-multi-assign	error	{"ignoreNonDeclaration":false}
no-multi-str	error
no-nested-ternary	error
no-new	warn
no-new-func	error
no-new-native-nonconstructor	error
no-new-wrappers	error
no-nonoctal-decimal-escape	error
no-obj-calls	error
no-object-constructor	error
no-octal	error
no-octal-escape	error
no-param-reassign	error
no-plusplus	error	{"allowForLoopAfterthoughts":false}
no-promise-executor-return	error	{"allowVoid":false}
no-proto	error
no-prototype-builtins	error
no-redeclare	error	{"builtinGlobals":true}
no-regex-spaces	error
no-restricted-exports	error	{"restrictedNamedExports":["default","then"]}
no-restricted-globals	error	see Config
no-restricted-properties	error	see Config
no-restricted-syntax	error	see Config
no-return-assign	error	"always"
no-script-url	error
no-self-assign	error	{"props":true}
no-self-compare	error
no-sequences	error	{"allowInParentheses":true}
no-setter-return	error
no-shadow-restricted-names	error	{"reportGlobalThis":false}
no-sparse-arrays	error
no-template-curly-in-string	error
no-this-before-super	error
no-undef	error	{"typeof":false}
no-undef-init	error
no-underscore-dangle	error	see Config
no-unneeded-ternary	error	{"defaultAssignment":false}
no-unreachable	error
no-unreachable-loop	error	{"ignore":[]}
no-unsafe-finally	error
no-unsafe-negation	error	{"enforceForOrderingRelations":false}
no-unsafe-optional-chaining	error	{"disallowArithmeticOperators":true}
no-unused-labels	error
no-unused-private-class-members	error
no-useless-backreference	error
no-useless-catch	error
no-useless-computed-key	error	{"enforceForClassMembers":true}
no-useless-concat	error
no-useless-escape	error	{"allowRegexCharacters":[]}
no-useless-rename	error	{"ignoreDestructuring":false,"ignoreImport":false,"ignoreExport":false}
no-useless-return	error
no-void	error	{"allowAsStatement":false}
no-with	error
object-shorthand	error	"methods"
one-var	error	"never"
operator-assignment	error	"always"
prefer-arrow-callback	error	{"allowNamedFunctions":false,"allowUnboundThis":true}
prefer-const	error	{"destructuring":"any","ignoreReadBeforeAssign":true}
prefer-exponentiation-operator	error
prefer-numeric-literals	error
prefer-object-spread	error
prefer-promise-reject-errors	error	{"allowEmptyReject":true}
prefer-regex-literals	error	{"disallowRedundantWrapping":true}
prefer-rest-params	error
prefer-spread	error
radix	error	"always"
react-hooks/component-hook-factories	error
react-hooks/config	error
react-hooks/error-boundaries	error
react-hooks/exhaustive-deps	error
react-hooks/gating	error
react-hooks/globals	error
react-hooks/immutability	error
react-hooks/incompatible-library	warn
react-hooks/preserve-manual-memoization	error
react-hooks/purity	error
react-hooks/refs	error
react-hooks/rules-of-hooks	error
react-hooks/set-state-in-effect	error
react-hooks/set-state-in-render	error
react-hooks/static-components	error
react-hooks/unsupported-syntax	warn
react-hooks/use-memo	error
react/button-has-type	error	{"reset":false,"button":true,"submit":true}
react/default-props-match-prop-types	error	{"allowRequiredDefaults":false}
react/destructuring-assignment	error
react/display-name	error
react/forbid-foreign-prop-types	warn	{"allowInPropTypes":true}
react/forbid-prop-types	error	{"checkContextTypes":true,"checkChildContextTypes":true}
react/function-component-definition	error	see Config
react/hook-use-state	error
react/jsx-curly-brace-presence	error	{"props":"never","children":"never"}
react/jsx-filename-extension	error
react/jsx-fragments	error
react/jsx-key	error
react/jsx-no-comment-textnodes	error
react/jsx-no-constructed-context-values	error
react/jsx-no-duplicate-props	error	{"ignoreCase":true}
react/jsx-no-script-url	error
react/jsx-no-target-blank	error
react/jsx-no-undef	error
react/jsx-no-useless-fragment	error
react/jsx-pascal-case	error	{"allowAllCaps":true}
react/jsx-props-no-spreading	error	{"explicitSpread":"ignore"}
react/jsx-uses-react	error
react/jsx-uses-vars	error
react/no-access-state-in-setstate	error
react/no-array-index-key	error
react/no-arrow-function-lifecycle	error
react/no-children-prop	error
react/no-danger	warn
react/no-danger-with-children	error
react/no-deprecated	error
react/no-did-update-set-state	error
react/no-direct-mutation-state	error
react/no-find-dom-node	error
react/no-invalid-html-attribute	error
react/no-is-mounted	error
react/no-namespace	error
react/no-redundant-should-component-update	error
react/no-render-return-value	error
react/no-string-refs	error
react/no-this-in-sfc	error
react/no-typos	error
react/no-unescaped-entities	error
react/no-unknown-property	error
react/no-unstable-nested-components	error
react/no-unused-class-component-methods	error
react/no-unused-prop-types	error
react/no-unused-state	error
react/no-will-update-set-state	error
react/prefer-exact-props	error
react/prefer-stateless-function	error	{"ignorePureComponents":true}
react/react-in-jsx-scope	error
react/require-default-props	error	{"forbidDefaultForRequired":true}
react/require-render-return	error
react/self-closing-comp	error
react/state-in-constructor	error
react/static-property-placement	error	"property assignment"
react/style-prop-object	error
react/void-dom-elements-no-children	error
require-yield	error
strict	error	"never"
symbol-description	error
unicode-bom	error	"never"
use-isnan	error	{"enforceForIndexOf":false,"enforceForSwitchCase":true}
valid-typeof	error	{"requireStringLiterals":true}
vars-on-top	error
yoda	error	"never", {"exceptRange":false,"onlyEquality":false}