adobe / brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
http://brackets.io
MIT License
33.27k stars 7.63k forks source link

spread operator throws off js syntax recognition #15321

Open Savacken opened 3 years ago

Savacken commented 3 years ago

Prerequisites

Description

Depending on how / where it's used, the spread operator in js files seems to break Brackets' ability to correctly interpret syntax.

Steps to Reproduce

  1. create a new js file
  2. add code similar to;
    let x = { y: 1 };
    let z = {
    ...x,
    };
    console.log(`${y.z}`);
    // comment

    If you paste that in notice the syntax highlighting in the lines after the spread operator. If you type it in, the console.log line indents after the line break as if something above it is malformed.

With some experimenting I found that if the entire z declaration is on a single line, let z = { ...x }; then things seem to be okay. You can also get it to be kind of okay on a multiline declaration if a property follows the spread operator's inclusion; i.e.

let z = {
  ...x,
  a: 'A',
 };

By "kind of" I mean that the highlighting of the console.log line seems okay, but the highlighting of the a property is still a little off.

ESLint isn't having a problem with the code that Brackets doesn't recognize.

Expected behavior: [What you expected to happen] Brackets to correctly highlight / recognize code following valid use of a spread operator.

Actual behavior: [What actually happened] See description above in how to reproduce, but a simple recap, depending on how the spread operator is used Brackets seems to not recognize the syntax.

Versions

Behaves the same in both Brackets 14.1 and 14.2.

MacOS 10.15.7

Savacken commented 3 years ago

A little more experimenting and I found that the trailing comma is key to the problem. However, trailing commas are used elsewhere without issue, so it appears specifically to be the trailing comma paired with the spread operator.