Verwenden eines Git Pre-Commit Hooks mit axe DevTools Linter
Ein Git-Pre-Commit-Hook ermöglicht es Ihnen, Dateien mit dem axe DevTools Linter auf Zugänglichkeitsprobleme zu überprüfen, bevor sie in Git festgeschrieben werden können.
Jedes Mal, wenn ein Benutzer mit git commit einen Commit zu Git durchführt, wird der Pre-Commit-Hook ausgeführt und übermittelt den Code an eine konfigurierte Instanz von axe DevTools Linter, um ihn auf Zugänglichkeitsprobleme zu überprüfen.
Einrichtung
Da der Pre-Commit-Hook den axe DevTools Linter erfordert, sollten Sie die Installationsanleitungen für den Server Einrichten des axe DevTools Linter und den Connector Verwenden des axe DevTools Linter Connector lesen.
Das Hooks-Verzeichnis
Wenn Sie ein neues Repository erstellen, erstellt Git ein Verzeichnis .git/hooks, das Beispiel-Hooks enthält. Indem Sie ein Skript in diesem Verzeichnis pre-commit nennen, bewirken Sie, dass das Skript immer dann ausgeführt wird, wenn jemand versucht, einen Commit zu machen.
Beispiel-Linter-Skript
Am Ende dieses Abschnitts finden Sie ein Beispielskript, das Sie als Pre-Commit-Skript mit Git verwenden können. Nachdem Sie es in das Hooks-Verzeichnis kopiert haben, stellen Sie sicher, dass das Skript ausführbar ist:
chmod +x pre-commitDie einzige Zeile, die Sie im Skript ändern sollten, ist die Zeile, die den Hostnamen enthält, auf dem Ihre Instanz von axe DevTools Linter ausgeführt wird:
export AXE_LINTER_SERVER_URL=http://localhostIn selteneren Fällen müssen Sie möglicherweise den Port ändern, der für die Kommunikation mit dem Server verwendet wird:
export AXE_LINTER_SERVER_PORT=3000Folgendes ist das Beispielskript Pre-Commit , das Sie mit Git und dem gemeinsam genutzten axe DevTools Linter SaaS-Server verwenden können. Um dies mit dem lokalen Server zu verwenden, müssen Sie den AXE_LINTER_SERVER_URL ändern und den --api-key entfernen:
#!/bin/bash
# axe DevTools Linter pre-commit
# This script will setup the environment variables needed for axe-linter-connector
# and execute axe-linter-connector. The output file will be reviewed and call back with exit codes:
## 0 - No Accessibility Defects
## 1 - axe DevTools Linter Detected Accessibility Defects
## 2 - Execution problem, or axe DevTools Linter unavailable.
echo "axe DevTools Linter Starting $(date)"
# Setup variables for axe DevTools Linter
export AXE_LINTER_SERVER_URL=https://axe-linter.deque.com/
StatusCode=0
if [[ -z "${AXE_LINTER_API_KEY}" ]]; then
echo "AXE_LINTER_API_KEY must be set"
exit 2
fi
# Configure verbose output.
VerboseOutput="false"
# Configure outfile: output in Generic Issue Import Format for in execution directory.
OutFile="axe-linter-report.json"
for i in $(git status --porcelain | sed s/^...//); do
rm -f $OutFile
TempCode=0
shopt -s nocasematch;
if [[ $i == *.html ]] || [[ $i == *.js ]] || [[ $i == *.jsx ]] || [[ $i == *.tsx ]]|| [[ $i == *.vue ]]|| [[ $i == *.htm ]]|| [[ $i == *.md ]]|| [[ $i == *.markdown ]];
then
if $VerboseOutput; then
echo "Accessibility check: file: $i"
fi
# execute axe DevTools Linter Connector
axe-linter-connector -s $i -d . --api-key $AXE_LINTER_API_KEY --config ./axe-linter.yml --url $AXE_LINTER_SERVER_URL
if [ ! -f "$OutFile" ];then
echo "$OutFile Does Not Exist"
exit 2
elif cat "$OutFile" | grep -q "BUG"; then
if $VerboseOutput; then
cat $OutFile
fi
echo "**axe DevTools Linter Accessibility Issues Detected: $i"
TempCode=1
else
echo "No axe DevTools Linter Connector Issues Detected in: $i"
fi
if [ "$TempCode" != "0" ]; then
StatusCode=1
fi
rm $OutFile
fi
done
if [ "$StatusCode" != "0" ]; then
echo "Commit Failed due to Accessibility Issues"
fi
exit $StatusCode