0

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

应用程序.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 的错误描述中，中间嵌入了一些“[39m 36m”。
此非结构化错误消息的原因可能是什么？
请帮忙。
这是附加的一些其他文件。

.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
  }
}

包.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，两者都可以识别错误（如您在上面的问题选项卡下的屏幕截图中所见），但我们是否需要同时使用两者，如果不是更喜欢哪一个，或者两者有不同的目的，请帮忙我明白。

提前致谢。

4

2 回答 2

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)
于 2018-03-08T10:07:25.317 回答
1

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

于 2018-03-08T15:09:08.123 回答