Linting

Überblick über die Linting-Lösung

Jutro bietet verwaltete, vordefinierte Konfigurationen für ESLint- und Stylelint-Linter. Diese gemeinsam genutzten Konfigurationen sorgen für eine konsistente Codequalität und einheitliche Standards in allen Jutro-Anwendungen. Sie enthalten Regeln für den Codestil, bewährte Verfahren für die Codierung und Jutro-spezifische Muster. Die Konfigurationen werden in Jutro-Paketen verwaltet und können problemlos aktualisiert werden, ohne die Konfigurationsdateien Ihrer App zu ändern.

Wichtige Aspekte der Jutro-Linting-Konfiguration

Zentral verwaltet: Konfigurationen werden in Jutro-Paketen verwaltet, nicht in Ihrer App.
Automatische Updates: Sie erhalten Regelaktualisierungen, ohne Ihre Konfigurationsdateien zu ändern.
Anpassbar: Überschreiben Sie bestimmte Regeln nach Bedarf für Ihre Anwendung.
Validierung von Cloud-Standards: Teil der Linting-Lösung sind Validierungsregeln für Jutro APIs und Muster.

Bereitstellung von Linting-Konfigurationen

Die Konfigurationen werden über die LINTER-spezifischen Pakete bereitgestellt. Sie enthalten die Regeln und Voreinstellungen, die beim Ausführen der Linter in Ihrer Anwendung verwendet werden.

ESLint-Konfiguration

Paket: @jutro/eslint-config

ESLint-Regeln

Code-Stil (Airbnb) (airbnb): Grundregeln und Best Practices für Code-Stile.
TypeScript (plugin:@typescript-eslint/recommended): Typüberprüfung und TypeScript-spezifische Linting-Regeln.
React und React-Hooks (plugin:react-hooks/recommended): Regeln für die Verwendung von React-Komponenten und -Hooks.
Barrierefreiheit (plugin:jsx-a11y/recommended): Bewährte Verfahren für die Barrierefreiheit in JSX.
JSON/JSON5 (plugin:jsonc/recommended-with-jsonc): Linting-Regeln für JSON- und JSON5-Dateien.
Jutro-Plattformregeln: Benutzerdefinierte Jutro-spezifische Regeln für die Internationalisierung (i18n) und die Validierung von Eigenschaften.
Cloud-Standards (@jutro/eslint-config/cloud-standards): Validierungsregeln für Jutro API und Muster (standardmäßig Warnungen). Details zu Regeln und Anpassungsoptionen finden Sie im Abschnitt Cloud-Standards.

Stylelint-Konfiguration

Paket: @jutro/stylelint-config

Stylelint-Regeln

SCSS (stylelint-config-standard-scss): Standardmäßige SCSS-Linting-Regeln.
Erzwingung von Design-Token: Regeln für die konsistente Verwendung von Design-Token in verschiedenen Stylesheets.
Cloud-Standards (@jutro/stylelint-config/cloud-standards): Validierungsregeln für Jutro-Designmuster (standardmäßig Warnungen). Details zu Regeln und Anpassungsoptionen finden Sie im Abschnitt Cloud-Standards.

Verwendung von Linters

Konfigurationsdateien

Um die Linting-Lösung von Jutro verwenden zu können, benötigen Sie zwei Linter-Konfigurationsdateien in Ihrem Projektstammverzeichnis:

.eslintrc.js: Konfigurationsdatei, die ESLint-Regeln von @jutro/eslint-config anwendet. Diese Datei enthält den Basisregelsatz für Ihre App und kann durch Hinzufügen oder Überschreiben einzelner Regeln angepasst werden.
.stylelintrc: Konfigurationsdatei, die Stylelint-Regeln von @jutro/stylelint-config anwendet. Diese Datei enthält den Basis-Stilregelsatz für Ihre App und kann durch Hinzufügen oder Überschreiben einzelner Regeln angepasst werden.

Optionale Dateien zum Ausschließen von Verzeichnissen oder Dateien vom Linting:

.eslintignore: Gibt an, welche Dateien und Verzeichnisse ESLint beim Linting überspringen soll (z. B. node_modules/, dist/ oder generierte Dateien).
.stylelintignore: Gibt an, welche Dateien und Verzeichnisse Stylelint beim Linting überspringen soll (z. B. node_modules/, dist/ oder Stylesheets von Anbietern).

Linter konfigurieren

Abhängigkeiten installieren:

npm install --save-dev \
  @jutro/eslint-config \
  @jutro/stylelint-config \
  eslint \
  stylelint

Erstellen Sie .eslintrc.js im Projektstamm:

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
};

Erstellen Sie .stylelintrc im Projektstamm:
.stylelintrc
```
{
  "extends": "@jutro/stylelint-config"
}
```

Fügen Sie Linting-Skripte in package.json hinzu:

package.json
{
  "scripts": {
    "lint:js": "eslint './**/*.{js,jsx,ts,tsx,json}'",
    "lint:css": "stylelint '**/*.scss'",
    "lint": "npm run lint:js && npm run lint:css"
  }
}

Linter ausführen:

npm run lint        # Run all linters
npm run lint:js     # Run ESLint only
npm run lint:css    # Run Stylelint only

Verwenden Sie die erstellten Skripte, um die Linter auszuführen und Ihren Code auf Probleme bei der Arbeit an Ihrer Jutro-App zu überprüfen. Sie können Linting auch so einrichten, dass es automatisch beim Commit ausgeführt wird, indem Sie Tools wie lint-staged verwenden.

Ausführen von Lintern mit Jutro CLI

Führen Sie alle Linter und Formatierungen in Ihrer Jutro-App mit dem folgenden validate:linters-Befehl aus. Damit werden ESLint, Stylelint und Prettier ausgeführt:

jutro validate:linters

Note: Wenn Sie Prettier nicht als Abhängigkeit hinzugefügt haben, schlägt der validate:linters-Befehl fehl. Verwenden Sie in diesem Fall die Methode „npm scripts“ aus dem Abschnitt Linters konfigurieren .

Wenn Prettier installiert ist, aber keine benutzerdefinierte Konfiguration angegeben ist, wird der Befehl mit den Prettier-Standardeinstellungen ausgeführt.

Weitere Einzelheiten zu diesem Befehl und zu weiteren Parametern finden Sie in der Dokumentation zum Befehl „validate:linters“.

Konfigurationsbeispiele

Standardeinrichtung

Bei der empfohlenen Standardeinrichtung werden alle ESLint- und Stylelint-Regeln mit Cloud-Standards als Warnungen verwendet.

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
};

::: Hinweis

Im Fall von ESlint sind die Voreinstellungen @jutro/eslint-config und @jutro austauschbar und bieten den gleichen Regelsatz. Das kürzere @jutro ist ein praktischer Alias für die Basiskonfiguration von ESLint.

:::

.stylelintrc
{
  "extends": "@jutro/stylelint-config"
}

Cloud-Standards als Fehler

Behandelt Verstöße gegen Cloud-Standards als Fehler und nicht als Warnungen.

.eslintrc.js
module.exports = {
  extends: [
    '@jutro/eslint-config',
    '@jutro/eslint-config/cloud-standards-error',
  ],
};

.stylelintrc
{
  "extends": [
    "@jutro/stylelint-config",
    "@jutro/stylelint-config/cloud-standards-error"
  ]
}

Benutzerdefinierte Regelüberschreibungen

Deaktivieren oder ändern Sie bestimmte Regeln für Ihr Projekt.

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
  rules: {
    'no-console': 'warn', // Downgrade console warning from error to warning
    'react/prop-types': 'off', // Disable prop-types validation
    '@jutro/cloud-standards/no-internal-imports': 'off', // Disable internal imports check
  },
};

.stylelintrc
{
  "extends": "@jutro/stylelint-config",
  "rules": {
    "@jutro/cloud-standards/no-disallowed-css-vars": "off"
  }
}

Anpassungsmöglichkeiten

Es gibt zwei Anpassungsebenen für ESLint- und Stylelint-Konfigurationen:

Voreinstellungsebene: Wählen Sie aus, welche Voreinstellung erweitert werden soll (wirkt sich auf den Schweregrad von Verstößen gegen Cloud-Standards aus):
- @jutro/eslint-config oder @jutro/stylelint-config: Standardkonfiguration mit Cloud-Standards, bei denen Probleme als Warnungen gemeldet werden (Standard)
- @jutro/eslint-config/cloud-standards-error oder @jutro/stylelint-config/cloud-standards-error: Probleme mit Cloud-Standards, die als Fehler gemeldet werden. Um die Standardkonfiguration für andere Regeln beizubehalten, erweitern Sie zunächst die Basiskonfiguration.
Regelebene: Überschreiben einzelner Regeln im rules-Objekt:
- Schweregrad der Änderung: 'no-console': 'warn' (Fehler → Warnung)
- Regeln deaktivieren: 'no-console': 'off'
- Regeloptionen konfigurieren: 'max-params': ['warn', 2]

Versuchen Sie nach Möglichkeit, die Jutro-Standards einzuhalten oder ihnen so weit wie möglich zu entsprechen. Wenn Sie sie jedoch ändern möchten, können Sie ein Array von Regeln in .eslintrc.js oder .stylelintrc hinzufügen.

Weitere Informationen zu Regeln finden Sie in der offiziellen Dokumentation zu ESLint und Stylelint.

Weitere Informationen zu den Anpassungsoptionen finden Sie in den folgenden Beispielen.

Bestimmte Regel deaktivieren

ESLint:

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
  rules: {
    '@jutro/cloud-standards/no-internal-imports': 'off',
  },
};

Stylelint:

.stylelintrc
{
  "extends": "@jutro/stylelint-config",
  "rules": {
    "@jutro/cloud-standards/no-disallowed-css-vars": "off"
  }
}

Schweregrad von Regeln ändern

ESLint:

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
  rules: {
    'no-console': 'warn',
    'react/prop-types': 'error',
  },
};

Stylelint:

.stylelintrc
{
  "extends": "@jutro/stylelint-config",
  "rules": {
    "color-no-invalid-hex": "error",
    "indentation": "warn"
  }
}

Regeloptionen konfigurieren:

Einige Regeln akzeptieren Konfigurationsparameter.

ESLint:

Beispielsweise begrenzt react/jsx-max-props-per-line (aus dem React-Plugin) die Anzahl der Eigenschaften pro Zeile. Format: ['severity', { option: value }].

.eslintrc.js
module.exports = {
  extends: ['@jutro/eslint-config'],
  rules: {
    'react/jsx-max-props-per-line': ['warn', { maximum: 3 }], // React plugin rule
    'max-lines': ['error', 300], // Core ESLint rule
  },
};

Stylelint:

Beispiel: indentation steuert Abstände. Format: ['severity', numericValue] oder ['severity', { option: value }].

.stylelintrc
{
  "extends": "@jutro/stylelint-config",
  "rules": {
    "indentation": ["error", 2],
    "max-nesting-depth": ["warn", 3]
  }
}

Validierung von Cloud-Standards

Cloud-Standards sind eine Reihe von Regeln für die Erstellung von Jutro-Anwendungen. Jutro führt Unterstützung für die Validierung dieser Standards in Linting-Konfigurationen ein, sodass Entwickler sicherstellen können, dass ihr Code diesen Regeln entspricht.

Wichtige Aspekte der Validierung von Cloud-Standards:

Die Regeln prüfen nur potenzielle Verstöße gegen die öffentliche Jutro-API und die erforderlichen Muster aus Jutro. Weitere Informationen finden Sie im Abschnitt Regeln für Cloud-Standards.
In der Standardkonfiguration von ESLint und Stylelint werden Probleme als Warnungen und nicht als Fehler gemeldet. Dies kann mit Voreinstellungen oder durch Deaktivieren einzelner Regeln geändert werden.

Regeln für Cloud-Standards

Linter	Pfad	Regel
ESLint	`@jutro/cloud-standards/no-restricted-design-tokens`	Benutzerdefinierte Design-Token, die in `\*.json`-Dateien definiert sind, können nicht im `jds`-Namensraum deklariert werden.
ESLint	`@jutro/cloud-standards/no-internal-imports`	Anwendungscode darf nur vom Haupteinstiegspunkt der Jutro-Pakete (z. B. `@jutro/components`) importiert werden, nicht aus verschachtelten Pfaden (z. B. `@jutro/components/src`) oder internen Verzeichnissen (z. B. `@jutro/theme/internal`).
Stylelint	`@jutro/cloud-standards/no-disallowed-css-vars`	Interne CSS-Variablen für Design-Token (die dem Muster --JDS-*-INTERNAL entsprechen) können nicht in Stylesheets verwendet werden.

Voreinstellungen für Cloud-Standards

Bei Konfigurationen von Cloud-Standards gibt es keine Konflikte mit anderen Linting-Regeln. Ihre Voreinstellungen können mit anderen Konfigurationen kombiniert werden, ohne dass es zu Konflikten kommt. Wenn Sie in Ihrer Konfiguration auf Voreinstellungen für Cloud-Standards verweisen, verwenden Sie den vollständigen Pfad über die Konfigurationspakete.

ESLint

@jutro/eslint-config/cloud-standards: Validiert Regeln für Cloud-Standards mit dem Schweregrad „Warnung“. Standardmäßig in der Voreinstellung @jutro/eslint-config aktiviert.
@jutro/eslint-config/cloud-standards-error: Validiert Regeln für Cloud-Standards mit dem Schweregrad „Fehler“.

Stylelint

@jutro/stylelint-config/cloud-standards: Validiert Regeln für Cloud-Standards mit dem Schweregrad „Warnung“. Standardmäßig in der Voreinstellung @jutro/stylelint-config aktiviert.
@jutro/stylelint-config/cloud-standards-error: Validiert Regeln für Cloud-Standards mit dem Schweregrad „Fehler“.

Voraussetzungen

Linting JS/TS: ESLint- und @jutro/eslint-config-Pakete sind als Abhängigkeiten in package.json erforderlich.
Linting Stylesheets: Stylelint- und @jutro/stylelint-config-Pakete sind als Abhängigkeiten in package.jsonerforderlich.

Beispiele für Konfigurationen

ESLint:

.eslintrc.js
const eslintDefault = {
  extends: [
    '@jutro', // base config with cloud standard warnings
  ],
};

.eslintrc.js
const eslintDefaultWithCloudStandardErrors = {
  extends: [
    '@jutro', // base config
    '@jutro/eslint-config/cloud-standards-error', // cloud standard errors
  ],
};

Stylelint:

.stylelintrc.js
const stylelintDefault = {
  extends: [
    '@jutro/stylelint-config', // base config with cloud standard warnings
  ],
};

.stylelintrc.js
const stylelintDefaultWithCloudStandardErrors = {
  extends: [
    '@jutro/stylelint-config', // base config
    '@jutro/stylelint-config/cloud-standards-error', // cloud standard errors
  ],
};

Deaktivieren einzelner Regeln

Dieser Ansatz wird nicht empfohlen, es besteht jedoch die Möglichkeit, einzelne Regeln für die Cloud-Standard-Validierung zu deaktivieren.

.eslintrc.js
module.exports = {
  extends: ['@jutro'],
  rules: {
    /* Disable cloud standard rule */
    '@jutro/cloud-standards/no-internal-imports': 'off',
  },
};

Migration aus dem Build-Tools-Paket

Der Import von ESLint- und Stylelint-Presets aus dem @jutro/build-tools-Paket ist die veraltete Art des Zugriffs auf Jutro-Linting-Konfigurationen. Für die Migration auf das neue Setup mit Linter-spezifischen Paketen mit Linting-Regeln sind folgende Schritte erforderlich:

Fügen Sie dem Abschnitt devDependencies der Datei package.json die folgenden Importe hinzu:
- "@jutro/eslint-config": "10.13.1",
- "@jutro/stylelint-config": "10.13.1"
Aktualisieren der Linter-Konfiguration:

.eslintrc
.eslintrc vorher	`module.exports = { extends: [require.resolve('@jutro/build-tools/eslint-strict-config/index')], };`
.eslintrc nachher	`module.exports = { extends: ['@jutro'], };`

.stylelintrc
.stylelintrc vorher	`{ "extends": "@jutro/build-tools/stylelint-config/index" }`
.stylelintrc nachher	`{ "extends": "@jutro/stylelint-config" }`

@jutro/eslint-config fügt zusätzliche Regeln zum @jutro/build-tools-Preset hinzu (Schweregrad 2: Fehler, 1: Warnung).

    rules: {
        'react/prop-types': ['error'],
        'max-params': ['warn', 3],
        'jutro-platform/metadata-jsx-i18n': 'error',
    },

Wenn Sie vollständige Kompatibilität mit veralteten Regeln haben möchten, die im @jutro/build-tools-Paket definiert sind, deaktivieren Sie diese.

Wenn Sie vom weniger strengen @jutro/build-tools/eslint-config/index migrieren und vollständig kompatibel mit veralteten Regelkonfigurationen sein möchten, müssen Sie möglicherweise zusätzliche Regeln überschreiben.

{
    extends: ['@jutro'],
    rules: {
        ...
        'unicorn/filename-case': 'warn',
    },
}

Note: Wenn Ihr Projekt andere Konfigurationen aus @jutro/build-tools als Linting verwendet (z. B. Formatierungen), benötigen Sie diese Abhängigkeit möglicherweise trotzdem. Optional können Sie diese Konfigurationen auf App-Ebene definieren, was die empfohlene Vorgehensweise ist.

Überblick über die Linting-Lösung​

Wichtige Aspekte der Jutro-Linting-Konfiguration​

Bereitstellung von Linting-Konfigurationen​

ESLint-Konfiguration​

ESLint-Regeln​

Stylelint-Konfiguration​

Stylelint-Regeln​

Verwendung von Linters​

Konfigurationsdateien​

Linter konfigurieren​

Ausführen von Lintern mit Jutro CLI​

Konfigurationsbeispiele​

Standardeinrichtung​

Cloud-Standards als Fehler​

Benutzerdefinierte Regelüberschreibungen​

Anpassungsmöglichkeiten​

Bestimmte Regel deaktivieren​

Schweregrad von Regeln ändern​

Regeloptionen konfigurieren:​

Validierung von Cloud-Standards​

Regeln für Cloud-Standards​

Voreinstellungen für Cloud-Standards​

ESLint​

Stylelint​

Voraussetzungen​

Beispiele für Konfigurationen​

Deaktivieren einzelner Regeln​

Migration aus dem Build-Tools-Paket​

Überblick über die Linting-Lösung

Wichtige Aspekte der Jutro-Linting-Konfiguration

Bereitstellung von Linting-Konfigurationen

ESLint-Konfiguration

ESLint-Regeln

Stylelint-Konfiguration

Stylelint-Regeln

Verwendung von Linters

Konfigurationsdateien

Linter konfigurieren

Ausführen von Lintern mit Jutro CLI

Konfigurationsbeispiele

Standardeinrichtung

Cloud-Standards als Fehler

Benutzerdefinierte Regelüberschreibungen

Anpassungsmöglichkeiten

Bestimmte Regel deaktivieren

Schweregrad von Regeln ändern

Regeloptionen konfigurieren:

Validierung von Cloud-Standards

Regeln für Cloud-Standards

Voreinstellungen für Cloud-Standards

ESLint

Stylelint

Voraussetzungen

Beispiele für Konfigurationen

Deaktivieren einzelner Regeln

Migration aus dem Build-Tools-Paket