React native-eslint error description is unclear

Question

I created the react-native project and was doing some experiments with style guides and plugin, I created some mistakes to check how eslint error description work. Here is some code which I wrote and put an error(a comma) in app.js file.

app.js

import React, { Component } from 'react'
import { Text, View } from 'react-native'

const App = () => (, <---------------------- this is the error(a comma)
  <View style={{ flex: 1 }}>
    <Text>hi</Text>
  </View>
)

export default App

Following is the error screenshot: As we can see that in the error description of the eslint, there are some "[39m 36m" embedded in between.
What could be the reason for this unstructured error message?
please help.
Here is some other files attached.

.eslintrc file

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "flowtype", "jsx-a11y", "import"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "react/prefer-stateless-function": [1, { "ignorePureComponents": true }],
    "react/forbid-prop-types": [0, { "forbid": [] }],
    "import/extensions": [1, "never", { "svg": "always" }],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "devDependencies": true,
        "optionalDependencies": false,
        "peerDependencies": false
      }
    ],
    "semi": ["error", "never"]
  },
  "env": {
    "jest": true
  }
}

package.json

{
  "name": "auth1",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest",
    "lint": "eslint src",
    "pretty":
      "prettier --semi false --print-width 100 --single-quote --trailing-comma all --write \"src/**/*.js\"",
    "precommit": "lint-staged && yarn test",
    "flow": "flow",
    "flow stop": "flow stop",
    "flow status": "flow status",
    "flow coverage": "flow coverage"
  },
  "lint-staged": {
    "*.js": ["yarn pretty", "git add"]
  },
  "dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.0"
  },
  "devDependencies": {
    "babel-eslint": "^8.2.2",
    "babel-jest": "22.4.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.18.2",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-flowtype": "^2.46.1",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.7.0",
    "flow-bin": "0.65.0",
    "husky": "^0.14.3",
    "jest": "22.4.2",
    "lint-staged": "^7.0.0",
    "prettier": "^1.11.1",
    "react-test-renderer": "16.3.0-alpha.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

Also, I installed eslint and Flow-bin, both can identifies the error(as you can see in screenshot above under problems tab), but do we need to use both and if not which one to prefer or if both have different purpose please help me understand.

Thanks in Advance.

My first guess would say this is an issue with an editor plugin consuming CLI output instead of the API. What happens if you run eslint via the terminal? — btmills, Mar 07 '18 at 23:02
@btmills thanks for replying, even if I run the eslint from terminal, i get same issue with eslint error description message. — Raj, Mar 08 '18 at 06:53

Dave Meehan · Answer 1 · 2018-03-08T10:53:55.910

You probably need to specify the --no-color option to eslint. Those are ANSI escape sequences, which is how color is added to the console messages. If you get the same problem in your terminal, that might also need configuring to handle ANSI, or use the CLI option to disable color.

eslint and flowtype serve different purposes. Flow will pick up certain syntax errors, but eslint will pick up more esoteric code constructs that can cause problems (assuming configured to do so).

Flow will interpret the types you specify and warn/error when you are trying to use incompatible types (in assignment, parameters, returns etc).

With color:

> eslint . "--color"


[4m/Users/xxxx/yyyy.js[24m
  [2m7:13[22m  [31merror[39m  Parsing error: Unexpected token

[0m [90m  5 | [39m}[0m
[0m [90m  6 | [39m[0m
[0m[31m[1m>[22m[39m[90m  7 | [39m[36mfunction[39m f({[33m,[39m[0m
[0m [90m    | [39m            [31m[1m^[22m[39m[0m
[0m [90m  8 | [39m  [90m// $FlowFixMe[39m[0m
[0m [90m  9 | [39m  a [33m=[39m [35m1[39m[33m,[39m[0m
[0m [90m 10 | [39m}[33m:[39m [33mParams[39m) {[0m

[31m[1m✖ 1 problem (1 error, 0 warnings)[22m[39m
[31m[1m[22m[39m

Without color:

> eslint . "--no-color"


/Users/xxxx/yyyy.js
  7:13  error  Parsing error: Unexpected token

   5 | }
   6 | 
>  7 | function f({,
     |             ^
   8 |   // $FlowFixMe
   9 |   a = 1,
  10 | }: Params) {

✖ 1 problem (1 error, 0 warnings)

thanks for solution, tried CLI option, `eslint --no-color App.js [App.js] [./src]`, still same issue. — Raj, Mar 08 '18 at 10:28
I updated my comment with results from my system (mac). You've tagged this with visual studio, so maybe eslint isn't getting passed the --no-color option somehow. Check your version, but `no-color` was added back in 2014. — Dave Meehan, Mar 08 '18 at 10:57
I did try this, but this solution is for the eslinting through terminal. I had this issue with vs code, but thanks a lot, now I know more about eslinting through CLI. I think it is the issue with ESLINT plugin in vscode. — Raj, Mar 08 '18 at 15:07

score 1 · Accepted Answer · answered Mar 08 '18 at 15:09

1

I think it is the issue with ESLINT(dbaeumer.vscode-eslint) plugin in vscode.

answered Mar 08 '18 at 15:09

Raj

1,099
2
13
30

React native-eslint error description is unclear

2 Answers2