Fix do expression throwing linter error in VS Code

Question

I have been trying for some time now to get Visual Studio Code to stop complaining and slowing down my editor with this linter error about a do expression not having a while or expecting an expression.

Here is what I'm seeing in my editor

I have eslint installed and here are the versions I have

"@babel/core": "7.9.0",
"babel-eslint": "10.1.0",
"@babel/eslint-plugin": "^7.12.1",
"@babel/plugin-proposal-do-expressions": "^7.8.3",
"eslint": "^6.6.0",

Here is a bit of my config

...
"plugins": [
  ...
  "@babel"
],
...
"rules": {
  "no-unused-expressions": 0,
  "@babel/no-unused-expressions": 2,
},
...

I can't figure out why I'm still getting these errors in the editor, I'm not sure if it's related to eslint at this point or if there is something else causing it be cause now when I hover over it I see this, which seems like typescript is maybe linting it now? Even though it's a javascript file?

Here is an example from the babel plugin proposal page https://babeljs.io/docs/en/babel-plugin-proposal-do-expressions

const Component = props =>
  <div className='myComponent'>
    {do {
      if(color === 'blue') { <BlueComponent/>; }
      else if(color === 'red') { <RedComponent/>; }
      else if(color === 'green') { <GreenComponent/>; }
    }}
  </div>
;

score 0 · Answer 1 · answered Jan 06 '21 at 19:21

UPDATE 20/11/2020 NOTE: babel-eslint is now @babel/eslint-parser and has moved into the Babel monorepo.

$ npm install @babel/eslint-parser --save-dev
# or
$ yarn add @babel/eslint-parser -D

Then in your .eslintrc do:

{
  parser: "@babel/eslint-parser",
}

Sources: https://stackoverflow.com/a/61629494/13859552 https://eslint.org/docs/user-guide/configuring

Fix do expression throwing linter error in VS Code

1 Answers1