ESLint, Prettier és Stylelint

Három eszköz tartja rendben a front-end kódot, ugyanúgy, ahogy a PHPCS a PHP-t:

• az ESLint a JavaScriptet elemzi, és jelzi a hibákat és a rossz mintákat;
• a Prettier átformázza a kódot egységes külalakra;
• a Stylelint 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 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.

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:

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:

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:

package.json

{
  "prettier": "@wordpress/prettier-config"
}

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

.prettierrc.js

module.exports = require( '@wordpress/prettier-config' );

Futtatás:

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:

.prettierignore

build
node_modules
vendor

Stylelint

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

stylelint.config.mjs

export default {
  extends: [ '@wordpress/stylelint-config' ],
};

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

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:

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:

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 olvashatsz.

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

Bedrockban és Sage-ben a JavaScript és a CSS általában a témában (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 olvashatsz.

Szerkesztőből is használhatod őket: a VS Code 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 is.

Hasznos linkek

• ESLint: Getting Started
• Prettier: Install
• Stylelint: Get started
• @wordpress/eslint-plugin
• @wordpress/prettier-config
• @wordpress/stylelint-config
• @wordpress/scripts