SonarQube supports ECMAScript 6

by |

    The 2.1 version of the JavaScript Plugin fully supports ECMAScript 6 (ES6). But what does that mean exactly ?



    What is ECMAScript 6 ?



    Let’s start from the beginning. The JavaScript language is one implementation of the ECMAScript language standard. (JScript and ActionScript are two more.) Each browser has its own JavaScript interpreter, and most modern browsers support the ECMAScript 5 (ES5) standard. That means that you can write JavaScript that adheres to the ES5 standard and have it work correctly for the vast majority of your users.



    ES6 is the next version of the standard, and it provides great new features to allow you to write shareable, efficient, and readable code more easily. Luke Hobbans is a member of TC39, the committee behind ECMAScript. He’s written up a great summary, of the main features of ES6, including a short description of each, complete with code snippet.
    Here’s a quick sample for 2 new constructs, variable and constant declaration, and arrow function:


    Block scoped binding construct: let for variable declaration and const for constant declaration.

    
    const a = 1;
    a = 2;  // error - cannot be re-assigned
    
    if (true) {
      let b = 1;
    }
    print(b);  // b is undefined
    



    Arrow function: function shorthand using the => syntax.

    
    let sum = (a, b) => a + b;
    



    Can I use ES6 today ?



    A new version of the standard also means that each browser needs to provide support for it, at least the major ones. It might take years before it happens, but you don’t have to wait for that to take advantage of the innovations in ECMAScript 6!
    Thanks to the availability of ES6-to-ES5 transpilers, it is possible to use ES6 features today. A transpiler will translate your ECMAScript 6 code to ECMAScript 5 code so it can be run by today’s browsers. I like the Traceur compiler, which offers an online demo. You can enter ES6 on the left side and see the resulting ES5 code on right.
    AngularJS has already taken advantage of a transpiler to make the move with AngularJS 2.0.

    You can follow the progress of ES6 support in browsers and for transpilers in Juriy Zaytsev’s ES6 compatibility matrix.

    Use SonarQube to analyze ES6 code



    The SonarQube JavaScript Plugin 2.1 fully supports ES6. What does that mean?

    It means that the plugin is able to:

    parse ES6 source code,




    compute all relevant metrics accordingly:


    • a classes count is computed when classes are used
    • class complexity is computed when classes are used
    • the function count includes generator functions
    • general complexity metrics take generators into account
    • the number of accessors is now computed




    analyse code against rules, all existing coding rules have been updated to cover the new features, e.g: “unused variable” will detect unused variables & constants declared with let and const.




    In upcoming versions, we’ll be adding new rules specific to ES6 features. We’re still figuring out what those should be, but a set of rules about classes is likely. If you’ve got suggestions, please let us know at user@sonar.codehaus.com.

    Wanna see a live demo? Check out Angular DI Framework using ES6 on nemo: Angular Dependency Injection v2.