Vscode-eslint: Linting issue

[dbaeumer]

_From @pronebird on February 8, 2017 12:34_

Hi,

I use babel-eslint 7.1.1. and I see syntax issue with the following piece in my JSX:

<button onClick={::this.handleLogin}>Log In</button>

It points at :: and says that "expression expected"

My .eslintrc:

{
  "extends": [
    "eslint:recommended", 
    "plugin:react/recommended"
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },
  "plugins": [ "react" ], 
  "rules": {
    "indent": [ 2, 2 ],
    "quotes": [ 2, "single" ],
    "linebreak-style": [ 2, "unix" ],
    "semi": [ 2, "always" ],
    "no-console": [ 0 ],
    "no-loop-func": [ 0 ],
    "new-cap": [ 0 ],
    "no-trailing-spaces": [ 0 ],
    "no-param-reassign": [ 0 ],
    "func-names": [ 0 ],
    "comma-dangle": [ 0 ],
    "no-unused-expressions" : [ 0 ], // until fixed https://github.com/babel/babel-eslint/issues/158
    "block-scoped-var": [ 0 ], // until fixed https://github.com/eslint/eslint/issues/2253
    "react/prop-types": [ 0 ]
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true,
    "mocha": true
  }
}

ESLint works as expected and does not produce warnings:

eslint --no-ignore scripts app test *.js

_Copied from original issue: Microsoft/vscode#20198_

[pronebird]

Thanks @dbaeumer I wasn't aware of this sub-repository.

[dbaeumer]

@pronebird can you provide a more complete example that demonstrates the issue (e.g. a workspace folder with package.json, ...). I am happy to clone a GitHub repository as well.

This depends on many things mainly on the working directory used when limiting the file.

[pronebird]

@dbaeumer sure.

1. Clone https://github.com/jschr/electron-react-redux-boilerplate
2. Run npm i to install dependencies
3. Open folder in VSCode and navigate to app/components/Login.js to reproduce the described issue.

It could be I miss some configuration for VSCode linter but npm run lint that uses eslint works fine and produces no warnings.

[pronebird]

@dbaeumer any progress on supporting bind operator in ESLint? Not sure maybe related to JSX syntax that confuses ESLint.

[dbaeumer]

@pronebird I am able to reproduce but I have no idea why this is happening. The ESLint extension actually uses the eslint npm module to do the actual validation. I don't know why it behaves different when running outside from the command line version inside VS Code.

[dbaeumer]

Help is appreciated here.

[dmytrokyrychuk]

I just noticed that vscode-eslint extension does not emit the "Expression expected" message!

As a workaround I can suggest to disable JavaScript validation by putting the following into your user or workspace config:

"javascript.validate.enable": true

I think vscode uses TypeScript for JS (because the javascript.validate.enable option is listed under TypeScript section in settings). If this is true, JS validation may be enabled back once Microsoft/TypeScript/issues/3508 is resolved.

[Hirse]

Is this solved by @KyrychukD's discovery?

[dbaeumer]

@KyrychukD you are absolutely correct and when I looked at the issue I totally forgot to look at the source of the errors. They are generated by the TS compiler and don't come from ESLint. This explains why they are not reported when running ESlint in a terminal.

@pronebird if you thinks the errors reported by TS are incorrect please open an issue here: https://github.com/Microsoft/TypeScript