michaelgmcd / vscode-language-babel

VSCode syntax highlighting for today's JavaScript
https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
MIT License
131 stars 17 forks source link

Do expressions support #58

Closed tomatau closed 4 years ago

tomatau commented 4 years ago

Apologies if this is the wrong place.

I'm using a Babel config with the plugin @babel/plugin-proposal-do-expressions. This is now producing an error of "expression expected" when I use any do-expressions in my code. The syntax highlighting looks correct, but VSCode is reporting an error with the syntax.

Looking through issues on VSCode shows this one: https://github.com/Microsoft/vscode/issues/34287 and the only reply states to look in vscode-language-babel extension.

Sample Code to Reproduce

function Foo({ bar }) {
  return (
    <div className='foo'>
      {do {
        if (bar)) {
          <Bar bar={bar} />
        } else {
          <Herp />
        }
      }}
    </div>
  )
}

Screenshot of Current Behavior

Can be seen in the linked issue.

Attempts at resolution

I've tried a jsconfig.json to disable feedback on errors like this, but it didn't help:

{
  "compilerOptions": {
    "target": "esnext",
    "checkJs": false
  }
}

Adding the following line to my settings.json or workspace settings will make the error go away, however this feels like overkill to disable all validation just to avoid one falsely reported error.

{
"javascript.validate.enable": false
}
michaelgmcd commented 4 years ago

Not sure if this is the exact cause, but your sample code has a syntax error:

function Foo({ bar }) {
  return (
    <div className='foo'>
      {do {
        if (bar)) { // You have an extra ")" here
          <Bar bar={bar} />
        } else {
          <Herp />
        }
      }}
    </div>
  )
}

If you fix the syntax, does the issue persist?

tomatau commented 4 years ago

No, that's an artefact from removing the domain-specific language from my example code. My code is working locally, it's only the editor giving an error.

michaelgmcd commented 4 years ago

Anyways, this plugin is entirely syntax highlighting, meaning that if the syntax is not supported, it will only result in the highlighting of the code to be messed up (no editor errors). VSCode will still use its own language service for validating the syntax of the JS code. My recommendation would be to keep the "javascript.validate.enable" setting set to false and use ESLint in your projects that are using stage 0 or 1 features.