Improve local frontend pre-commit (#3012)

.github/workflows/frontend.yml

@@ -27,12 +27,8 @@ jobs:
     - name: Install dependencies
       working-directory: ./helm-frontend
       run: yarn install
-    - name: Run lint
-      working-directory: ./helm-frontend
-      run: yarn lint
-    - name: Run check format
-      working-directory: ./helm-frontend
-      run: yarn format:check
+    - name: Run pre-commit
+      run: ./pre-commit-frontend.sh
     - name: Build
       working-directory: ./helm-frontend
       run: yarn build

.pre-commit-config.yaml

@@ -3,16 +3,17 @@ default_stages: [push]
 repos:
 - repo: local
   hooks:
-    - id: run-pre-commit
-      name: run-pre-commit
+    - id: run-pre-commit-python
+      name: Python pre-commit
       entry: ./pre-commit.sh
       language: script
       pass_filenames: false
       require_serial: true
       types_or: [python]
-- repo: https://github.com/pre-commit/mirrors-prettier
-  rev: 'fc260393cc4ec09f8fc0a5ba4437f481c8b55dc1'
-  hooks:
-    - id: prettier
-      files: "helm-frontend"
-      types_or: [tsx, javascript]
+    - id: run-pre-commit-frontend
+      name: Frontend pre-commit
+      entry: ./pre-commit-frontend.sh
+      language: script
+      pass_filenames: false
+      require_serial: true
+      types_or: [javascript, jsx, ts, tsx]

helm-frontend/package.json

@@ -6,9 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint:check": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx}\"",
-    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\"",
+    "format:check": "prettier --check \"src/**/*.{js,jsx,ts,tsx}\" --log-level warn",
     "preview": "vite preview",
     "test": "vitest"
   },

pre-commit-frontend.sh

@@ -0,0 +1,52 @@
+#!/bin/bash
+
+set -e
+
+FRONTEND_DIR="$(dirname "$0")/helm-frontend"
+cd "$FRONTEND_DIR"
+
+if ! yarn --version &> /dev/null; then
+  echo ""
+  echo ""
+  echo "FAILED: Yarn is not installed"
+  echo "Follow the instructions at https://yarnpkg.com/getting-started/install to install Yarn."
+  echo ""
+  exit 1
+fi
+
+if [ ! -f "yarn.lock" ]; then
+  echo ""
+  echo ""
+  echo "FAILED: Frontend dependencies are not installed. To install frontend dependencies, run:"
+  echo ""
+  echo -e "\tcd $FRONTEND_DIR"
+  echo -e "\tyarn install"
+  echo ""
+  exit 1
+fi
+
+yarn format:check || (
+  echo ""
+  echo ""
+  echo "FAILED: The frontend code formatting check failed. To fix the formatting, run:"
+  echo ""
+  echo -e "\tcd $FRONTEND_DIR"
+  echo -e "\tyarn format"
+  echo -e "\tgit commit -a"
+  echo ""
+  exit 1
+)
+
+yarn lint:check || (
+  echo ""
+  echo ""
+  echo "FAILED: The frontend code linter check failed. To lint the frontend code, run:"
+  echo ""
+  echo -e "\tcd $FRONTEND_DIR"
+  echo -e "\tyarn lint"
+  echo -e "\tgit commit -a"
+  echo ""
+  echo "You may have to manually fix some errors if the automatic linter fails."
+  echo ""
+  exit 1
+)

pre-commit.sh

@@ -7,18 +7,18 @@ set -e
 valid_version=$(python3 -c 'import sys; print(sys.version_info[:2] >= (3, 8))')
 if [ "$valid_version" == "False" ]; then
   echo "Python 3 version (python3 --version) must be at least 3.8, but was:"
-  echo "$(python3 --version 2>&1)"
+  python3 --version 2>&1
   exit 1
 fi
 
 # Python style checks and linting
 black --check --diff src scripts || (
   echo ""
-  echo "The code formatting check failed. To fix the formatting, run:"
   echo ""
+  echo "The code formatting check failed. To fix the formatting, run:"
   echo ""
   echo -e "\tblack src scripts"
-  echo ""
+  echo -e "\tgit commit -a"
   echo ""
   exit 1
 )