# ESLint, Prettier és Stylelint

> A JavaScript- és CSS-kód ellenőrzése és formázása WordPress-projektben: ESLint, Prettier és Stylelint a WordPress saját beállításaival.

Három eszköz tartja rendben a front-end kódot, ugyanúgy, ahogy a [PHPCS](https://hub.hellowp.io/hu/knowledge-base/developer-tools/phpcs-wpcs/) a PHP-t:

- az [ESLint](https://eslint.org/) a JavaScriptet elemzi, és jelzi a hibákat és a rossz mintákat;
- a [Prettier](https://prettier.io/) átformázza a kódot egységes külalakra;
- a [Stylelint](https://stylelint.io/) a CSS-t és az SCSS-t ellenőrzi.

A WordPress mindháromhoz kész beállítást ad (`@wordpress/eslint-plugin`, `@wordpress/prettier-config`, `@wordpress/stylelint-config`), így nem kell magadnak szabályokat összeállítanod. A blokkfejlesztéshez használt [`@wordpress/scripts`](https://hub.hellowp.io/hu/knowledge-base/developer-tools/wordpress-scripts/) ezekkel dolgozik.

## Telepítés

Szükséged van egy `package.json` fájlra és Node.js-re. Az ESLint a `^20.19.0`, `^22.13.0` vagy `>=24` Node-verziókat kéri. A WordPress-csomagok a Node.js hosszú távú támogatású (LTS) verzióit támogatják.

```bash title="Terminál"
npm install --save-dev eslint @wordpress/eslint-plugin
npm install --save-dev --save-exact prettier
npm install --save-dev @wordpress/prettier-config
npm install --save-dev stylelint @wordpress/stylelint-config
```

A Prettier hivatalos doksija a `--save-exact` kapcsolót ajánlja, hogy egy új verzió ne írja át váratlanul a formázást. A `@wordpress/eslint-plugin` az ESLint 9 és 10 verziójával működik.

Ha a projekted már használja a `@wordpress/scripts` csomagot, ezeket nem kell külön telepítened: a `wp-scripts lint-js`, `lint-style` és `format` parancsok az ESLintet, a Stylelintet és a Prettiert használják.

## ESLint

Hozz létre egy `eslint.config.mjs` fájlt a projekt gyökerében:

```javascript title="eslint.config.mjs"
import wordpress from '@wordpress/eslint-plugin';

export default [ ...wordpress.configs.recommended ];
```

Saját szabályokat a `wordpress.configs.recommended` után, egy újabb objektumban adhatsz meg.

A régi `.eslintrc.*` formátum elavult, az ESLint 10 már nem is támogatja. Új projektben mindig az `eslint.config.mjs` formátumot használd.

Futtatás:

```bash title="Terminál"
npx eslint src/
npx eslint src/ --fix
```

A `--fix` a javítható hibákat közvetlenül a fájlokban kijavítja, és csak a megmaradtakat listázza. Nem minden hiba javítható így.

### Beállítások a WordPress-csomagban

- `recommended`: az ES2015+ szabályok, a jsdoc, jsx-a11y, react és más bővítmények integrációjával. Ez a jó kiindulópont.
- `recommended-with-formatting`: az ESLint saját formázási szabályait használja a Prettier helyett.
- Külön használható szabálykészletek: `custom`, `es5`, `esnext`, `i18n`, `jsdoc`, `jsx-a11y`, `react`, `test-unit`, `test-e2e`, `test-playwright`.

### Fordítható szövegek

Az `i18n` szabályok a fordítható szövegeket vizsgálják. Például az `i18n-text-domain` érvényes szövegtartományt követel, az `i18n-translator-comments` fordítói megjegyzést kér.

## Prettier

A Prettier beállításának legegyszerűbb módja, ha a WordPress konfigját használod. A `package.json` fájlba írd be:

```json title="package.json"
{
	"prettier": "@wordpress/prettier-config"
}
```

Ugyanez megy `.prettierrc` fájlban is, a `"@wordpress/prettier-config"` szöveggel, vagy `.prettierrc.js` fájlban:

```javascript title=".prettierrc.js"
module.exports = require( '@wordpress/prettier-config' );
```

Futtatás:

```bash title="Terminál"
npx prettier . --write
npx prettier . --check
```

A `--write` átírja a fájlokat, a `--check` csak jelzi, ha valami nincs formázva. Ez utóbbit érdemes CI-ban használni. A kihagyandó mappákat a `.prettierignore` fájlba írd:

```text title=".prettierignore"
build
node_modules
vendor
```

## Stylelint

A hivatalos Stylelint-doksi egy `stylelint.config.mjs` fájlt mutat. A WordPress-konfig így állítható be:

```javascript title="stylelint.config.mjs"
export default {
	extends: [ '@wordpress/stylelint-config' ],
};
```

Ha SCSS-t írsz, használd az `scss` változatot:

```javascript title="stylelint.config.mjs"
export default {
	extends: [ '@wordpress/stylelint-config/scss' ],
};
```

A csomag további változatai: `@wordpress/stylelint-config/stylistic` és `@wordpress/stylelint-config/scss-stylistic`. A „stylistic” változatok formázási szabályokat (például behúzást) is hozzáadnak.

Futtatás:

```bash title="Terminál"
npx stylelint "**/*.css"
npx stylelint "**/*.css" --fix
```

A globot tedd idézőjelbe. A `--fix` a javítható problémákat kijavítja.

## Futtatás a `@wordpress/scripts`-szel

A `@wordpress/scripts` három parancsot ad ehhez, a `build`, `node_modules` és `vendor` mappát alapból kihagyják:

```json title="package.json"
{
	"scripts": {
		"lint:js": "wp-scripts lint-js",
		"lint:css": "wp-scripts lint-style",
		"format": "wp-scripts format"
	}
}
```

- `wp-scripts lint-js` a JavaScript- és TypeScript-fájlokat ellenőrzi. Előbb az `eslint.config.*` fájlt keresi, ha nincs, a régi `.eslintrc.*` fájlra tér vissza.
- `wp-scripts lint-style` a CSS-, PCSS- és SCSS-fájlokat ellenőrzi a `@wordpress/stylelint-config` alapján.
- `wp-scripts format` a JavaScript-, JSON-, TypeScript- és YAML-fájlokat formázza. A kihagyandó fájlokat a `.prettierignore` fájlban adhatod meg.

Mindháromnak megadhatsz fájlt, mappát vagy globot: `wp-scripts lint-js ./src`. A `@wordpress/scripts` többi parancsáról a [külön cikkben](https://hub.hellowp.io/hu/knowledge-base/developer-tools/wordpress-scripts/) olvashatsz.

## Bedrock, Sage és bővítmények

Bedrockban és Sage-ben a JavaScript és a CSS általában a témában ([Sage](https://hub.hellowp.io/hu/knowledge-base/developer-tools/sage/)) vagy a bővítményben van, nem a Bedrock gyökerében. A `package.json`-t és a konfigfájlokat oda tedd, ahol a front-end kód él, és az npm-parancsokat ott futtasd. A `vendor` és a `build` mappát hagyd ki az ellenőrzésből, mert nem a te kódod. A Bedrockról a [Bedrock cikkben](https://hub.hellowp.io/hu/knowledge-base/developer-tools/bedrock/) olvashatsz.

Szerkesztőből is használhatod őket: a [VS Code](https://hub.hellowp.io/hu/knowledge-base/developer-tools/vscode/) cikke leírja a szerkesztő beállítását.

## Mire figyelj

- **Egy formázó legyen.** A `recommended-with-formatting` az ESLint saját formázását használja a Prettier helyett, ezért a kettőt ne keverd.
- **Az első `--write` sok változást okoz.** Futtasd külön commitban, hogy a későbbi változtatások olvashatók maradjanak.
- **A `--fix` átírja a fájlokat.** Futtatás előtt legyen a változás commitolva.
- **CI-ban ne javítson.** Csak ellenőrizzen (`prettier --check`, `eslint` `--fix` nélkül), hogy a hibás kód ne kerüljön be a `main` ágra. Futtathatod [GitHub Actionsben](https://hub.hellowp.io/hu/knowledge-base/developer-tools/github-actions/) is.

## Hasznos linkek

- [ESLint: Getting Started](https://eslint.org/docs/latest/use/getting-started)
- [Prettier: Install](https://prettier.io/docs/install)
- [Stylelint: Get started](https://stylelint.io/user-guide/get-started)
- [@wordpress/eslint-plugin](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-eslint-plugin/)
- [@wordpress/prettier-config](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-prettier-config/)
- [@wordpress/stylelint-config](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-stylelint-config/)
- [@wordpress/scripts](https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/)