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

Question

我创建了一个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

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

Answer 1

您可以使用 ESLint 的禁用规则功能

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

有关详细信息，请访问 https://eslint.org/docs/user-guide/configuring.html#configuring-rules

Answer 2

您的配置似乎在插件数组中缺少 prettier。通过阅读 prettier's documentation.

确保正确使用 eslint 运行更漂亮

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

Answer 3

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

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

Answer 4

更改文件：.eslintrc.js

module.exports = {
  root: true,
  extends: '@react-native-community',
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  rules: {
    'react-native/no-inline-styles': 0,
    'prettier/prettier': 0,
  },
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      rules: {
        '@typescript-eslint/no-shadow': ['error'],
        'no-shadow': 'off',
        'no-undef': 'off',
      },
    },
  ],
};

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

How to set inline style rule with eslint?

react-native

eslint

eslintrc