|
| 1 | +--- |
| 2 | +name: fiori-eslint-lint |
| 3 | +description: Run ESLint on a SAP Fiori project and report results or auto-fix issues using @sap-ux/eslint-plugin-fiori-tools. Use when the user asks to lint, check code quality, fix ESLint errors, or run code style checks on a Fiori app. |
| 4 | +compatibility: Requires Node.js and an eslint.config.mjs configured with @sap-ux/eslint-plugin-fiori-tools. If not configured, use the fiori-eslint-setup skill first. |
| 5 | +metadata: |
| 6 | + author: sap-ux |
| 7 | + version: "1.0" |
| 8 | +--- |
| 9 | + |
| 10 | +# Fiori ESLint Lint & Fix |
| 11 | + |
| 12 | +Run ESLint on a SAP Fiori project to check code quality and optionally auto-fix issues. |
| 13 | + |
| 14 | +## Step 1 — Verify ESLint is configured |
| 15 | + |
| 16 | +Before running lint, check that an ESLint config exists: |
| 17 | + |
| 18 | +```bash |
| 19 | +ls eslint.config.mjs eslint.config.js eslint.config.cjs 2>/dev/null |
| 20 | +``` |
| 21 | + |
| 22 | +For CAP projects, check app subfolders: |
| 23 | +```bash |
| 24 | +find . -name "eslint.config.mjs" -not -path "*/node_modules/*" 2>/dev/null |
| 25 | +``` |
| 26 | + |
| 27 | +**If no config is found**: Use the `fiori-eslint-setup` skill first to create one, then return here. |
| 28 | + |
| 29 | +## Step 2 — Locate the app to lint |
| 30 | + |
| 31 | +Determine which directory to lint: |
| 32 | + |
| 33 | +- **Standalone Fiori app**: `webapp/` at the project root |
| 34 | +- **CAP project**: Each app under `app/<app-name>/webapp/` |
| 35 | + |
| 36 | +For CAP projects, list available apps: |
| 37 | +```bash |
| 38 | +ls app/ 2>/dev/null |
| 39 | +find app -name "manifest.json" -not -path "*/node_modules/*" 2>/dev/null |
| 40 | +``` |
| 41 | + |
| 42 | +If the user specified a particular app or path, use that. Otherwise lint the detected location. |
| 43 | + |
| 44 | +## Step 3 — Run lint (check mode) |
| 45 | + |
| 46 | +Run ESLint to report issues without modifying files: |
| 47 | + |
| 48 | +### Standalone Fiori app: |
| 49 | +```bash |
| 50 | +npx eslint webapp/ |
| 51 | +``` |
| 52 | + |
| 53 | +### CAP project — specific app: |
| 54 | +```bash |
| 55 | +# Run from the app subfolder (where eslint.config.mjs is) |
| 56 | +cd app/<app-name> && npx eslint webapp/ |
| 57 | +``` |
| 58 | + |
| 59 | +### CAP project — all apps: |
| 60 | +```bash |
| 61 | +# Find and lint each app that has its own eslint.config.mjs |
| 62 | +find app -name "eslint.config.mjs" -not -path "*/node_modules/*" | while read config; do |
| 63 | + appdir=$(dirname "$config") |
| 64 | + echo "=== Linting $appdir ===" |
| 65 | + (cd "$appdir" && npx eslint webapp/ 2>&1) |
| 66 | +done |
| 67 | +``` |
| 68 | + |
| 69 | +### With detailed output format: |
| 70 | +```bash |
| 71 | +# More readable output with file/line references |
| 72 | +npx eslint webapp/ --format stylish |
| 73 | +``` |
| 74 | + |
| 75 | +## Step 4 — Interpret the output |
| 76 | + |
| 77 | +ESLint output shows: |
| 78 | +- **Errors** (`error`): Must be fixed — these violate required Fiori coding standards |
| 79 | +- **Warnings** (`warning`): Should be reviewed — best practice suggestions |
| 80 | + |
| 81 | +Example output: |
| 82 | +``` |
| 83 | +/path/to/webapp/controller/App.controller.js |
| 84 | + 12:5 error Local storage must not be used @sap-ux/fiori-tools/sap-no-localstorage |
| 85 | + 24:1 warning DOM access is not recommended @sap-ux/fiori-tools/sap-no-dom-access |
| 86 | +
|
| 87 | +✖ 2 problems (1 error, 1 warning) |
| 88 | + 0 errors and 0 warnings potentially fixable with the `--fix` option. |
| 89 | +``` |
| 90 | + |
| 91 | +Summarize the results for the user: |
| 92 | +- Total errors and warnings |
| 93 | +- Which files are affected |
| 94 | +- The most common rule violations |
| 95 | +- Whether any issues are auto-fixable |
| 96 | + |
| 97 | +## Step 5 — Auto-fix issues (optional) |
| 98 | + |
| 99 | +Many ESLint rules support automatic fixing. Run with `--fix` to apply safe fixes: |
| 100 | + |
| 101 | +### Standalone: |
| 102 | +```bash |
| 103 | +npx eslint webapp/ --fix |
| 104 | +``` |
| 105 | + |
| 106 | +### CAP — specific app: |
| 107 | +```bash |
| 108 | +cd app/<app-name> && npx eslint webapp/ --fix |
| 109 | +``` |
| 110 | + |
| 111 | +**IMPORTANT**: The `--fix` flag modifies files in place. Before running: |
| 112 | +1. Confirm with the user that they want auto-fixes applied |
| 113 | +2. Recommend they have a clean git state or backup so fixes can be reviewed/reverted |
| 114 | + |
| 115 | +After fixing, show what changed: |
| 116 | +```bash |
| 117 | +git diff --stat webapp/ 2>/dev/null || echo "(git not available to show diff)" |
| 118 | +``` |
| 119 | + |
| 120 | +## Step 6 — Handle unfixable issues |
| 121 | + |
| 122 | +Issues not fixed by `--fix` require manual code changes. For each unfixable error: |
| 123 | + |
| 124 | +1. Read the relevant source file |
| 125 | +2. Identify the problematic code pattern |
| 126 | +3. Suggest or apply the correct Fiori-compliant alternative |
| 127 | + |
| 128 | +### Common Fiori ESLint violations and fixes: |
| 129 | + |
| 130 | +| Rule | Problem | Fix | |
| 131 | +|---|---|---| |
| 132 | +| `sap-no-localstorage` | `localStorage.setItem(...)` | Use `sap.ui.util.Storage` instead | |
| 133 | +| `sap-no-sessionstorage` | `sessionStorage.getItem(...)` | Use `sap.ui.util.Storage` instead | |
| 134 | +| `sap-no-dom-access` | `document.getElementById(...)` | Use UI5 control APIs instead | |
| 135 | +| `sap-no-inner-html-write` | `element.innerHTML = ...` | Avoid; use UI5 controls for rendering | |
| 136 | +| `sap-no-global-variable` | Using undeclared globals | Declare in `globals` config or import | |
| 137 | +| `sap-no-hardcoded-url` | Hardcoded absolute URLs | Use relative paths or manifest datasources | |
| 138 | +| `sap-no-navigator` | `navigator.userAgent` | Avoid browser detection; use UI5 APIs | |
| 139 | +| `sap-flex-enabled` | Missing `flexEnabled: true` in manifest | Add `"flexEnabled": true` to `sap.ui5` section | |
| 140 | + |
| 141 | +## Step 7 — Report summary |
| 142 | + |
| 143 | +After linting (and optional fixing), provide a clear summary: |
| 144 | + |
| 145 | +``` |
| 146 | +ESLint Results for webapp/: |
| 147 | +- X errors found (N auto-fixed, M require manual fix) |
| 148 | +- Y warnings found (P auto-fixed, Q require manual fix) |
| 149 | +- Files with issues: [list key files] |
| 150 | +- Most common violations: [top 3 rules] |
| 151 | +``` |
| 152 | + |
| 153 | +If everything is clean: |
| 154 | +``` |
| 155 | +✅ No ESLint issues found in webapp/ |
| 156 | +``` |
| 157 | + |
| 158 | +## Tips |
| 159 | + |
| 160 | +- Run `npx eslint webapp/ --fix-dry-run` to preview what auto-fixes would change without applying them |
| 161 | +- Use `npx eslint webapp/ --rule '@sap-ux/fiori-tools/sap-no-localstorage: error'` to check a single rule |
| 162 | +- Add `// eslint-disable-next-line @sap-ux/fiori-tools/<rule-name>` to suppress a specific rule on one line when a violation is intentional and documented |
| 163 | +- The `recommended-for-s4hana` config also lints `manifest.json`, `*.xml`, and `*.cds` files — use `npx eslint .` (not just `webapp/`) to catch annotation issues |
0 commit comments