如何使用 eslint 设置内联样式规则？答案

【问题标题】：How to set inline style rule with eslint?如何使用 eslint 设置内联样式规则？
【发布时间】：2020-07-22 19:38:01
【问题描述】：

我创建了一个 React Native 项目，版本是0.62.2

我把eslintrc.js改成如下

module.exports = {
  parser:'babel-eslint',
  env: {
    browser: true,
    es6: true,
  },
  extends: '@react-native-community',
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
  },
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2018,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    ... my other rules
    "react-native/no-inline-styles": 1,
    "prettier/prettier": ["error", {
      "no-inline-styles": false
    }],
  },
};

我希望我的样式代码像这样{{ flex: 1, marginTop: 5 }} 而不是{{flex:1,marginTop:5}}

但我的警告显示信息：

(property) FlexStyle.marginTop?: React.ReactText
Inline style: { flex: 1, marginTop: 5 }eslint(react-native/no-inline-styles)
Replace `·flex:1,·marginTop:5·` with `flex:·1,·marginTop:·5`eslintprettier/prettier

我不知道如何设置内联样式空间以及如何解决更漂亮的问题。

【问题讨论】：

标签： react-native eslint eslintrc

【解决方案1】：

您可以通过 ESLint 使用禁用规则功能

// eslint-disable-line react-native/no-inline-styles

欲了解更多信息，请访问https://eslint.org/docs/user-guide/configuring.html#configuring-rules

【讨论】：

感谢您的回复，但我需要使用 no-inline-styles。
有没有办法在项目中全局定义它而不是放在每个文件的顶部？

【解决方案2】：

该值应为 0，将其设置为 false。所以你的规则数组应该是这样的：

rules: {
    ... my other rules
    "react-native/no-inline-styles": 0,
    "prettier/prettier": ["error", {
      "no-inline-styles": false
    }],  
}

【讨论】：

【解决方案3】：

您的配置似乎在插件数组中缺少更漂亮的配置。通过阅读prettier's documentation确保正确使用eslint运行更漂亮。

Prettier 有一个名为 bracket spacing 的对象文字间距规则，但请注意，它默认设置为 true。

【讨论】：

谢谢 Sal，我使用 Visual Studio Code，我禁用了我的 preiiter，我用我的 settings.json 设置了"prettier.bracketSpacing": true, }，它仍然显示错误:(
谢谢，我发现我有一个.prettierrc.js 文件阻止了我的设置。立即修复问题。谢谢。