React native-eslint错误描述尚不清楚

Question

我创建了react-native项目并且正在使用样式指南和插件进行一些实验，我创建了一些错误来检查eslint错误描述是如何工作的。这是我编写的一些代码，并在app.js文件中添加了一个错误（逗号）。

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

以下是错误截图： 正如我们所看到的那样，在eslint的错误描述中，有一些＆＃34; [39m 36m＆＃34;介于两者之间。
这可能是造成这种非结构化错误信息的原因？
请帮助。
这是附加的一些其他文件。

.eslintrc文件

{
  "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"
  }
}

另外，我安装了eslint和Flow-bin，两者都可以识别错误（正如您在问题标签下的屏幕截图中看到的那样），但我们是否需要同时使用两者，如果不是哪一个如果两者有不同的用途，请帮助我理解。

在此先感谢。

Answer 1

您可能需要为--no-color指定eslint选项。这些是ANSI转义序列，它是如何将颜色添加到控制台消息中的。如果在终端中遇到同样的问题，可能还需要配置处理ANSI，或使用CLI选项禁用颜色。

eslint和flowtype有不同的用途。 Flow会发现某些语法错误，但是eslint会选择更多深奥的代码结构，这些结构可能会导致问题（假设已配置为这样做）。

当您尝试使用不兼容的类型时（分配，参数，返回等），Flow将解释您指定的类型和警告/错误。

带颜色：

> 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

没有颜色：

> 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)

Answer 2

我认为这是vscode中ESLINT（dbaeumer.vscode-eslint）插件的问题。