Babel and other tools

Babel is pretty straight forward to setup once you get the hang of it, but it can be rather difficult navigating how to set it up with other tools. However, we try to work closely with other projects in order to make the experience as easy as possible.

Static analysis tools

Newer standards bring a lot of new syntax to the language and static analysis tools are just starting to take advantage of it.

Linting

One of the most popular tools for linting is ESLint, because of this we maintain an official babel-eslint integration.

First install eslint and babel-eslint.

$ npm install --save-dev eslint babel-eslint

Next create or use the existing .eslintrc file in your project and set the parser as babel-eslint.

  {
+   "parser": "babel-eslint",
    "rules": {
      ...
    }
  }

Now add a lint task to your npm package.json scripts:

  {
    "name": "my-module",
    "scripts": {
+     "lint": "eslint my-files.js"
    },
    "devDependencies": {
      "babel-eslint": "...",
      "eslint": "..."
    }
  }

Then just run the task and you will be all setup.

$ npm run lint

For more information consult the babel-eslint or eslint documentation.

Code Style

JSCS has merged with ESLint, so checkout Code Styling with ESLint.

JSCS is an extremely popular tool for taking linting a step further into checking the style of the code itself. A core maintainer of both the Babel and JSCS projects (@hzoo) maintains an official integration with JSCS.

Even better, this integration now lives within JSCS itself under the --esnext option. So integrating Babel is as easy as:

$ jscs . --esnext

From the cli, or adding the esnext option to your .jscsrc file.

  {
    "preset": "airbnb",
+   "esnext": true
  }

For more information consult the babel-jscs or jscs documentation.

Documentation

Using Babel, ES2015, and Flow you can infer a lot about your code. Using documentation.js you can generate detailed API documentation very easily.

Documentation.js uses Babel behind the scenes to support all of the latest syntax including Flow annotations in order to declare the types in your code.

Frameworks

All of the major JavaScript frameworks are now focused on aligning their APIs around the future of the language. Because of this, there has been a lot of work going into the tooling.

Frameworks have the opportunity not just to use Babel but to extend it in ways that improve their users’ experience.

React

React has dramatically changed their API to align with ES2015 classes (Read about the updated API here). Even further, React relies on Babel to compile it’s JSX syntax, deprecating it’s own custom tooling in favor of Babel. You can start by setting up the babel-preset-react package following the instructions above.

The React community took Babel and ran with it. There are now a number of transforms built by the community.

Most notably the babel-plugin-react-transform plugin which combined with a number of React-specific transforms can enable things like hot module reloading and other debugging utilities.

Text Editors and IDEs

Introducing ES2015, JSX, and Flow syntax with Babel can be helpful, but if your text editor doesn’t support it then it can be a really bad experience. For this reason you will want to setup your text editor or IDE with a Babel plugin.

• Sublime Text
• Atom
• Vim
• WebStorm

<!—