Vai al contenuto principale

@babel/eslint-parser

Traduzione Beta Non Ufficiale

Questa pagina è stata tradotta da PageTurner AI (beta). Non ufficialmente approvata dal progetto. Hai trovato un errore? Segnala problema →

@babel/eslint-parser consente di analizzare tutto il codice Babel valido con il fantastico ESLint.

Quando usare @babel/eslint-parser?​

Il parser predefinito e le regole principali di ESLint supportano solo l'ultimo standard ECMAScript finale e non gestiscono la sintassi sperimentale (come nuove funzionalità) e non standard (come tipi Flow o TypeScript) fornita da Babel. @babel/eslint-parser è un parser che permette a ESLint di funzionare su codice sorgente trasformato da Babel.

Nota: È necessario usare @babel/eslint-parser solo se si utilizza Babel per trasformare il codice. In caso contrario, utilizzare il parser pertinente per la variante di ECMAScript scelta (notare che il parser predefinito supporta tutta la sintassi non sperimentale così come JSX).

Come funziona?​

ESLint consente l'uso di parser personalizzati. Con questo plugin, il codice viene analizzato dal parser di Babel (usando la configurazione specificata nel file di configurazione di Babel) e l'AST risultante viene trasformato in una struttura conforme a ESTree comprensibile da ESLint. Tutte le informazioni di posizione come numeri di riga e colonne vengono mantenute per individuare facilmente gli errori.

Nota: Le regole principali di ESLint non supportano sintassi sperimentale e potrebbero non funzionare correttamente con @babel/eslint-parser. Utilizzare il plugin complementare @babel/eslint-plugin per le regole principali che presentano problemi.

Utilizzo​

Installazione​

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

Nota: @babel/eslint-parser richiede @babel/core@>=7.2.0 e un file di configurazione di Babel valido. Se non li hai già configurati, consulta la Guida all'utilizzo di Babel.

Configurazione​

Per usare @babel/eslint-parser, specifica "@babel/eslint-parser" come parser nel tuo file di configurazione ESLint (vedi qui per maggiori dettagli).

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

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

Con il parser impostato, la configurazione può essere definita come descritto nella documentazione Configuring ESLint.

Nota: Le parserOptions descritte nella documentazione ufficiale sono per il parser predefinito e non sono necessariamente supportate da @babel/eslint-parser. Consulta la sezione sottostante per le parserOptions supportate.

Configurazione aggiuntiva del parser​

Opzioni aggiuntive possono essere impostate nella configurazione ESLint sotto la chiave parserOptions. Nota che la proprietà ecmaFeatures potrebbe ancora essere necessaria per il corretto funzionamento di ESLint con funzionalità non presenti in ECMAScript 5 di default.

  • 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 può essere impostato a "module" (predefinito), "script" o "commonjs".

  • ecmaFeatures.globalReturn (predefinito false) consente istruzioni return nell'ambito globale con sourceType: "script". Questa opzione verrà deprecata: usare invece sourceType: "commonjs".

  • babelOptions è un oggetto contenente le opzioni di configurazione di Babel passate al parser durante l'esecuzione. Utile per chi non vuole usare un file di configurazione Babel o utilizza strumenti come Webpack con babel-loader.

  • allowImportExportEverywhere (valore predefinito false) può essere impostato su true per consentire alle dichiarazioni di import ed export di apparire ovunque sia consentita un'istruzione, se il tuo ambiente di build lo supporta. Altrimenti, le dichiarazioni di import ed export possono apparire solo al livello più alto del programma.

Personalizza il percorso di configurazione di 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",
        },
      },
    },
  },
]);

Utilizzo della configurazione babel.config.mjs​

Se la tua configurazione Babel non contiene await di alto livello, dovresti poter usare direttamente la configurazione .mjs su Node.js 22.12 o superiore. In caso contrario, puoi utilizzare l'implementazione sperimentale del worker. Nota che l'implementazione è ancora sperimentale: segnala eventuali problemi.

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

Configurazione basata su glob​

Questa configurazione utilizza il parser predefinito per tutti i file eccetto quelli corrispondenti al 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,
    },
  },
]);

Configurazione per monorepo​

Utile per monorepo quando ESLint viene eseguito su ogni pacchetto e non dalla root del monorepo, evitando di ripetere la configurazione Babel ed ESLint in ogni pacchetto.

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

Esecuzione​

./node_modules/.bin/eslint yourfile.js

TypeScript​

Sebbene @babel/eslint-parser possa analizzare TypeScript, attualmente non supportiamo l'analisi di TypeScript con le regole di @babel/eslint-plugin. Questo perché la community TypeScript si è concentrata su @typescript-eslint e vogliamo evitare duplicazioni. Inoltre, poiché @typescript-eslint utilizza TypeScript internamente, le sue regole possono essere rese type-aware, capacità che Babel non possiede.