Ich habe hier ein Ember.js 5.8.1, was bedeutet, dass alle Tutorials für React, Angular, … schon mal ein Stück weit wegfallen. Dabei ist ein ESLint 8.57.0, was sich unterscheidet von der aktuellen 9.x. Das Ganze wird installiert per Node.js, was ebenfalls eine Rolle spielt. Long story short: Es ist nicht so einfach, für das Setup ein funktionierendes Tutorial für Custom Rules zu finden. Wie immer in der JS-Welt also 🥰
Das Grundgerüst habe ich deshalb von hier, basierend auf hier:
|
1 2 3 4 5 6 7 8 |
config/ eslint/ index.js some-rule.js package.json tests/ .eslintrc.js package.json |
In der index.js wird ein Plugin definiert, das dynamisch alle Regeln aus dem Verzeichnis einliest – der Name des Verzeichnisses ist egal:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const fs = require("fs"); const path = require("path"); const ruleFiles = fs .readdirSync(__dirname) .filter((file) => file !== "index.js" && !file.endsWith("test.js")); const rules = Object.fromEntries( ruleFiles.map((file) => [path.basename(file, ".js"), require("./" + file)]) ); module.exports = { rules }; |
Eine solche Regel, im Beispiel oben some-rule.js, kann dabei auf dem Tutorial von ESLint basieren – Achtung, man wähle ein Tutorial passend zur vorhandenen Version. Wie die Datei heißt, ist egal (so lange sie auf .js endet, klar).
In einer (im Beispiel oben nur für die Tests) .eslintrc.js wird besagtes Plugin eingebunden. Die Syntax unterscheidet sich dabei subtil von der offenbar inzwischen präferierten eslint.config.js:
|
1 2 3 4 5 6 7 8 |
module.exports = { // ... plugins: ["crusy"], rules: { // ... 'crusy/some-rule': 2, }, }; |
Warum “crusy”? Weil das Ganze unter einem Namen in der package.json “installiert” werden muss, Und der Teil fehlt im offiziellen Tutorial: npm link ./config/eslint/ --save. Dafür ist die config/eslint/package.json, besagter Name ist zwingend geprefixt mit eslint-plugin:
|
1 2 3 4 5 |
{ "name": "eslint-plugin-crusy", "version": "1.0.0", "author": "crusy" } |
npm install, und schon geht’s!