composer-builer/docs/LINTING.md

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

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

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

Walidacja

# 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:

"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><iai:variable   name="test"  select="value"   /></xml>

Po npm run format:

<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