@babel/plugin-syntax-numeric-separator

What is @babel/plugin-syntax-numeric-separator?

The @babel/plugin-syntax-numeric-separator package allows Babel to parse JavaScript code that uses the numeric separator feature. This feature enables developers to make their numeric literals more readable by creating a visual separation between groups of digits, similar to how commas or spaces are used in human-readable numbers.

What are @babel/plugin-syntax-numeric-separator's main functionalities?

Parsing Numeric Literals with Underscore Separators

This feature allows developers to include underscores in numeric literals as separators to enhance readability without affecting the underlying value.

1000000 // without numeric separator
1_000_000 // with numeric separator

Other packages similar to @babel/plugin-syntax-numeric-separator

@babel/plugin-proposal-numeric-separator

This package not only allows Babel to parse numeric literals with separators but also transforms them into standard JavaScript numbers that can be executed in environments that do not support the numeric separator syntax. It is a step beyond just the syntax plugin, providing both parsing and transformation capabilities.

typescript

TypeScript, a superset of JavaScript, includes support for numeric separators. It can parse and emit JavaScript code with or without numeric separators, providing similar functionality to Babel's numeric separator plugins but within the TypeScript language and compiler.

README

@babel/plugin-syntax-numeric-separator

Allow parsing of Numeric Literals (Decimal, Binary, Hex and Octal) that contain a NumericLiteralSeparator.

Installation

npm install --save-dev @babel/plugin-syntax-numeric-separator

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["@babel/syntax-numeric-separator"]
}

Via CLI

babel --plugins @babel/syntax-numeric-separator script.js

Via Node API

require("@babel/core").transform("code", {
  plugins: ["@babel/syntax-numeric-separator"]
});