Babel and other tools

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

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

    First install eslint and babel-eslint.

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

    1.   {
    2. +   "parser": "babel-eslint",
    3.     "rules": {
    5.     }
    6.   }

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

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

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

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

      1.   {
      2.     "preset": "airbnb",
      3. +   "esnext": true
      4.   }

      For more information consult the babel-jscs or 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.

      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 has dramatically changed their API to align with ES2015 classes (). 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 .

      Most notably the plugin which combined with a number of can enable things like hot module reloading and other debugging utilities.

      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.