@babel/eslint-plugin

@babel/eslint-plugin

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

Install

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"
  }
}

Rules

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 (🛠)

TypeScript

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.

Similar packages

Other packages similar to @babel/eslint-plugin

eslint-plugin-react

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

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

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.