Add Prettier GitHub workflow

.github/workflows/prettier.yml

@@ -0,0 +1,75 @@
+name: Prettier
+
+on:
+  pull_request:
+    paths:
+      - 'src/**/*.js'
+      - '.github/workflows/prettier.yml'
+    types:
+      - opened
+      - synchronize
+      - reopened
+      - ready_for_review
+  workflow_dispatch:
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 'latest'
+      - name: Install Node dependencies
+        run: npm ci
+      - name: Run Prettier on changed files
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          git fetch origin main
+          CHANGED_FILES=$(git diff --name-only origin/main...HEAD | grep -E '\.js$|\.jsx$|\.ts$|\.tsx$' || echo "")
+          if [ -n "$CHANGED_FILES" ]; then
+            echo "Fixing the following files:"
+            echo "$CHANGED_FILES"
+            echo "$CHANGED_FILES" | xargs npx prettier --write
+            # Join the filenames into a single line with space separation.
+            JOINED_FILES=$(echo $CHANGED_FILES | tr '\n' ' ')
+            echo "CHANGED_FILES=$JOINED_FILES" >> $GITHUB_ENV
+          else
+            echo "No files to format"
+          fi
+      - name: Commit and push Prettier changes
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          # Check for changes.
+          if [ -n "$(git status --porcelain)" ]; then
+            git config user.name "Pantheon Bot"
+            git config user.email "bot@getpantheon.com"
+            git add .
+            git commit -m "Apply Prettier formatting"
+            git push origin HEAD:${{ github.head_ref }}
+
+            DIFF_OUTPUT=$(git diff HEAD~1 HEAD)
+            echo "DIFF_OUTPUT<<EOF" >> $GITHUB_ENV
+            echo "$DIFF_OUTPUT" >> $GITHUB_ENV
+            echo "EOF" >> $GITHUB_ENV
+          else
+            echo "No changes to commit"
+          fi
+      - name: Set Prettier diff output
+        env:
+          GH_TOKEN: ${{ github.token }}
+        run: |
+          if [ -n "${{ env.DIFF_OUTPUT }}" ]; then
+            CURRENT_COMMIT=$(git rev-parse --short HEAD)
+            gh pr comment ${{ github.event.pull_request.number }} --body "$(echo -e "Hi from your friendly robot! 🤖\n\nI've applied Prettier formatting to the following files in $CURRENT_COMMIT:\n\n\`${{ env.CHANGED_FILES }}\`\n\nThe full diff is below. Please review the changes.\n\n<details>\n<summary>Click to expand</summary>\n\n\`\`\`diff\n$DIFF_OUTPUT\n\`\`\`\n</details>")"
+          else
+            echo "No Prettier changes"
+          fi

README.md

@@ -110,6 +110,20 @@ lando start
 
 You can view the local environment at `localhost:8000/`. Updates to docs are automatically refreshed in the browser.
 
+## Linting and Code Formatting
+We use ESLint and Prettier to enforce code style. On each pull request to the repository, if any `.js`, `.jsx`, `.ts` or `.tsx` files are modified in the `/src` directory, ESLint will run against our Prettier configuration to check for code styling issues on the updated/changed files.
+
+To check for linting issues locally, run:
+```bash
+npm run lint
+```
+
+To automatically fix linting issues across the entire `/src` directory, run:
+```bash
+npm run format
+```
+Be cautious when running this command, as it will automatically fix any linting issues it can.
+
 ## Testing
 
 We include several tools to test that new content doesn't break the documentation. Most of these tests are performed automatically by our continuous integration service, but pull requests created from external contributors aren't included in CI tests. If you want to manually test your branch, you can execute the following tests within the Docker container.

eslint.config.js

@@ -0,0 +1,27 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+
+const compat = new FlatCompat({
+  baseDirectory: process.cwd(),
+  recommendedConfig: js.configs.recommended,
+});
+
+export default [
+  {
+    ignores: ['node_modules/**'],
+  },
+  ...compat.config({
+    extends: ['plugin:prettier/recommended'],
+    plugins: ['prettier'],
+    rules: {
+      'prettier/prettier': 'error',
+    },
+    globals: {
+      MktoForms2: 'readonly',
+      jQuery: 'readonly',
+      $: 'readonly',
+    },
+  }),
+  prettier,
+];