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

Question

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

\n\n

我改变eslintrc.js如下

\n\n

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

\n\n

我希望我的风格代码是这样的{{ flex: 1, marginTop: 5 }}不是这样的{{flex:1,marginTop:5}}

\n\n

但我的警告显示信息：

\n\n

(property) FlexStyle.marginTop?: React.ReactText\nInline style: { flex: 1, marginTop: 5 }eslint(react-native/no-inline-styles)\nReplace `\xc2\xb7flex:1,\xc2\xb7marginTop:5\xc2\xb7` with `flex:\xc2\xb71,\xc2\xb7marginTop:\xc2\xb75`eslintprettier/prettier\n

\n\n

\n\n

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

\n

Answer 1

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

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

Answer 2

更改文件：.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',
      },
    },
  ],
};