Add details of dev Docker image and linting configs from TNA Frontend

docs/technology/backend/python.md

@@ -44,7 +44,9 @@ Some suggested tools and libraries for Python applications are:
 | [django-csp](https://github.com/mozilla/django-csp)                     | Adding a [CSP and other security measures](../standards/security.md) to Django applications |
 | [WhiteNoise](https://github.com/evansd/whitenoise)                      | Serving static files in production from `django.contrib.staticfiles`                        |
 
-## Black
+## Formatters and linters
+
+### Black
 
 [Black](https://black.readthedocs.io/en/stable/) gives you speed, determinism, and freedom from pycodestyle nagging about formatting.
 
@@ -56,7 +58,7 @@ line-length = 80
 include = '\.pyi?$'
 ```
 
-## Flake8
+### Flake8
 
 [Flake8](https://flake8.pycqa.org/en/latest/) is a Python linting tool that checks your Python codebase for errors, styling issues and complexity and follows the [PEP 8 style guide](https://peps.python.org/pep-0008/) for Python code.
 
@@ -77,7 +79,7 @@ Note: you can also ignore rules on particular lines of code or files by adding a
 
 If using the `tna-python-dev` Docker image, [this Flake8 configuration is included](https://github.com/nationalarchives/docker/blob/main/docker/tna-python-dev/lib/.flake8).
 
-## isort
+### isort
 
 The order of the imports can be standardised with [isort](https://pycqa.github.io/isort/).
 
@@ -88,7 +90,27 @@ Add the following configuration to your `pyproject.toml` file:
 profile = "black"
 ```
 
-If using the `tna-python-dev` Docker image, [this isort configuration is included](https://github.com/nationalarchives/docker/blob/main/docker/tna-python-dev/lib/.isort.cfg).
+### Dev Docker image
+
+The [Dev Docker image](https://github.com/nationalarchives/docker/tree/main/docker/tna-python-dev) comes preinstalled with Black, Flake8 and isort. It also includes all the relevant [configurations](https://github.com/nationalarchives/docker/tree/main/docker/tna-python-dev/lib).
+
+You can use it to lint your code by mounting the container image with your project code in your `docker-compose.yml`:
+
+```Dockerfile
+services:
+  dev:
+    image: ghcr.io/nationalarchives/tna-python-dev:latest
+    volumes:
+      - ./:/app
+```
+
+Now you can lint your code by running:
+
+```sh
+docker compose exec dev format
+```
+
+Alternatively, you can simply run `format` inside the container.
 
 ## Poetry
 

docs/technology/frontend/css.md

@@ -50,7 +50,7 @@ On 4th February 2021, frontend developers met to agree a CSS methodology. Having
 [Stylelint](https://stylelint.io/) is "a mighty CSS linter that helps you avoid errors and enforce conventions".
 
 ```sh
-npm install stylelint stylelint-config-standard-scss stylelint-selector-bem-pattern
+npm install stylelint stylelint-config-standard-scss stylelint-selector-bem-pattern stylelint-order
 ```
 
 An example `.stylelintrc` file that addresses all the standards above:
@@ -87,6 +87,27 @@ stylelint 'src/**/*.css'
 stylelint 'src/**/*.scss'
 ```
 
+### TNA Frontend Stylelint config
+
+[TNA Frontend](../../resources/tna-frontend.md) comes with a [Stylelint config](https://github.com/nationalarchives/tna-frontend/blob/main/stylelint.config.js) which you can use in your project.
+
+It includes property ordering for which you will need to install the `stylelint-order` module:
+
+```sh
+npm install stylelint-order
+```
+
+You can then change your `stylelint.config.mjs` to extend the TNA Frontend config:
+
+```js
+import data from "./node_modules/@nationalarchives/frontend/config/stylelint.config.js";
+
+// Add your own rules
+data.ignoreFiles = ["app/**/*.css", "tmp/**/*"];
+
+export default data;
+```
+
 ## Working with high contrast environments
 
 There are two ways of requesting and setting high contrast views in a web application. They use the CSS media features of:

docs/technology/frontend/javascript.md

@@ -78,3 +78,7 @@ module.exports = {
 # Run eslint against all JS files in the src directory
 eslint 'src/**/*.js'
 ```
+
+### TNA Frontend ESLint config
+
+[TNA Frontend](../../resources/tna-frontend.md) comes with an [ESLint config](https://github.com/nationalarchives/tna-frontend/blob/main/.eslintrc.js) which you can use in your project.