Develop Reference

ESlint: Highlighting ES6 code in an non-transpiled ES5 codebase

We currently have a problem with our build pipeline that prevents certain parts of our legacy codebase from being transpiled.
Subsequently parts of our codebase have to be written in ES5 in order to be backwards compatible with older browsers.
The problem we're having is enforcing the use of ES5 code within these legacy scripts. There are a lot of places in the code where ES6 features (let, const, destructuring, object shorthand) are already used.
Adding an eslint config with the ecmaVersion set to 5 is not ideal because of the way the parser throws an exception on reaching an es6 feature, subsequently meaning no additional linting of the file happens. So you need to resolve all es6 type exceptions before this becomes an option.
We are unable to undertake a grand refactor of the code like this at present. As some parts are still being actively worked on. It is, in a word, a sh*tshow.
My question is, short of building some custom eslint plugin that highlights es6 features, is there any other solution that I may have missed?

As per #VLAZ' suggestion
https://github.com/nkt/eslint-plugin-es5
using the following config in eslintrc:
{
"plugins": [
"es5"
]
}
Worked perfectly for what we needed it for.

How can I use rollup in order to bundle files containing es7 code?

While currently supported by Chrome, rollup rejects my es7 code:
[!] Error: Unexpected token
static/app.js (8:14)
6:
7: class App extends Component {
8: static name = 'MyES7App';
Error: Unexpected token
at error (/usr/local/lib/node_modules/rollup/dist/rollup.js:9435:30)
at Module.error (/usr/local/lib/node_modules/rollup/dist/rollup.js:13407:9)
at tryParse (/usr/local/lib/node_modules/rollup/dist/rollup.js:13320:16)
at Module.setSource (/usr/local/lib/node_modules/rollup/dist/rollup.js:13630:33)
at Promise.resolve.catch.then.then.then (/usr/local/lib/node_modules/rollup/dist/rollup.js:16460:20)
Is there a way to make it work? All I want is to bundle/minimize up some files into one, without taking care of cross-browser support or even transpiling.

The thing is, to be able to minify source code, tool should know about it. It is nearly impossible to minify source code like "plain text", all you can do is remove newlines and extra spaces. Minimizers are using parsers, to generate abstract syntax tree from the source code, and then works with this AST.
Rollup uses Acorn as JS parser, and by default it doesn't support class members. Even though they are available in Chrome, they are not in EcmaScript standard yet, it is proposal on stage 3.
So you need either different parser (like Babylon, which goes with Babel), or somehow teach Acorn of new language features.
I guess easiest way is to setup Babel and use rollup-plugin-babel, to support new syntax and proposals.
UPD Here is related Rollup issue, but looks like suggested Acorn solution is not working anymore...

How to get rid of editor’s error for object.key

I have the following code that basically gets some JSON data, looks for the keys with "servergenre", and saves the results in an array.
This is a follow up of this question.
let result = [];
Object.keys(data).forEach( key => {
if(/servergenre/.test(key)){
result.push(data[key])
}
});
Even though the code is working correctly, in some editors it raises syntactic errors:
"key": unsolvable variable or type key
"=>": expression expected
"if( / server...": formal parameter name expected
")){": , expected
"});": statement expected
Here is an image to show you where the errors are:
As I said the code is working fine, I just need it to be fixed or another approach to get rid of the errors.
Furthermore, many compressors and minifiers do not support this bit of code. So I can’t minify it.
Thanks in advance.

ES2015, formerly known as ES6, is a more recent version of JavaScript, which introduces features such as the => syntax for functions you are using.
Not all features of ES2015 are fully supported in all browsers, so many people who use it pass it through a compiler (“transpiler”) first to convert it to ES5, which is supported by all browsers. Babel is one such transpiler. But if you are only targeting newer browsers, that would explain why the => syntax is working for you.
You just need to change your editor settings to understand that syntax. Exactly how you do that depends on what text editor you are using. It could be that your editor's built-in JavaScript mode doesn't know how to read ES2015 syntax, and you need to either upgrade your editor or install a third-party plugin that provides an updated error-checker. Or it could be that your editor supports both ES5 and ES2015, and it thinks you are trying to write your project only in ES5. In this case you just need to go to the settings and tell your editor that you mean for this project to use ES2015 (or ES2016, which is currently the most recent version).

Fat arrows are ES6 syntax. If that causes trouble, just write good old ES5 :
let result = [];
Object.keys(data).forEach( function(key) {
if(/servergenre/.test(key)){
result.push(data[key])
}
});

How to disable usage of certain ES2015 features with ESLint 2?

In ESLint 1, I can use the ecmaFeatures option to disable or enable certain language features. E.g.
ecmaFeatures:
defaultParams: false
Above config disables defaultParams.
This is very useful because in runtime like Node, not all features are available, and I don't want to use a transpiler.
But in ESLint 2, that was removed. You only got ecmaVersion, which doesn't alerting on usage of ES2015 features at all even if you give it a ecmaVersion of 5. I guess this make sense since the JavaScript interpreter will complain about the usage of unsupported syntax at interpretation time, but what about developing for browsers have different level of ES2015 support? Syntax that works for Chrome won't work for IE9.
Is there any way to lint the usage of language features, e.g. disable destructuring?

no-restricted-syntax rule disallows specific syntax. This "syntax" is meaning the types of AST nodes. The spec of AST is here: https://github.com/estree/estree
eslint-plugin-node's no-unsupported-features rule disallows unsupported ECMA features by specific Node's version. I don't know whether a similar rule for browsers exists or not.

Is there support for static typing in ECMAScript 6 or 7?

Is there any support for static typing in ECMAScript 6? How about ECMAScript 7?

No.
But on the ECMA-Script Wikipage there is a paragraph about changes in ECMA-Script 7:
The Seventh Edition is in a very early stage of development, but is intended to continue the themes of language reform, code isolation, control of effects and library/tool enabling from ES6. New features proposed include promises/concurrency, number and math enhancements, guards and trademarks (an alternative to static typing), operator overloading, value types (first-class number-like objects), new record structures (records, tuples and typed arrays), pattern matching, and traits.
Which may interest you.

Though this isn't part of the ES6 spec, Closure Compiler enforces JSDoc argument type annotations in JavaScript code when using its Advanced compilation level. Type annotations are specified using comments so they're ignored in development, but when you build your app for a production release a type mismatch will result in a compiler warning or, optionally, a compiler error.
An example of an enforced JSDoc type annotation:
/**
* #param {string} stringValue
* #return {number}
*/
function toInt(stringValue) {
return parseInt(stringValue, 10);
}
var val = toInt("10"); // Good
var val = toInt(false); // NaN in development, but throws an error (optional)
// or prints a warning (default) at build time
As an added bonus, JSDoc can build API documentation using this same syntax. So it's also handy if you document your code.
But a warning: for Closure Compiler to do its advanced optimization magic, every engineer on your project has to follow certain strict coding conventions. The compiler cannot enforce types unless it can reliably figure out what your code is doing, and that means giving up some of JavaScript's dynamic and wishy-washy syntax. If you don't follow them, errors can creep into your app and they can be very hard to diagnose after the fact. Most popular JavaScript frameworks and libraries do not follow them, though you can sometimes work around that using Compiler's externs feature. (jQuery is supported using externs, for example.)
So if you do use it, make sure you test your app thoroughly. I personally wouldn't even consider using this feature on a web app unless it has a Jenkins build bot and near-100% automated test coverage that can be run against your code after it's been optimized. That's a lot of work and is not for everyone; it took me months to get one of my projects up to that level. But personally, I think it's well worth the effort.
For more information, check out Advanced Compilation and Externs and Annotating JavaScript for the Closure Compiler.

No, there is no support for static typing in either ECMAScript 6 (ES2015).
As for ECMAScript 7 (ES2016), there is no proposal at any of stages 1, 2, 3, 4 or stage 0 for static typing.
I've seen a few proposals/ideas for static typing appear on the es-discuss mailing list, but none of these have actually been proposed for ES7 (ES2016).
If you want static typing right now, you're probably best looking into TypeScript or Flow.

Althought it's not pure ES6, Google's AtScript extending ES6 with type annotations and compiles into valid ES6 code once the compiler gets public: AtScript primer

As an option you can take a look at EsLint plugin https://github.com/yarax/typelint
It's not static check, but optional. The benefit of TypeLint is using already existing app data to build and use types automatically, unlike for example TypeScript or Flow, where you have to describe complex types by yourself.