Saltar al contenido principal

@babel/eslint-parser

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

@babel/eslint-parser te permite analizar todo código Babel válido con el fantástico ESLint.

¿Cuándo debo usar @babel/eslint-parser?​

El parser predeterminado de ESLint y sus reglas principales solo admiten el estándar ECMAScript final más reciente y no soportan sintaxis experimental (como nuevas funcionalidades) ni no estándar (como tipos de Flow o TypeScript) proporcionada por Babel. @babel/eslint-parser es un parser que permite a ESLint ejecutarse en código fuente transformado por Babel.

Nota: Solo necesitas usar @babel/eslint-parser si estás utilizando Babel para transformar tu código. Si no es el caso, usa el parser relevante para la variante de ECMAScript que hayas elegido (ten en cuenta que el parser predeterminado admite toda sintaxis no experimental, así como JSX).

¿Cómo funciona?​

ESLint permite el uso de parsers personalizados. Al usar este plugin, tu código es analizado por el parser de Babel (usando la configuración especificada en tu archivo de configuración de Babel) y el AST resultante se transforma en una estructura compatible con ESTree que ESLint puede entender. Toda la información de ubicación como números de línea y columnas también se conserva para que puedas rastrear errores fácilmente.

Nota: Las reglas principales de ESLint no admiten sintaxis experimental y por lo tanto pueden no funcionar como se espera al usar @babel/eslint-parser. Usa el plugin complementario @babel/eslint-plugin para las reglas principales con las que tengas problemas.

Uso​

Instalación​

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

Nota: @babel/eslint-parser requiere @babel/core@>=7.2.0 y un archivo de configuración de Babel válido para funcionar. Si aún no tienes esto configurado, consulta la Guía de uso de Babel.

Configuración​

Para usar @babel/eslint-parser, debes especificar "@babel/eslint-parser" como el parser en tu archivo de configuración de ESLint (consulta aquí para más información detallada).

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

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

Con el parser configurado, puedes establecer tu configuración como se describe en la documentación de Configuración de ESLint.

Nota: Las parserOptions descritas en la documentación oficial son para el parser predeterminado y no son necesariamente compatibles con @babel/eslint-parser. Consulta la sección siguiente para ver las parserOptions admitidas.

Configuración adicional del parser​

Puedes establecer opciones de configuración adicionales en tu configuración de ESLint bajo la clave parserOptions. Ten en cuenta que la propiedad de configuración ecmaFeatures aún puede ser necesaria para que ESLint funcione correctamente con características que no están en ECMAScript 5 por defecto.

  • 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

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

    eslint.config.js

  • sourceType puede establecerse en "module" (predeterminado), "script" o "commonjs".

  • ecmaFeatures.globalReturn (predeterminado false) permite declaraciones return en el ámbito global cuando se usa con sourceType: "script". Esta opción será obsoleta, usa sourceType: "commonjs" en su lugar.

  • babelOptions es un objeto que contiene opciones de configuración de Babel que se pasan al parser de Babel en tiempo de ejecución. Para casos donde los usuarios no quieran usar un archivo de configuración de Babel o estén ejecutando Babel a través de otra herramienta (como Webpack con babel-loader).

  • allowImportExportEverywhere (por defecto false) puede establecerse en true para permitir declaraciones de importación y exportación en cualquier lugar donde se permita una declaración, si tu entorno de compilación lo soporta. De lo contrario, las declaraciones de importación y exportación solo pueden aparecer en el nivel superior del programa.

Personalizar la ruta de configuración de Babel​

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

Usar configuración babel.config.mjs​

Si tu configuración de Babel no contiene await de nivel superior, deberías poder usar la configuración .mjs directamente en Node.js 22.12 o superior. De lo contrario, puedes usar la implementación experimental de worker. Ten en cuenta que esta implementación sigue siendo experimental, reporta cualquier problema que encuentres.

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

Usar configuración basada en globs​

Esta configuración utiliza el parser predeterminado para todos los archivos excepto aquellos coincidentes con el glob "files/transformed/by/babel/*.js".

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

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

Configuración para monorepos​

Esta configuración es útil para monorepos cuando ejecutas ESLint en cada paquete individualmente y no desde la raíz del monorepo, ya que evita repetir la configuración de Babel y ESLint en cada paquete.

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

Ejecución​

./node_modules/.bin/eslint yourfile.js

TypeScript​

Si bien @babel/eslint-parser puede analizar TypeScript, actualmente no admitimos el linting de TypeScript usando las reglas de @babel/eslint-plugin. Esto se debe a que la comunidad de TypeScript se ha centrado en @typescript-eslint y queremos evitar trabajo duplicado. Además, como @typescript-eslint usa TypeScript internamente, sus reglas pueden ser conscientes de tipos, algo que Babel no puede hacer.