Vérification Lint

Présentation de la solution de vérification Lint

Jutro fournit des configurations prédéfinies et gérées pour les linters ESLint et Stylelint. Ces configurations partagées assurent une qualité de code et des normes cohérentes dans les applications Jutro. Elles incluent des règles de style de code, les meilleures pratiques de codage et des modèles spécifiques à Jutro. Les configurations sont conservées dans des packages Jutro et peuvent être facilement mises à jour sans modifier les fichiers de configuration de votre application.

Principaux aspects de la configuration de la vérification Lint Jutro

Gestion centralisée : les configurations sont gérées dans des packages Jutro et non dans votre application.
Mises à jour automatiques : vous recevez les mises à jour des règles sans modifier vos fichiers de configuration.
Personnalisable : vous remplacez des règles spécifiques selon les besoins de votre application.
Validation des normes cloud : une partie de la solution de vérification Lint consiste à valider les règles pour les API et les modèles Jutro.

Comment les configurations de vérification Lint sont-elles fournies ?

Les configurations sont fournies via les packages spécifiques aux linters. Elles contiennent les règles et les préréglages utilisés lorsque vous exécutez les linters dans votre application.

Configuration d’ESLint

Package @jutro/eslint-config

Règles ESLint

Style de code (Airbnb) (airbnb) : règles de style de code de base et meilleures pratiques.
TypeScript (plugin:@typescript-eslint/recommended) : vérification de type et règles de vérification Lint spécifiques à TypeScript.
React et crochets react (plugin:react-hooks/recommended) : règles pour l’utilisation des composants et des crochets React.
Accessibilité (plugin:jsx-a11y/recommended) : meilleures pratiques en matière d’accessibilité pour JSX.
JSON/JSON5 (plugin:jsonc/recommended-with-jsonc) : règles de vérification Lint pour les fichiers JSON et JSON5.
Règles de la plate-forme Jutro : règles personnalisées spécifiques à Jutro pour l'application de l’internationalisation (i18n) et la validation des propriétés.
Normes Cloud (@jutro/eslint-config/cloud-standards) : règles de validation pour les API Jutro et les modèles (avertissements par défaut). Reportez-vous à la section Normes cloud pour en savoir plus sur les règles et les options de personnalisation.

Configuration de Stylelint

Package @jutro/stylelint-config

Règles Stylelint

SCSS (stylelint-config-standard-scss) : règles de vérification Lint SCSS standard.
Application des jetons de conception : règles pour une utilisation cohérente des jetons de conception sur toutes les feuilles de style.
Normes Cloud (@jutro/stylelint-config/cloud-standards) : règles de validation pour les modèles de conception Jutro (avertissements par défaut). Reportez-vous à la section Normes cloud pour en savoir plus sur les règles et les options de personnalisation.

Comment utiliser les linters

Fichiers de configuration

Pour utiliser la solution de vérification Lint de Jutro, vous avez besoin de deux fichiers de configuration de linters dans la racine de votre projet :

.eslintrc.js : fichier de configuration qui applique les règles ESLint à partir de @jutro/eslint-config. Ce fichier fournit l’ensemble de règles de base de votre application et peut être personnalisé en ajoutant ou en remplaçant des règles individuelles.
.stylelintrc : fichier de configuration qui applique les règles Stylelint à partir de @jutro/stylelint-config. Ce fichier fournit l’ensemble de règles de style de base de votre application et peut être personnalisé en ajoutant ou en remplaçant des règles individuelles.

Fichiers facultatifs permettant d’exclure des répertoires ou des fichiers de la vérification Lint :

.eslintignore : spécifie les fichiers et répertoires qu’ESLint doit ignorer pendant la vérification Lint (par exemple, node_modules/, dist/ ou les fichiers générés).
.stylelintignore : spécifie les fichiers et répertoires que Stylelint doit ignorer pendant la vérification Lint (par exemple, node_modules/, dist/ ou les feuilles de style des fournisseurs).

Configurer les linters

Installer les dépendances :

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

Créez .eslintrc.js dans la racine du projet :

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

Créez .stylelintrc dans la racine du projet :
.stylelintrc
```
{
  "extends": "@jutro/stylelint-config"
}
```

Ajoutez des scripts de vérification Lint à package.json :

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

Exécuter des linters :

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

Utilisez les scripts créés pour exécuter les linters et vérifier si votre code présente des problèmes lorsque vous travaillez sur votre application Jutro. Vous pouvez également configurer la vérification Lint pour qu’elle s’exécute automatiquement lors de la validation à l’aide d’outils tels que lint-staged.

Exécution de linters avec la CLI Jutro

Exécutez tous les linters et formateurs de votre application Jutro à l’aide de la commande validate:linters. Cela exécute ESLint, Stylelint et Prettier :

jutro validate:linters

Note: Si vous n’avez pas ajouté Prettier en tant que dépendance, la commande validate:linters échoue. Dans ce cas, utilisez l’approche de scripts npm de la section Configurer les linters.

Si Prettier est installé mais qu’aucune configuration personnalisée n’est fournie, la commande s’exécute avec les paramètres par défaut de Prettier.

Pour en savoir plus sur cette commande et sur les paramètres supplémentaires, reportez-vous à la documentation sur la commande validate:linters.

Exemples de configuration

Configuration par défaut

La configuration par défaut recommandée utilise toutes les règles ESLint et Stylelint avec les normes cloud en guise d’avertissement.

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

::: note

Dans le cas d’ESlint, les préréglages @jutro/eslint-config et @jutro sont interchangeables et fournissent le même ensemble de règles. Le préréglage plus court @jutro est un alias pratique pour la configuration ESLint de base.

:::

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

Normes Cloud en tant qu’erreurs

Traite les violations des normes cloud comme des erreurs et non comme des avertissements.

.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"
  ]
}

Remplacements de règles personnalisés

Désactivez ou modifiez des règles spécifiques à votre projet.

.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"
  }
}

Options de personnalisation

Il existe deux niveaux de personnalisation pour les configurations ESLint et Stylelint :

Niveau prédéfini : choisissez le préréglage à étendre (affecte la gravité des normes cloud) :
- @jutro/eslint-config ou @jutro/stylelint-config : configuration par défaut avec des problèmes de normes cloud signalés comme avertissements (par défaut)
- @jutro/eslint-config/cloud-standards-error ou @jutro/stylelint-config/cloud-standards-error : problèmes de normes cloud signalés comme des erreurs. Pour conserver la configuration par défaut pour d’autres règles, étendez d’abord la configuration de base.
Au niveau de la règle : remplace les règles individuelles dans l’objet rules :
- Modification de la gravité : 'no-console': 'warn' (erreur → avertissement)
- Désactivation des règles : 'no-console': 'off'
- Configuration des options de règle : 'max-params': ['warn', 2]

Le cas échéant, essayez de suivre les normes Jutro ou de les respecter autant que possible. Toutefois, si vous souhaitez les modifier, vous pouvez ajouter une série de règles à votre .eslintrc.js ou .stylelintrc.

Pour en savoir plus sur les règles, reportez-vous à la documentation officielle d'ESLint et de Stylelint.

Reportez-vous aux exemples ci-dessous pour en savoir plus sur les options de personnalisation.

Désactiver une règle spécifique

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"
  }
}

Modifier la gravité de la règle

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"
  }
}

Configurer les options de règle

Certaines règles acceptent les paramètres de configuration.

ESLint :

Par exemple, react/jsx-max-props-per-line (du plug-in React) limite le nombre de propriétés par ligne. 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 :

Par exemple, indentation contrôle l’espacement. Format : ['severity', numericValue] ou ['severity', { option: value }].

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

Validation des normes cloud

Les normes Cloud sont un ensemble de règles pour la création d’applications Jutro. Jutro introduit la prise en charge de la validation de ces normes dans les configurations de vérification Lint, ce qui permet aux développeurs de s’assurer que leur code respecte ces règles.

Principaux aspects de la validation des normes Cloud :

Les règles vérifient uniquement les violations potentielles de l’API publique Jutro et des modèles requis par Jutro. Pour en savoir plus, reportez-vous à la section Règles relatives aux normes cloud.
Avec les configurations ESLint et Stylelint par défaut, les problèmes sont signalés sous forme d’avertissements et non d’erreurs. Cela peut être modifié à l’aide de préréglages ou en désactivant des règles individuelles.

Règles des normes cloud

Linter	Chemin d'accès	Règle
ESLint	`@jutro/cloud-standards/no-restricted-design-tokens`	Les jetons de conception personnalisés définis dans les fichiers `\*.json` ne peuvent pas être déclarés dans l’espace de noms `jds`.
ESLint	`@jutro/cloud-standards/no-internal-imports`	Le code d’application ne doit être importé qu’à partir du point d’entrée principal des packages Jutro (par exemple, `@jutro/components`), et non à partir de chemins imbriqués (par exemple, `@jutro/components/src`) ou de répertoires internes (par exemple, `@jutro/theme/internal`).
Stylelint	`@jutro/cloud-standards/no-disallowed-css-vars`	Les variables CSS internes pour les jetons de conception (correspondant à --JDS-*-INTERNAL) ne peuvent pas être utilisées dans les feuilles de style.

Préréglages des normes cloud

Les configurations des normes cloud ne sont pas en conflit avec d’autres règles de vérification Lint. Leurs préréglages peuvent être combinés avec d’autres configurations sans conflits. Lorsque vous référencez des normes cloud prédéfinies dans votre configuration, utilisez le chemin complet dans les packages de configuration.

ESLint

@jutro/eslint-config/cloud-standards : valide les règles des normes cloud avec une sévérité de niveau Avertissement. Activé par défaut dans le préréglage @jutro/eslint-config.
@jutro/eslint-config/cloud-standards-error : valide les règles des normes cloud avec une sévérité de niveau Erreur.

Stylelint

@jutro/stylelint-config/cloud-standards : valide les règles des normes cloud avec une sévérité de niveau Avertissement. Activé par défaut dans le préréglage @jutro/stylelint-config.
@jutro/stylelint-config/cloud-standards-error : valide les règles des normes cloud avec une sévérité de niveau Erreur.

Conditions préalables

JS/TS pour vérification Lint : ESLint et les packages @jutro/eslint-config sont requis comme dépendances dans package.json.
Feuilles de style pour vérification Lint : Stylelint et les packages @jutro/stylelint-config sont requis comme dépendances dans package.json.

Exemples de configurations

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
  ],
};

Désactivation des règles individuelles

Cette approche n’est pas recommandée, mais il existe une option permettant de désactiver les règles individuelles pour la validation des normes cloud.

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

Migration à partir du package d’outils de compilation

L’importation de préréglages ESLint et Stylelint à partir du package @jutro/build-tools est le moyen obsolète d’accéder aux configurations de vérification Lint Jutro. Pour migrer vers la nouvelle configuration avec des packages spécifiques à linter avec des règles de vérification Lint, vous devez :

Ajouter les importations suivantes à la section devDependencies du fichier package.json :
- "@jutro/eslint-config": "10.13.1",
- "@jutro/stylelint-config": "10.13.1"
Mettre à jour la configuration des linters :

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

.stylelintrc
.stylelintrc avant	`{ "extends": "@jutro/build-tools/stylelint-config/index" }`
.stylelintrc après	`{ "extends": "@jutro/stylelint-config" }`

@jutro/eslint-config ajoute des règles supplémentaires en plus du préréglage @jutro/build-tools (2 niveaux de gravité d’erreur, 1 avertissement).

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

Si vous souhaitez une compatibilité totale avec les règles obsolètes définies dans le package @jutro/build-tools, désactivez-les.

Si vous effectuez une migration à partir de la règle la moins stricte @jutro/build-tools/eslint-config/index et que vous souhaitez une compatibilité totale avec les configurations de règles obsolètes, vous devrez peut-être remplacer des règles supplémentaires.

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

Note: Si votre projet utilise des configurations de @jutro/build-tools autres que la vérification Lint, comme des formateurs, il se peut que vous ayez tout de même besoin de cette dépendance. Vous pouvez éventuellement définir ces configurations au niveau de l’application, ce qui est l’approche recommandée.

Présentation de la solution de vérification Lint​

Principaux aspects de la configuration de la vérification Lint Jutro​

Comment les configurations de vérification Lint sont-elles fournies ?​

Configuration d’ESLint​

Règles ESLint​

Configuration de Stylelint​

Règles Stylelint​

Comment utiliser les linters​

Fichiers de configuration​

Configurer les linters​

Exécution de linters avec la CLI Jutro​

Exemples de configuration​

Configuration par défaut​

Normes Cloud en tant qu’erreurs​

Remplacements de règles personnalisés​

Options de personnalisation​

Désactiver une règle spécifique​

Modifier la gravité de la règle​

Configurer les options de règle​

Validation des normes cloud​

Règles des normes cloud​

Préréglages des normes cloud​

ESLint​

Stylelint​

Conditions préalables​

Exemples de configurations​

Désactivation des règles individuelles​

Migration à partir du package d’outils de compilation​

Présentation de la solution de vérification Lint

Principaux aspects de la configuration de la vérification Lint Jutro

Comment les configurations de vérification Lint sont-elles fournies ?

Configuration d’ESLint

Règles ESLint

Configuration de Stylelint

Règles Stylelint

Comment utiliser les linters

Fichiers de configuration

Configurer les linters

Exécution de linters avec la CLI Jutro

Exemples de configuration

Configuration par défaut

Normes Cloud en tant qu’erreurs

Remplacements de règles personnalisés

Options de personnalisation

Désactiver une règle spécifique

Modifier la gravité de la règle

Configurer les options de règle

Validation des normes cloud

Règles des normes cloud

Préréglages des normes cloud

ESLint

Stylelint

Conditions préalables

Exemples de configurations

Désactivation des règles individuelles

Migration à partir du package d’outils de compilation