babel-preset-airbnb

babel-preset-airbnb

A babel preset for transforming your JavaScript for Airbnb.

Currently contains transforms for all stage 4 (ES2018) and stage 3 syntax that is permitted in the Airbnb Style Guide. Please note that if usage of a stage 3 proposal is not explicitly mentioned in the Airbnb Style Guide, then it will not be enabled here. Additionally, stage 4 syntax that is excluded is as follows:

• generators: regenerator-runtime is too heavyweight for our use.
• async/await: regenerator-runtime is too heavyweight for our use, and async-to-promises is not yet complete enough to be safely used.
• async iterators: depends on both generators and async functions
• lifted template literal restrictions: we do not use tagged template literals, nor implement custom DSLs, otherwise we would enable this.

Install

$ npm install --save-dev babel-preset-airbnb

Usage

Via .babelrc (Recommended)

.babelrc

{
  "presets": ["airbnb"]
}

Via CLI

$ babel script.js --presets airbnb

Via Node API

require('@babel/core').transform('code', {
  presets: ['airbnb']
});

Targeting Environments

This module uses @babel/preset-env to target specific environments.

Please refer to @babel/preset-env#targets for a list of available options.

For a list of browsers please see browserlist.

You may override our default list of targets by providing your own targets key.

{
  "presets": [["airbnb", {
    "targets": {
      "chrome": 50,
      "explorer": 11,
      "firefox": 45
    }
  }]]
}

The following transpiles only for Node v6.

{
  "presets": [["airbnb", {
    "targets": {
      "node": 6
    }
  }]]
}

If you wish, you can also inherit our default list of browsers and extend them using additionalTargets.

{
  "presets": [["airbnb", {
    "additionalTargets": {
      "chrome": 42,
      "explorer": 8
    }
  }]]
}

You may override our default debug option by providing your own debug key.

{
  "presets": [["airbnb", {
    "debug": true
  }]]
}

React Development Mode

When process.env.NODE_ENV is 'development', the development mode will be set for @babel/preset-react.

You may override our default development option by providing your own boolean development key.

{
  "presets": [["airbnb", {
    "development": false
  }]]
}

React PropTypes removal

This preset can be configured to remove propTypes using babel-plugin-transform-react-remove-prop-types with the following default options:

To enable this transformation with the default options, set the removePropTypes option to true:

{
  "presets": [["airbnb", {
    "removePropTypes": true
  }]]
}

The default options that will be used are:

{
  mode: 'wrap',
  additionalLibraries: ['airbnb-prop-types'],
  ignoreFilenames: ['node_modules'],
}

Default options can be overridden using the removePropTypes option. These options will be shallow-merged with the defaults:

{
  "presets": [["airbnb", {
    "removePropTypes": {
      "mode": "remove"
    }
  }]]
}

For example, if you are using this plugin in a deployable app, you might want to use the remove mode for your production build (and disable this transform entirely in development for optimal build speeds).

JScript

This preset uses a transform to protect against JScript bugs in older versions of Internet Explorer. If you'd like to disable this, set the jscript option to false:

{
  "presets": [["airbnb", {
    "jscript": false,
  }]]
}

Changelog

[3.1.0] - 2018-12-13

• [New] add jscript option to disable JScript transformation (#45)