diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 6b6c94a297..ab4b721ed1 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -18,3 +18,23 @@ repos:
     hooks:
       - id: prettier
         types_or: [css, scss, javascript, ts, tsx, json, yaml]
+  - repo: https://github.com/pre-commit/mirrors-eslint
+    rev: v8.8.0
+    hooks:
+      - id: eslint
+        types: [file]
+        files: \.(js|ts|tsx)$
+        args: [--report-unused-disable-directives]
+        additional_dependencies:
+          - eslint@8.8.0
+          - '@typescript-eslint/eslint-plugin@5.10.1'
+          - '@typescript-eslint/parser@5.10.1'
+          - '@wagtail/eslint-config-wagtail@0.4.0'
+  - repo: https://github.com/thibaudcolas/pre-commit-stylelint
+    rev: v14.2.0
+    hooks:
+      - id: stylelint
+        files: \.scss$
+        additional_dependencies:
+          - stylelint@14.2.0
+          - '@wagtail/stylelint-config-wagtail@0.3.2'
diff --git a/docs/contributing/developing.rst b/docs/contributing/developing.rst
index 4692e752e0..c431c0d71e 100644
--- a/docs/contributing/developing.rst
+++ b/docs/contributing/developing.rst
@@ -331,3 +331,15 @@ To do this, you can run the following command to see the changes automatically a
 
 .. _Databases documentation: https://docs.djangoproject.com/en/stable/ref/databases/
 .. _DATABASES: https://docs.djangoproject.com/en/stable/ref/settings/#databases
+
+
+Automatically lint and code format on commits
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+
+`pre-commit <https://pre-commit.com/>`_ is configured to automatically run code linting and formatting checks with every commit. To install pre-commit into your git hooks run:
+
+.. code-block:: console
+
+    $ pre-commit install
+
+pre-commit should now run on every commit you make.