# Prettier i Stylelint - Formatowanie i Walidacja

Projekt zawiera konfigurację do formatowania i walidacji kodu.

## Zainstalowane narzędzia

- **Prettier** - formatowanie kodu (JS, XML, LESS, JSON)
- **Stylelint** - walidacja LESS

## Komendy

### Formatowanie

```bash
# Sformatuj wszystkie pliki (JS, XML, LESS, JSON)
npm run format

# Sprawdź czy pliki są sformatowane
npm run format:check
```

### Walidacja

```bash
# Sprawdź LESS w pages/
npm run lint:less
```

## Konfiguracje

### `.prettierrc` - Prettier

- Print Width: 100
- Tab Width: 2
- Semicolons: włączone
- Single Quotes: wyłączone (używamy `"`)
- Trailing Commas: `es5`

### `.stylelintrc.json` - Stylelint

Waliduje LESS files:
- Reguły standardowe + Stylelint Less
- Indentacja: 2 spacje
- Sprawdzanie kolorów hex
- Sprawdzanie duplikowanych selektorów

## Obsługa Custom XML

Pliki XML zawierają custom tagi:
- `<iai:variable>`
- `<iaixsl:value-of>`
- `<iaixsl:for-each>`
- itd.

Prettier je prawidłowo formatuje bez błędów.

## Obsługa HTML Entities

Prettier automatycznie konwertuje:
- `<` → `&lt;`
- `>` → `&gt;`
- `&` → `&amp;`

(dla XML i HTML files)

## VS Code Integration

Zainstaluj rozszerzenia:
- **Prettier - Code formatter** (esbenp.prettier-vscode)
- **Stylelint** (stylelint.vscode-plugin)

W VS Code możesz formatować na save:

```json
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
```

## Ignorowanie plików

### `.prettierignore`
```
node_modules
.env
.env.example
docs
dist
build
```

## Przykład: Formatowanie komponenty

Plik przed:
```xml
<xml><iai:variable   name="test"  select="value"   /></xml>
```

Po `npm run format`:
```xml
<xml><iai:variable name="test" select="value" /></xml>
```

## Troubleshooting

### "Parser error" w Prettier
- Upewnij się że `.prettierrc` ma poprawną konfigurację
- Prettier potrzebuje prawidłowego rozszerzenia pliku (`.xml`, `.less`, `.js`)

### Stylelint nie sprawdza LESS
- Zainstaluj `postcss` i `postcss-less`
- Sprawdź że `.stylelintrc.json` ma `postcss-less` w overrides