Javascript es7 decorators ('@') highlighting not supported

[Owlman145]

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?

Description

Es7 decorators cause strange highlighting

Steps to Reproduce

Write a javascript or in my case, ember code. Add a decorator to a function or variable (or ember computed property)

Expected behavior: [What you expected to happen]

Highlight of functions and properties remain normal

Actual behavior: [What actually happened]

Highlighting is messed after the decorator '@' sign. Most text is just white.

Versions

Windows 10 and Ubuntu 16.04 Release 1.10 experimental build 1.10.0-17483

[petetnt]

Hi @Owlman145,

there is this commit in CodeMirror that might somewhat help with this issue https://github.com/codemirror/CodeMirror/commit/fa69bef4544d5aaba7bdd770ab5fc9d0b52dd692 which should have landed in Brackets already too.

Could you check if this still happens on the latest master?

See the article How to hack on Brackets to see how to run Brackets from the master branch.

[Owlman145]

After further testing, this seems to be limited to using decorators on an object definition. Using them within a class or function seems to work fine. e.g.:

import ember form 'ember';
import {readOnly, someDecorator} from 'decoratorLibrary'

export default Ember.Component.extend({
  test1: 3,
  test2: 4,

  // @someDecorator // Uncommenting this line messes render
  func1 (arg1) {
    @readOnly // This one is fine
    let a = 3
    let b = arg1 + a
    console.log("b", b)
  },

  func2 () {
    let test1 = this.get('test1')
    return test1
  },

});

As a temporary fix, is there a way to configure brackets to have code-mirror tosimply ignore line starting with @?