113 lines
2.0 KiB
Markdown
113 lines
2.0 KiB
Markdown
# 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:
|
|
- `<` → `<`
|
|
- `>` → `>`
|
|
- `&` → `&`
|
|
|
|
(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
|
|
|