如何禁用 eslint 上的错误（prettier/prettier）？

Question

在编码时，我没有使用 eslint。现在我安装了它，它让我的编辑器充满了更漂亮/更漂亮的错误，这些错误似乎并没有让我的代码更漂亮。我正在寻找解决这个问题的方法。

prettierrc.js：

module.exports = {
  bracketSpacing: true,
  jsxBracketSameLine: false,
  singleQuote: true,
  trailingComma: 'all',
};

eslintrc.js：

module.exports = {
  root: true,
  extends: '@react-native-community',
};

最后，一些示例代码：

import React, {Component} from 'react';
import {View, Text, Picker} from 'react-native';
import {connect} from 'react-redux';
import {employeeUpdate} from '../actions';
import {CardSection,  Input} from './common';

class EmployeeForm extends Component {
  render(){
    return (
      <View>
      <CardSection>
        <Input
          label="Name"
          placeholder="Marco"
          value={this.props.name}
          onChangeText={value => this.props.employeeUpdate({prop: 'name', value})}
        />
      </CardSection>

      <CardSection>
        <Input
          label="Phone"
          placeholder="555-5555"
          value={this.props.phone}
          onChangeText={value => this.props.employeeUpdate({prop: 'phone', value })}
        />
      </CardSection>

      <CardSection style={{ flexDirection: 'row'}}>
        <Text style={styles.pickerTextStyle}>Shift</Text>
        <Picker
        style={{flex: 1}}
        selectedValue={this.props.shift}
        onValueChange={value => this.props.employeeUpdate({prop: 'shift', value})}
        >
          <Picker.Item label="Monday" value="Monday" />
          <Picker.Item label="Tuesday" value="Tuesday"/>
          <Picker.Item label="Wednesday" value="Wednesday"/>
          <Picker.Item label="Thursday" value="Thursday"/>
          <Picker.Item label="Friday" value="Friday"/>
          <Picker.Item label="Saturday" value="Saturday"/>
          <Picker.Item label="Sunday" value="Sunday"/>
        </Picker>
      </CardSection>
      </View>
    );
  }
}

我只是想消除错误，因为有数千个红点试图让我的代码“更漂亮”，这很烦人，但这是没有实现的。

Answer 1

您可以在 eslintrc.js 配置文件中禁用 prettier，而不是禁用文件的 linting :

module.exports = {
  root: true,
  extends: '@react-native-community',
  rules: {
    'prettier/prettier': 0,
  },
};

Answer 2

为了在同时使用 Prettier 和 eslint 时消除冲突规则，有一个

eslint-config-prettier

包。

运行

npm install --save-dev eslint-config-prettier

进行安装，然后在

eslintrc.js

（或定义了 eslint 规则的任何地方）添加：

{
  "extends": [
    ...,
    "@react-native-community",
    "prettier"
  ]
}

现在 eslint 应该尊重更漂亮的规则。 这是 GH 存储库的链接。

Answer 3

所以我的 package.json 上有

eslint-plugin-prettier

和

eslint-config-prettier

作为开发依赖项。我删除了 eslint-config-prettier，它似乎对我有用。

//.eslintrc.js

module.exports = {
  root: true,
  extends: ['@react-native', 'prettier'],
  rules: {
    'react/react-in-jsx-scope': 'off',
    'react-native/no-inline-styles': 'off',
  },
};