how to do that can babel-eslint support @babel/plugin-proposal-optional-chaining

[钟繇]

    "@babel/plugin-proposal-optional-chaining": "^7.2.0",
    "@vue/cli-plugin-babel": "^3.6.0",
    "@vue/cli-plugin-eslint": "^3.6.0",
    "@vue/cli-service": "^3.6.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "axios": "^0.18.0",
    "babel-eslint": "^10.0.1",
    "babel-plugin-component": "^1.1.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",

error

Parsing error: Invalid left-hand side in assignment expression
  25 |       return false
  26 |     }
> 27 |     config?.headers?.Authorization = [localStorage.getItem('Authorization') || '']
     |     ^
  28 |     return config
  29 |   },
  30 |   function (error) {esl

i use vs code, i want to use babel new feature but eslint always show errors

[Joseph A. Szczesniak]

I'm having issues with optional chaining syntax highlighting myself.

[RickMeijer]

@pandaCure: could you post your eslint & babel config?

hear hear.

.eslintrc.js:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  parserOptions: {
    parser: 'babel-eslint'
  }
}

babel.config.js:

module.exports = {
  presets: ['@vue/app'],
  plugins: ['@babel/plugin-proposal-optional-chaining']
}

[Andrés Encarnación]

Hello, any updates?

[Adam Denny]

Same issue here, any updates?

[Daniil Borynskyi]

any updates?

[Andres Encarnacion Ortiz]

I have fixed by disabling the Typescript checking that VS Code performs. Apparently (for me) this causes the issue.

This is my VS Code configuration in the file .vscode/settings.json

{
     "javascript.validate.enable": false,
     "vetur.validation.script": false
}

Hope it helps!

[José Joaquín Bocanegra]

@andrese03 @1014156094 your settings work, but what do we lose deactivating those options?

[Nick]

I think this error has nothing to do with babel-eslint and everything to do with the fact that VSCode uses typescript to validate JS files by default. Hence the ts next to the error in the screenshot.

@JJBocanegra Perhaps when Typescript officially supports this operator targeted in milestone 3.7.0, the error should definitely go away. Until then, "javascript.validate.enable": false turns off the default Typescript validations for your javascript code.

For my team which is using ESLint already for validation, this hack/fix doesn't cause too much of an issue. If you are relying on that default validation and do not have ESLint or some equivalent setup, then I think it will be a problem.

I guess since we are here on babel-eslint, we can hopefully assume everyone is setup with eslint, and no one will have problems by removing the typescript validation.

[Brant Hardy]

Adding to @nicholascm's (and a few others) answer, this is definitely a VS Code issue and not an eslint issue. I was able to get the linting in our react project to work properly in VS Code by adding the following config to to /.vscode/settings.json

{
  "eslint.alwaysShowStatus": true,
  "eslint.validate":[
    "javascript",
    "javascriptreact"
  ],
  "eslint.autoFixOnSave": true,
  "javascript.validate.enable": false,
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
  },
}

I'm not sure what you lose by disabling javascript.validate.enable but I haven't run into anything yet.

You can remove all of the autoFixOnSave rules if you don't like them. I've found that the eslint.autoFixOnSave and the vscode editor.formatOnSave seem to conflict with each other. I'm also not sure if you need separate rules for javascriptreact but this is my frankenstein config I've put together from various github issues and stack overflow questions and it seems to do the job right now.

Suggestions welcome!

[Vimal Desai]

@bhardy thanks for details solution.

[r8rsfans75]

So this happened: microsoft/TypeScript#33294

When will babel-eslint be updated to support it?

[Nick]

@r8rsfans75 I don’t think there’s anything to do here - The typescript error mentioned in this issue will disappear as soon as the TS version is released with this change and your local VSCode is using it for validations.

[Sunny Mittal]

To my knowledge, optional chaining with assignment is not yet (and may never be) supported: tc39/proposal-optional-chaining#18

[Aleh Skrypko]

This issue has nothing to do with VSCode. I have the same issue in WebStorm and I don't have any settings for VSCode in the project.

[Jeff Gu Kang]

The version of VSCode's typescript can be changed through command + shift + p and Select typescript version.

I am using optional chaining without validation error on VSCode with typescript v3.7.x .

[Felipe Caparelli]

The version of VSCode's typescript can be changed through command + shift + p and Select typescript version.

I am using optional chaining without validation error on VSCode with typescript v3.7.x .

If the Typescript file is open, you can change it by selecting the option on the bottom blue bar (you can find the VS Code version number on the right-side).

[Deleted user]

So, as of today, babel-eslint still yells at you if you use optional chaining?

[Kai Cataldo]

This will be supported in ESLint core soon and we will be working on updating the new @babel/eslint-parser now that we're unblocked. Please follow along at babel/babel#11711.

[Matheus Victor]

While it isn't on ESLint core yet, you should add 'parser': 'babel-eslint' on .eslintrc and the plugin '@babel/plugin-proposal-optional-chaining' on babel.config

https://dev.to/ismail9k/use-javascript-optional-chaining-today-2ech

[Kai Cataldo]

Thank you for the issue. Now that @babel/eslint-parser has been released, we are making this repository read-only. If this is a change you would still like to advocate for, please reopen this in the babel/babel monorepo.