Brackets: Support for ES6

[NorthLake]

Prerequisites

• [x] Can you reproduce the problem with Debug -> Reload Without Extensions?
• [x] Did you perform a cursory search to see if your bug or enhancement is already reported?
• [x] Did you read the Troubleshooting guide?

For more information on how to write a good bug report read here
For more information on how to contribute read here

Description

I'm fairly new to JavaScript, so I don't know a lot of it's syntax. The checker (I don't know how you call it, it's the symbol in the lower right hand corner) is therefore very helpful. The problem is that Learning JavaScript I've been using ES6 (using const, let, etc.), but the 'checker' doesn't support ES6. Could you please implement ES6? Thank you.

Steps to Reproduce

1. Write code in ES6 (e.g. using const and let)

Expected behavior: [What you expected to happen]
No errors. Well done!

Actual behavior: [What actually happened]
Expected an identifier and instead saw 'const'.

Versions

Please include the OS and what version of the OS you're running.
Please include the version of Brackets. You can find it under Help -> About Brackets (Windows and Linux) or Brackets -> About Brackets (macOS)

Windows 10 Home v 1703
Sprint 10 build 1.10.0-17483

[petetnt]

Hi @NorthLake,

Brackets 1.11. defaults to ESLint which supports all the ES2015 (/ES6) features out of the box. Meanwhile you can install brackets-eslint from the extension manager too 👍

[jeremyredhead]

So I recently upgraded to 1.11, but am having this exact problem too, any advice on how to fix this?

Version Info

Release 1.11 build 1.11.0-17524 (release 86b5e2d4e)
build timestamp: Wed Sep 20 2017 11:49:15 GMT+0100

[phoefgen]

Im also struggling to get es6 support working.

[jediwade]

I ended up disabling the built-in brackets eslint checker because I couldn't get the error messages to go away either, even when I added the JS comment at the top of my document that the ESLint documentation says will make it allow ES6 code.

[shaunhurley]

Bump this discussion.

As of Version 1.11 Brackets is ESLint by default. According to the ESLint documentation at https://eslint.org/docs/user-guide/configuring ESLint supports ES6 out of the box per @petetnt but expects ECMAScript 5 syntax by default, hence presumably the issue being reported related to ECMAScript 6 syntax.

You can override the default behaviors i.e. specify ES6 syntax by providing ESLint with configuration options however, if you try to create a local .eslintrc.json config file, Brackets starts reporting that you must have ESLint locally installed in your project folder (see discussion here https://github.com/brackets-userland/brackets-eslint/issues/63)

Does anyone know if there is any way to pass the default ESLint extension configuration directives via the "brackets.json" config file, similar to how the "jslint.options" section works, but for ESLint?

Thanks!

P.S. Upon further playing, appears can override config directives locally with comment directives e.g.
/* eslint-env node, es6 /
/ eslint-parserOptions.ecmaVersion: 6 */

[petetnt]

Hi @shaunhurley,

as the built-in ESLint is the same plugin as standalone brackets-eslint, passing the "brackets-eslint.useLocalESLint": true option in brackets.json should force the plugin to use its own version ESLint.

That said I would be hesitant to add non-standard ways of adding eslint configurations (such as having them in brackets.json) and do recommended installing ESLint locally even if a project might not otherwise be using npm, as it's the only way to guarantee that everything inter-ops as expected.

Thanks for your feedback, it's always appriciated!

[shaunhurley]

@petetnt,

Thanks, appears I have mistakenly assumed that the eslint.useLocalESLint": true directive was intended to force using a locally installed (i.e. in project directory) instance of ESLint and override the version distributed with Brackets.

If I am reading your comments correctly, it sounds like that directive works the other way, forcing Brackets to use the ESLint version distributed with Brackets even though I have a local configuration file - is that correct?

Thanks for the assist!

[petetnt]

The option name is a bit confusing, but I _think_ that should be the case:

https://github.com/brackets-userland/brackets-eslint#configuration-defaults

> To force the extension to use its own local version of ESLint:

   {
      "brackets-eslint.useLocalESLint": true
   }

[shaunhurley]

You appear to be absolutely correct, thanks for the pointer. Agree it could use a little clarification :)

[jiovanniro]

Brackets was a great editor to use, especially for quick set up and live reload but it doesn't seem like the authors have integrated ES6 well in the latest version. I'll be sticking with VS Code.

[KingSupernova31]

I have set "brackets-eslint.useLocalESLint" to true, and I'm still getting errors.

[Dahuuudge]

Is there a fix for this issue? I've tried brackets-eslint.useLocalESLint to true and installing the brackets-eslint extension to no effect.

If I can't find a solution I'm going to have to regretfully look for another editor

[mikebruzenak]

Yes. another editor seems like a good idea.

[Igggr]

"brackets-eslint.useLocalESLint": true doesn't help. It steel treat "class" as unknown word.

[NorthLake]

Add these lines to the top the JavaScript file:

/*eslint-env es6*/ // Enables es6 error checking for that file
/*eslint-env jquery*/ // Enables error checking for jquery functions
/*eslint-env browser*/ // Lets you use document and other standard browser functions
/*eslint no-console: 0*/ // Lets you use console (for example to log something)

Note that to enable console you also have to enable the browser environment.

[sarracht]

I'm on OS X with Brackets 1.13.0-17696 and I'm still having trouble with this.

I've gotten ESLint to play nice by adding an .eslintrc file with:

{
    "parserOptions": { "ecmaVersion": 2017 },
    "env": { "es6": true }
}

I've added

"jslint.options": { "es6": true },

to my brackets.json file, but JSLint still won't accept const foo = 5;

When editing brackets.json it even offers code completion and hints for jslint.options and the es6 option, but it just doesn't seem to have any effect.

[compelling]

Found this old thread. Tried all suggestions above, but still get errors on const, let etc so it seems brackets 1.14 still cannot handle ES6. Anyone solved this problems using extra plugins, brackets.json configuration etc?

[NorthLake]

Found this old thread. Tried all suggestions above, but still get errors on const, let etc so it seems brackets 1.14 still cannot handle ES6. Anyone solved this problems using extra plugins, brackets.json configuration etc?

So, I got it working, but I don't know exactly what did it. This is what I've done:
I have the plugins Epic Linter and JSHint installed with the following lines added in brackets.json:

{
    "brackets-eslint.gutterMarks": true,
    "brackets-eslint.useLocalESLint": true,
    "brackets-eslint.es6": true,
    "brackets-eslint.jquery": true,
    "brackets-eslint.browser": true,
    "brackets-eslint.no-console": false,
    "linting.collapsed": true,
    "linting.ESLint.collapsed": true,
    "extensions.default.disabled": [
        "C:/Program Files (x86)/Brackets/www/extensions/default/JSLint"
    ],
    "interactive-linter.javascript": [
        "eslint"
    ],
    "linting.JSLint.collapsed": true,
    "linting.JSHint.collapsed": true,
}

[compelling]

Right, got it working! Thanks:) For others, here are some extra info: I disabled the built-in JSLint in the extension manager (which injects the extensions.default.disabled for me on MacOS, above is Windows). I also added config file for JSHint .jshintrc so it knows I am using ES6 { "esversion": 6 }

[compelling]

But it seems both plugins are not able to handle ES 2018 extension such as spread operator https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax. I get piles of errors for this. Seems command line JSHint supports this https://github.com/jshint/jshint/issues/2991 - but as the JSHint brackets plugin has not been updated for a while, I guess this will be hard to get working. ESLint also complains about using spread operator... Hmm, anyone using ES2018 with Brackets?

[NorthLake]

Sorry, I forgot to add this.
At the top of every ES6 document I work on I have the following lines:

/*jshint globalstrict: true*/
/*jshint esversion: 6 */
/*eslint-env es6*/
/*jshint globalstrict: true*/
/*jshint esversion: 6 */
/*jshint jquery: true*/
/*jshint node: true*/
/*jshint browser: true*/
/*jshint devel: true*/
/*eslint-env es6*/
/*eslint-env jquery*/
/*eslint-env browser*/
/*eslint no-console: 0*/

You might not need all of them, if you're not using it for in a browser environment, but I just insert it all so I don't need to pay attention to it.
You can delete the lines when you're done working on the document.

[compelling]

Hi, seems not to help so much on warnings due to the use of spread operator (ES2018) I am getting, so I am just living with the ES2018 warnings at the moment. But thanks anyway :)

[thatcomputerguy0101]

For anyone who hasn't already figured this out, if you have brackets-eslint.useLocalESLint: true in your preferences file or the eslint module installed locally, you can add the following to an external eslint configuration file, such as .eslintrc.json or an eslintConfig field in package.json.

{
    "env": {
        "es6": true,
/* insert browser, node, jquery, etc. here, in the format "name": true */
    },
    "parserOptions": {
        "ecmaVersion": 2018 // or later, just choose your year
    }
}

Just make sure to remove the comments, because JSON doesn't support them. For more information, you can also visit the Eslint configuration documentation.

[bennypr0fane]

So is there an ETA for Brackets just getting this right out of the box?

[dyssos29]

I have solved the problem by changing the "eslint-recomended.js" file in the directory "\node_modules\eslint\conf".
Everything was working after adding these:
"parserOptions": {
"ecmaVersion": 9,
"sourceType": "module"
},
"env": {
"es6": true,
"browser": true
}

I tested the "const" and "let" types and they work. Now the only error that I have is the "spread" operator, eslint does not recognize it. If anyone knows how to solve this, please help.