@babel/eslint-parser

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

@babel/eslint-parser vous permet de linter tout code Babel valide avec l'excellent ESLint.

Quand utiliser @babel/eslint-parser ?

Le parser par défaut d'ESLint et ses règles principales ne prennent en charge que la dernière norme ECMAScript finale et ne gèrent pas la syntaxe expérimentale (comme les nouvelles fonctionnalités) ou non standard (comme les types Flow ou TypeScript) fournie par Babel. @babel/eslint-parser est un parser qui permet à ESLint d'analyser du code source transformé par Babel.

Note : Vous n'avez besoin d'utiliser @babel/eslint-parser que si vous utilisez Babel pour transformer votre code. Dans le cas contraire, veuillez utiliser le parser adapté à votre variante d'ECMAScript (notez que le parser par défaut prend en charge toute la syntaxe non expérimentale ainsi que JSX).

Comment fonctionne-t-il ?

ESLint permet l'utilisation de parsers personnalisés. Avec ce plugin, votre code est analysé par le parser de Babel (en utilisant la configuration spécifiée dans votre fichier de configuration Babel) et l'AST résultant est transformé en une structure conforme à ESTree qu'ESLint peut comprendre. Toutes les informations de localisation comme les numéros de ligne et de colonne sont également conservées pour faciliter le traçage des erreurs.

Note : Les règles principales d'ESLint ne prennent pas en charge la syntaxe expérimentale et peuvent donc ne pas fonctionner comme prévu avec @babel/eslint-parser. Utilisez le plugin compagnon @babel/eslint-plugin pour les règles principales posant problème.

Utilisation

Installation

npm

npm install eslint @babel/core @babel/eslint-parser --save-dev

Yarn

yarn add eslint @babel/core @babel/eslint-parser --dev

pnpm

pnpm add eslint @babel/core @babel/eslint-parser --save-dev

Bun

bun add eslint @babel/core @babel/eslint-parser --dev

Note : @babel/eslint-parser nécessite @babel/core@>=7.2.0 et un fichier de configuration Babel valide. Si ce n'est pas déjà configuré, consultez le Guide d'utilisation de Babel.

Configuration

Pour utiliser @babel/eslint-parser, vous devez spécifier "@babel/eslint-parser" comme parser dans votre fichier de configuration ESLint (voir ici pour plus de détails).

eslint.config.js

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
    },
  },
]);

.eslintrc.js

module.exports = {
  parser: "@babel/eslint-parser",
};

Une fois le parser configuré, votre configuration peut être ajustée comme décrit dans la documentation Configurer ESLint.

Note : Les parserOptions décrits dans la documentation officielle concernent le parser par défaut et ne sont pas nécessairement pris en charge par @babel/eslint-parser. Reportez-vous à la section ci-dessous pour les parserOptions supportés.

Configuration supplémentaire du parser

Des options de configuration supplémentaires peuvent être définies dans votre configuration ESLint sous la clé parserOptions. Notez que la propriété ecmaFeatures peut toujours être nécessaire pour qu'ESLint fonctionne correctement avec des fonctionnalités non présentes dans ECMAScript 5 par défaut.

• requireConfigFile (default true) can be set to false to allow @babel/eslint-parser to run on files that do not have a Babel configuration associated with them. This can be useful for linting files that are not transformed by Babel (such as tooling configuration files), though we recommend using the default parser via glob-based configuration. Note: When requireConfigFile is false, @babel/eslint-parser will still try to load the root babel config. If no configuration file is found, @babel/eslint-parser will not parse any experimental syntax. Though not recommended, if you have a babel config, but would like to prevent @babel/eslint-parser from loading Babel config, please specify

  eslint.config.js

  import babelParser from "@babel/eslint-parser";
  import { defineConfig } from "eslint/config";
  
  export default defineConfig([
    {
      files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
      languageOptions: {
        parser: babelParser,
        parserOptions: {
          requireConfigFile: false,
          babelOptions: {
            babelrc: false,
            configFile: false,
            // your babel options
            presets: ["@babel/preset-env"],
          },
        },
      },
    },
  ]);

  .eslintrc.js

  module.exports = {
    parser: "@babel/eslint-parser",
    parserOptions: {
      requireConfigFile: false,
      babelOptions: {
        babelrc: false,
        configFile: false,
        // your babel options
        presets: ["@babel/preset-env"],
      },
    },
  };

  eslint.config.js

• sourceType peut être défini sur "module" (par défaut), "script" ou "commonjs".

• ecmaFeatures.globalReturn (par défaut false) autorise les instructions return dans la portée globale lorsqu'utilisé avec sourceType: "script". Cette option sera dépréciée, utilisez plutôt sourceType: "commonjs".

• babelOptions est un objet contenant les options de configuration Babel passées au parser de Babel lors de l'exécution. Utile lorsque les utilisateurs ne souhaitent pas utiliser de fichier de configuration Babel ou exécutent Babel via un autre outil (comme Webpack avec babel-loader).

• allowImportExportEverywhere (par défaut false) peut être défini sur true pour autoriser les déclarations d'import et d'export à apparaître n'importe où où une instruction est permise, si votre environnement de build le permet. Sinon, les déclarations d'import et d'export ne peuvent apparaître qu'au niveau supérieur du programme.

Personnaliser le chemin de configuration Babel

eslint.config.js

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        requireConfigFile: false,
        babelOptions: {
          babelrc: false,
          configFile: "path/to/babel.config.js",
        },
      },
    },
  },
]);

.eslintrc.js

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    sourceType: "module",
    allowImportExportEverywhere: false,
    ecmaFeatures: {
      globalReturn: false,
    },
    babelOptions: {
      configFile: "path/to/config.js",
    },
  },
};

Utiliser une configuration babel.config.mjs

Si votre configuration Babel ne contient pas de await au niveau supérieur, vous devriez pouvoir utiliser directement la configuration .mjs sur Node.js 22.12 ou supérieur. Sinon, vous pouvez utiliser l'implémentation expérimentale avec des workers. Notez que cette implémentation est encore expérimentale, veuillez signaler tout problème rencontré.

eslint.config.js

import babelParserExperimentalWorker from "@babel/eslint-parser/experimental-worker";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParserExperimentalWorker,
      parserOptions: {
        requireConfigFile: false,
        babelOptions: {
          babelrc: false,
          configFile: "path/to/babel.config.mjs",
        },
      },
    },
  },
]);

.eslintrc.js

module.exports = {
  parser: "@babel/eslint-parser/experimental-worker",
  parserOptions: {
    requireConfigFile: false,
    babelOptions: {
      babelrc: false,
      configFile: "path/to/babel.config.mjs",
    },
  },
};

Utiliser une configuration basée sur des globs

Cette configuration utiliserait le parser par défaut pour tous les fichiers, sauf pour ceux correspondant au glob "files/transformed/by/babel/*.js".

eslint.config.js

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["files/transformed/by/babel/*.js"],
    languageOptions: {
      parser: babelParser,
    },
  },
]);

.eslintrc.js

module.exports = {
  rules: {
    indent: "error",
  },
  overrides: [
    {
      files: ["files/transformed/by/babel/*.js"],
      parser: "@babel/eslint-parser",
    },
  ],
};

Configuration pour un monorepo

Cette configuration est utile pour un monorepo, lorsque vous exécutez ESLint sur chaque package et non depuis le dossier racine du monorepo, car elle évite de répéter la configuration Babel et ESLint sur chaque package.

eslint.config.js

import babelParser from "@babel/eslint-parser";
import { defineConfig } from "eslint/config";

export default defineConfig([
  {
    files: ["**/*.js", "**/*.cjs", "**/*.mjs"],
    languageOptions: {
      parser: babelParser,
      parserOptions: {
        babelOptions: {
          rootMode: "upward",
        },
      },
    },
  },
]);

.eslintrc.js

module.exports = {
  parser: "@babel/eslint-parser",
  parserOptions: {
    babelOptions: {
      rootMode: "upward",
    },
  },
};

Exécution

./node_modules/.bin/eslint yourfile.js

TypeScript

Bien que @babel/eslint-parser puisse analyser TypeScript, nous ne prenons actuellement pas en charge le linting TypeScript avec les règles de @babel/eslint-plugin. En effet, la communauté TypeScript s'est centrée autour de @typescript-eslint et nous souhaitons éviter les doublons. De plus, comme @typescript-eslint utilise TypeScript en interne, ses règles peuvent être rendues conscientes des types, ce que Babel n'est pas en mesure de faire.