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.

Answer 1

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

Answer 2

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)