Question

我正在使用React和ESlint配置一个新应用程序。在我的 .eslintrc.js文件中，我正在扩展airbnb并覆盖此类规则。

.eslintrc.js

module.exports = {
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "cmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "plugins": [
    "react",
    "jest",
    "styled-components-config"
  ],
  "extends": "airbnb",
  "rules": {
    "arrow-body-style": "off",
    "arrow-parens": "off",
    "comma-dangle": "off",
    "consistent-return": "off",
    "eol-last": "error",
    "jsx-one-expression-per-line": "off",
  }
}

启动Webpack开发服务器时，在终端中没有出现任何错误，但是在我的IDE（VSCode）中，它仍然向我抛出错误。

ConversationsCard.js

import React from 'react';

export const ConversationsCard = (props) => {
  const { number } = props;
  return (
    <li>Conversation {number}</li> // error here `Conversation ` must be placed on a new lineeslint(react/jsx-one-expression-per-line
  );
};

我尚未在全球范围内安装ESlint，因此应该查看我的.eslintrc.js。我似乎无法找出问题所在。我尝试将"off"更改为0并进行其他操作。任何见识将不胜感激。

Answer 1

所以问题是我没有为规则使用正确的名称。 ESLint抛出

错误

jsx-one-expression-per-line

但是当您在.eslintrc.js中声明规则时，应该这样声明

"react/jsx-one-expression-per-line": "off",

VScode未选择eslint.rc，但终端为

1 个答案: