Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@babel/eslint-plugin
Advanced tools
@babel/eslint-plugin is an ESLint plugin that allows you to lint your Babel code. It provides rules and configurations to ensure that your code adheres to best practices and coding standards when using Babel.
Linting Babel Code
This configuration file sets up ESLint to use the @babel/eslint-parser and includes several rules from the @babel/eslint-plugin. These rules help enforce coding standards and best practices for Babel code.
module.exports = {
parser: '@babel/eslint-parser',
plugins: ['@babel'],
rules: {
'@babel/new-cap': 'error',
'@babel/no-invalid-this': 'error',
'@babel/no-unused-expressions': 'error',
'@babel/object-curly-spacing': ['error', 'always'],
'@babel/semi': ['error', 'always']
}
};
Custom Babel Rules
This example demonstrates how to configure ESLint to use specific rules from the @babel/eslint-plugin. The rules '@babel/no-invalid-this' and '@babel/no-unused-expressions' are enabled to catch common issues in Babel code.
module.exports = {
parser: '@babel/eslint-parser',
plugins: ['@babel'],
rules: {
'@babel/no-invalid-this': 'error',
'@babel/no-unused-expressions': 'error'
}
};
eslint-plugin-react is an ESLint plugin for React-specific linting rules. It helps enforce best practices and coding standards for React applications. Compared to @babel/eslint-plugin, it focuses specifically on React code rather than general Babel code.
eslint-plugin-vue is an ESLint plugin for Vue.js-specific linting rules. It provides rules and configurations to ensure that your Vue.js code adheres to best practices and coding standards. Unlike @babel/eslint-plugin, which is for Babel code, eslint-plugin-vue is tailored for Vue.js applications.
eslint-plugin-import is an ESLint plugin that helps validate proper imports and exports in your JavaScript code. It ensures that your import/export statements are correct and follow best practices. While @babel/eslint-plugin focuses on Babel code, eslint-plugin-import is more concerned with module import/export syntax.
Companion rules for @babel/eslint-parser
. @babel/eslint-parser
does a great job at adapting eslint
for use with Babel, but it can't change the built-in rules to support experimental features.
@babel/eslint-plugin
re-implements problematic rules so they do not give false positives or negatives.
Requires Node 10.13 or greater
npm install @babel/eslint-plugin --save-dev
Load the plugin in your .eslintrc.json
file:
{
"plugins": ["@babel"]
}
Finally enable all the rules you would like to use (remember to disable the original ones as well!).
{
"rules": {
"@babel/new-cap": "error",
"@babel/no-invalid-this": "error",
"@babel/no-undef": "error",
"@babel/no-unused-expressions": "error",
"@babel/object-curly-spacing": "error",
"@babel/semi": "error"
}
}
Each rule corresponds to a core eslint
rule and has the same options.
🛠: means it's autofixable with --fix
.
@babel/new-cap
: handles decorators (@Decorator
)@babel/no-invalid-this
: handles class fields and private class methods (class A { a = this.b; }
)@babel/no-undef
: handles class accessor properties (class A { accessor x = 2 }
)@babel/no-unused-expressions
: handles do
expressions@babel/object-curly-spacing
: handles export * as x from "mod";
(🛠)@babel/semi
: Handles class properties (🛠)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.
v7.25.7 (2024-10-02)
babel-helper-validator-identifier
babel-traverse
babel-plugin-transform-classes
super()
check (@nicolo-ribaudo)babel-generator
infer
in compact mode (@nicolo-ribaudo)[no LineTerminator here]
after nodes (@nicolo-ribaudo)babel-types
babel-core
--experimental-require-module
(@nicolo-ribaudo)babel-helper-compilation-targets
, babel-helper-plugin-utils
, babel-preset-env
babel-plugin-proposal-destructuring-private
, babel-plugin-syntax-decimal
, babel-plugin-syntax-import-reflection
, babel-standalone
babel-generator
[no LineTerminator here]
before nodes (@nicolo-ribaudo)babel-plugin-transform-typescript
babel-types
BABEL_TYPES_8_BREAKING
at startup (@nicolo-ribaudo)FAQs
Companion rules for @babel/eslint-parser
The npm package @babel/eslint-plugin receives a total of 423,993 weekly downloads. As such, @babel/eslint-plugin popularity was classified as popular.
We found that @babel/eslint-plugin 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.