@babel/eslint-plugin

What is @babel/eslint-plugin?

@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.

What are @babel/eslint-plugin's main functionalities?

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'
  }
};

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.

README

@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.