chore(ci): add Prettier to CI workflow (#111)

Author: nicomiguelino

.github/workflows/lint.yaml .github/workflows/lint-and-format.yaml.github/workflows/lint.yaml renamed to .github/workflows/lint-and-format.yaml

@@ -1,5 +1,5 @@
 ---
-name: Run ESLint
+name: Run ESLint and Prettier
 
 on:
   pull_request:
@@ -12,17 +12,28 @@ on:
       - v*.*
 
 jobs:
-  build:
+  run-eslint:
     runs-on: ubuntu-latest
     name: Run ESLint
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
       - name: Build Docker images
         run: |
           docker compose build
-
       - name: Run ESLint
         run: |
           ./bin/run_eslint.sh src/
+
+  run-prettier:
+    runs-on: ubuntu-latest
+    name: Run Prettier
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Build Docker images
+        run: |
+          docker compose build
+      - name: Run Prettier
+        run: |
+          MODE="check" ./bin/run_formatter.sh

README.md

@@ -11,8 +11,8 @@
         <img alt="GitHub Actions Workflow Status"
             src="https://img.shields.io/github/actions/workflow/status/Screenly/Browser-Extension/build.yaml?label=Build%20Browser%20Extensions&branch=master&style=for-the-badge">
     </a>
-    <a href="https://github.com/Screenly/Browser-Extension/actions/workflows/lint.yaml?query=branch%3Amaster">
-        <img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/Screenly/Browser-Extension/lint.yaml?branch=master&style=for-the-badge&label=ESLint">
+    <a href="https://github.com/Screenly/Browser-Extension/actions/workflows/lint-and-format.yaml?query=branch%3Amaster">
+        <img alt="GitHub Actions Workflow Status" src="https://img.shields.io/github/actions/workflow/status/Screenly/Browser-Extension/lint-and-format.yaml?branch=master&style=for-the-badge&label=ESLint and Prettier">
     </a>
     <a href="https://app.sbomify.com/component/NwxGnn8u8K">
         <img src="https://img.shields.io/badge/_-sbomified-8A2BE2?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjU3IiBoZWlnaHQ9IjI1NyIgdmlld0JveD0iMCAwIDI1NyAyNTciIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxjaXJjbGUgY3g9IjEyOC41IiBjeT0iMTI4LjUiIHI9IjEyOC41IiBmaWxsPSIjMTQxMDM1Ii8+CjxwYXRoIGQ9Ik02My45Mzc5IDgwLjAwMDlDNTcuNTM3NCA3OS45MTMyIDU3LjUyNDkgODkuOTk4OSA2My45Mzc5IDg5LjkxMTJIOTcuNzI4NUMxMDQuMTU0IDkwLjAyNCAxMDQuMTY3IDc5Ljg4ODIgOTcuNzI4NSA4MC4wMDA5SDYzLjkzNzlaTTExMy43OCA4MC4wMDA5QzEwNy40MDQgNzkuOTEzMiAxMDcuMzY3IDg5Ljk5ODkgMTEzLjc4IDg5LjkxMTJIMTk0LjA3NUMxOTYuOCA4OS45MTEyIDE5OSA4Ny42OTM2IDE5OSA4NC45NzQ5QzE5OSA4Mi4yMzExIDE5Ni44IDgwLjAxMzUgMTk0LjA3NSA4MC4wMTM1SDExMy43OFY4MC4wMDA5Wk02My45Mzc5IDk3LjE0MDRDNTcuNTQ5OSA5Ny4wNTI3IDU3LjUxMjQgMTA3LjE1MSA2My45Mzc5IDEwNy4wNTFIMTE5LjM1NUMxMjIuMDgxIDEwNy4wNTEgMTI0LjI4MSAxMDQuODMzIDEyNC4yODEgMTAyLjEwMkMxMjQuMjkzIDk5LjM3MDUgMTIyLjA4MSA5Ny4xNDA0IDExOS4zNTUgOTcuMTQwNEg2My45Mzc5Wk02My45Mzc5IDExNC4zMDVDNTcuNTYyNCAxMTQuMjE3IDU3LjUxMjQgMTI0LjI3OCA2My45Mzc5IDEyNC4xOUgxNDQuNjdDMTQ3LjM5NSAxMjQuMTkgMTQ5LjU5NiAxMjEuOTcyIDE0OS41OTYgMTE5LjI1NEMxNDkuNTk2IDExNi41MjIgMTQ3LjM4MyAxMTQuMzE3IDE0NC42NyAxMTQuMzE3SDYzLjkzNzlWMTE0LjMwNVpNMTk0LjA3NSAxNzYuOTk5QzIwMC40NzUgMTc3LjA4NyAyMDAuNDg4IDE2Ny4wMDEgMTk0LjA3NSAxNjcuMDg5SDE2MC4yODRDMTUzLjg1OCAxNjYuOTc2IDE1My44NDYgMTc3LjExMiAxNjAuMjg0IDE3Ni45OTlIMTk0LjA3NVpNMTQ0LjIyIDE3Ni45OTlDMTUwLjU5NiAxNzcuMDg3IDE1MC42MzMgMTY3LjAwMSAxNDQuMjIgMTY3LjA4OUg2My45MjU0QzYxLjIxMjcgMTY3LjEwMSA1OSAxNjkuMzA2IDU5IDE3Mi4wMzhDNTkgMTc0Ljc4MSA2MS4yMDAyIDE3Ni45OTkgNjMuOTI1NCAxNzYuOTk5SDE0NC4yMlpNMTk0LjA3NSAxNTkuODZDMjAwLjQ2MyAxNTkuOTQ3IDIwMC41IDE0OS44NDkgMTk0LjA3NSAxNDkuOTQ5SDEzOC42NTdDMTM1LjkzMiAxNDkuOTQ5IDEzMy43MzIgMTUyLjE2NyAxMzMuNzMyIDE1NC44OThDMTMzLjcxOSAxNTcuNjMgMTM1LjkzMiAxNTkuODYgMTM4LjY1NyAxNTkuODZIMTk0LjA3NVpNMTk0LjA3NSAxNDIuNjk1QzIwMC40NSAxNDIuNzgzIDIwMC41IDEzMi43MjIgMTk0LjA3NSAxMzIuODFIMTEzLjM0MkMxMTAuNjE3IDEzMi44MSAxMDguNDE3IDEzNS4wMjggMTA4LjQxNyAxMzcuNzQ2QzEwOC40MTcgMTQwLjQ3OCAxMTAuNjMgMTQyLjY4MyAxMTMuMzQyIDE0Mi42ODNIMTk0LjA3NVYxNDIuNjk1WiIgZmlsbD0idXJsKCNwYWludDBfbGluZWFyXzM5Nl8yOTcpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzk2XzI5NyIgeDE9IjU5IiB5MT0iMTI4LjUiIHgyPSIyMDIuMjMzIiB5Mj0iMTQxLjU2NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBvZmZzZXQ9IjAuMDYiIHN0b3AtY29sb3I9IiM0MDU5RDAiLz4KPHN0b3Agb2Zmc2V0PSIwLjU1NSIgc3RvcC1jb2xvcj0iI0NDNThCQiIvPgo8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGNEI1N0YiLz4KPC9saW5lYXJHcmFkaWVudD4KPC9kZWZzPgo8L3N2Zz4K">
@@ -91,15 +91,15 @@ $ ./bin/run_tests.sh
   * You can either select the `manifest.json` file or the zipped extension.
 * Find the extension URL and then open `moz-extension://<extension-id>/test/tests.html` in Firefox.
 
-## :mag: Run Linter and Formatter
+## :sparkles: Run Linter and Formatter
 
 Build the Docker image, which is a one-time operation:
 
 ```bash
 $ docker compose build
 ```
 
-Run the linter:
+### :broom: Run Linter
 
 ```bash
 $ ./bin/run_eslint.sh src/
@@ -112,14 +112,13 @@ This will run ESLint on the codebase and show any style issues or potential prob
 This project uses [Prettier](https://prettier.io/) to format the code.
 For more information why the linter and formatter are separate, see [this article about ESLint deprecating formatting rules](https://eslint.org/blog/2023/10/deprecating-formatting-rules/).
 
-Build the Docker image, which is a one-time operation:
-
+To check the code for formatting issues without changing any files, use the `check` mode:
 ```bash
-$ docker compose build
+$ MODE="check" ./bin/run_formatter.sh
 ```
 
-Run the formatter:
+To format the code and fix formatting issues, use the `write` mode:
 
 ```bash
-$ ./bin/run_formatter.sh
+$ MODE="write" ./bin/run_formatter.sh
 ```

bin/run_formatter.sh

@@ -3,10 +3,17 @@
 set -euo pipefail
 IFS=$'\n\t'
 
-# -v mount under same path as on host to make the paths used by arc lint work.
+MODE="${MODE:-check}"
+
+if [[ ! "$MODE" =~ ^(check|write)$ ]]; then
+    echo "Invalid mode: $MODE"
+    echo "\$MODE should be either \`check\` or \`write\`"
+    exit 1
+fi
+
 docker run \
     --rm \
     -v $(pwd):/app:delegated \
     -v /app/node_modules \
     sbe_webpack:latest \
-    npx prettier src/ --write
+    npx prettier src/ --${MODE}

src/assets/ts/popup.tsx

@@ -41,10 +41,16 @@ const PopupPage: React.FC = () => {
       setAssetDashboardLink(event.detail);
     }) as EventListener;
 
-    document.addEventListener('set-asset-dashboard-link', handleAssetDashboardLink);
+    document.addEventListener(
+      'set-asset-dashboard-link',
+      handleAssetDashboardLink,
+    );
 
     return () => {
-      document.removeEventListener('set-asset-dashboard-link', handleAssetDashboardLink);
+      document.removeEventListener(
+        'set-asset-dashboard-link',
+        handleAssetDashboardLink,
+      );
     };
   }, []);