Security News
vlt Debuts New JavaScript Package Manager and Serverless Registry at NodeConf EU
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
@babel/eslint-parser
Advanced tools
ESLint parser that allows for linting of experimental syntax transformed by Babel
The @babel/eslint-parser package is an ESLint parser that allows you to lint all valid Babel code with ESLint. It is designed to be used with ESLint and Babel, enabling developers to use ESLint on code that contains Babel-specific syntax. The parser is compatible with the latest JavaScript features and experimental syntax, allowing developers to write modern JavaScript without worrying about linting issues.
Parsing Babel Code
This feature allows you to parse Babel code with ESLint. The code sample shows how to configure ESLint to use @babel/eslint-parser in an ESLint configuration file.
module.exports = {
parser: '@babel/eslint-parser',
parserOptions: {
requireConfigFile: false,
babelOptions: {
presets: ['@babel/preset-env']
}
}
};
Using with ESLint and Babel
This feature integrates ESLint with Babel, allowing you to apply ESLint rules to Babel code. The code sample provides an example of an ESLint configuration that uses @babel/eslint-parser and specifies some ESLint rules.
module.exports = {
extends: ['eslint:recommended'],
parser: '@babel/eslint-parser',
env: {
browser: true,
es6: true
},
rules: {
'no-unused-vars': 'warn',
'no-console': 'off'
}
};
Espree is the default parser for ESLint and is built on top of Acorn. It is used to parse ECMAScript 2015+ code. While it supports many modern JavaScript features, it does not have the same level of experimental syntax support as @babel/eslint-parser.
This is an ESLint plugin that pairs with typescript-eslint/parser. It contains a set of ESLint rules that are specific to TypeScript code. It is similar to @babel/eslint-parser in that it extends ESLint's capabilities to additional syntax, but it is focused on TypeScript rather than Babel.
@babel/eslint-parser allows you to lint ALL valid Babel code with the fantastic ESLint.
ESLint's default parser and core rules only support the latest final ECMAScript standard and do not support experimental (such as new features) and non-standard (such as Flow or TypeScript types) syntax provided by Babel. @babel/eslint-parser is a parser that allows ESLint to run on source code that is transformed by Babel.
Note: You only need to use @babel/eslint-parser if you are using Babel to transform your code. If this is not the case, please use the relevant parser for your chosen flavor of ECMAScript (note that the default parser supports all non-experimental syntax as well as JSX).
ESLint allows for the use of custom parsers. When using this plugin, your code is parsed by Babel's parser (using the configuration specified in your Babel configuration file) and the resulting AST is transformed into an ESTree-compliant structure that ESLint can understand. All location info such as line numbers, columns is also retained so you can track down errors with ease.
Note: ESLint's core rules do not support experimental syntax and may therefore not work as expected when using @babel/eslint-parser
. Please use the companion @babel/eslint-plugin
plugin for core rules that you have issues with.
$ npm install eslint @babel/core @babel/eslint-parser --save-dev
# or
$ yarn add eslint @babel/core @babel/eslint-parser -D
Note: @babel/eslint-parser requires @babel/core@>=7.2.0
and a valid Babel configuration file to run. If you do not have this already set up, please see the Babel Usage Guide.
To use @babel/eslint-parser, "@babel/eslint-parser"
must be specified as the parser
in your ESLint configuration file (see here for more detailed information).
.eslintrc.js
module.exports = {
parser: "@babel/eslint-parser",
};
With the parser set, your configuration can be configured as described in the Configuring ESLint documentation.
Note: The parserOptions
described in the official documentation are for the default parser and are not necessarily supported by @babel/eslint-parser. Please see the section directly below for supported parserOptions
.
Additional configuration options can be set in your ESLint configuration under the parserOptions
key. Please note that the ecmaFeatures
config property may still be required for ESLint to work properly with features not in ECMAScript 5 by 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
.eslintrc.jsmodule.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
requireConfigFile: false,
babelOptions: {
babelrc: false,
configFile: false,
// your babel options
presets: ["@babel/preset-env"],
},
},
};
sourceType
can be set to "module"
(default) or "script"
if your code isn't using ECMAScript modules.allowImportExportEverywhere
(default false
) can be set to true
to allow import and export declarations to appear anywhere a statement is allowed if your build environment supports that. Otherwise import and export declarations can only appear at a program's top level.ecmaFeatures.globalReturn
(default false
) allow return statements in the global scope when used with sourceType: "script"
.babelOptions
is an object containing Babel configuration options that are passed to Babel's parser at runtime. For cases where users might not want to use a Babel configuration file or are running Babel through another tool (such as Webpack with babel-loader
)..eslintrc.js
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
sourceType: "module",
allowImportExportEverywhere: false,
ecmaFeatures: {
globalReturn: false,
},
babelOptions: {
configFile: "path/to/config.js",
},
},
};
.eslintrc.js using glob-based configuration
This configuration would use the default parser for all files except for those found by the "files/transformed/by/babel/*.js"
glob.
module.exports = {
rules: {
indent: "error",
},
overrides: [
{
files: ["files/transformed/by/babel/*.js"],
parser: "@babel/eslint-parser",
},
],
};
Monorepo configuration
This configuration is useful for monorepo, when you are running ESLint on every package and not from the monorepo root folder, as it avoids to repeat the Babel and ESLint configuration on every package.
module.exports = {
parser: "@babel/eslint-parser",
parserOptions: {
babelOptions: {
rootMode: "upward",
},
},
};
$ ./node_modules/.bin/eslint yourfile.js
While @babel/eslint-parser
can parse TypeScript, we don't currently support linting TypeScript using the rules in @babel/eslint-plugin
. This is because the TypeScript community has centered around @typescript-eslint
and we want to avoid duplicate work. Additionally, since @typescript-eslint
uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do.
If you have an issue, please first check if it can be reproduced with the default parser and with the latest versions of eslint
and @babel/eslint-parser
. If it is not reproducible with the default parser, it is most likely an issue with @babel/eslint-parser
.
For questions and support please visit the #discussion
Babel Slack channel (sign up here) or the ESLint Discord server.
v7.25.0 (2024-07-26)
babel-helpers
, babel-plugin-proposal-explicit-resource-management
, babel-runtime-corejs3
babel-plugin-transform-typescript
babel-helper-create-class-features-plugin
, babel-helper-function-name
, babel-helper-plugin-utils
, babel-helper-wrap-function
, babel-plugin-bugfix-safari-class-field-initializer-scope
, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression
, babel-plugin-transform-classes
, babel-plugin-transform-function-name
, babel-preset-env
, babel-traverse
, babel-types
ensureFunctionName
to NodePath.prototype
(@nicolo-ribaudo)babel-helper-hoist-variables
, babel-helper-plugin-utils
, babel-plugin-proposal-async-do-expressions
, babel-plugin-transform-modules-systemjs
, babel-traverse
hoistVariables
to Scope.prototype
(@nicolo-ribaudo)babel-helper-create-class-features-plugin
, babel-helper-module-transforms
, babel-helper-plugin-utils
, babel-helper-split-export-declaration
, babel-plugin-transform-classes
, babel-traverse
, babel-types
splitExportDeclaration
to NodePath.prototype
(@nicolo-ribaudo)babel-helper-create-class-features-plugin
, babel-helper-environment-visitor
, babel-helper-module-transforms
, babel-helper-plugin-utils
, babel-helper-remap-async-to-generator
, babel-helper-replace-supers
, babel-plugin-bugfix-firefox-class-in-computed-class-key
, babel-plugin-bugfix-v8-static-class-fields-redefine-readonly
, babel-plugin-transform-async-generator-functions
, babel-plugin-transform-classes
, babel-traverse
environment-visitor
helper into @babel/traverse
(@nicolo-ribaudo)babel-core
, babel-parser
.extra.async
(@nicolo-ribaudo)babel-compat-data
, babel-plugin-bugfix-safari-class-field-initializer-scope
, babel-preset-env
bugfix-safari-class-field-initializer-scope
(@davidtaylorhq)babel-plugin-transform-block-scoping
, babel-traverse
, babel-types
babel-helper-import-to-platform-api
, babel-plugin-proposal-json-modules
uncheckedRequire
option for JSON imports to CJS (@nicolo-ribaudo)babel-helper-transform-fixture-test-runner
, babel-node
babel-node --eval
(@slatereax)babel-compat-data
, babel-helper-create-regexp-features-plugin
, babel-plugin-proposal-duplicate-named-capturing-groups-regex
, babel-plugin-transform-duplicate-named-capturing-groups-regex
, babel-preset-env
, babel-standalone
babel-generator
babel-template
, babel-types
babel-generator
(
before ambiguous tokens (@nicolo-ribaudo)babel-helper-function-name
, babel-plugin-transform-arrow-functions
, babel-plugin-transform-function-name
, babel-preset-env
, babel-traverse
helper-function-name
logic (@nicolo-ribaudo)babel-parser
, babel-plugin-proposal-pipeline-operator
babel-plugin-transform-classes
assertThisInitialized
(@liuxingbaoyu)babel-helper-create-class-features-plugin
, babel-helper-replace-supers
, babel-helpers
, babel-plugin-proposal-decorators
, babel-plugin-transform-class-properties
, babel-plugin-transform-classes
, babel-plugin-transform-exponentiation-operator
, babel-plugin-transform-object-super
, babel-plugin-transform-private-methods
, babel-runtime-corejs2
, babel-runtime-corejs3
, babel-runtime
super.x
output (@liuxingbaoyu)babel-plugin-transform-class-properties
, babel-plugin-transform-classes
FAQs
ESLint parser that allows for linting of experimental syntax transformed by Babel
The npm package @babel/eslint-parser receives a total of 5,899,599 weekly downloads. As such, @babel/eslint-parser popularity was classified as popular.
We found that @babel/eslint-parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.
Security News
Research
The Socket Research Team uncovered a malicious Python package typosquatting the popular 'fabric' SSH library, silently exfiltrating AWS credentials from unsuspecting developers.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.