Add ESlint & Stylelint to pre-commit hooks (#7931). Fix #7909

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

.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'

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.