我该如何在 ESLint 中禁用 prettier/prettier 错误提示？

Question

在编码过程中，我没有使用eslint。现在我安装了它，但它使我的编辑器充斥着prettier/prettier错误，这些错误似乎并不能让我的代码更漂亮。我正在寻找解决方法。

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>
    );
  }
}

我只是想要消除这个错误，因为有成千上万的红点让我的代码看起来更"漂亮"，但实际上并没有达到这个目的。

我只是试图消除这个错误，因为有成千上万的红色标记让我的代码看起来更“好看”，但实际上并没有达到这个目的。

- Arat2003

---

https://prettier.io/docs/en/integrating-with-linters.html#turn-off-eslint-s-formatting-rules - Dzenis H.

Answer 1

不要禁用该文件的代码检查，而是可以在 eslintrc.js 配置文件 中禁用 prettier:

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

- DBrown

---

谢谢你！你帮我省了数小时的搜索和配置。因为这个原因，IntelliJ IDEA无法解决ESLint错误。 - Rafael Fontoura

有没有一种方法可以在编译时停止错误？ - Mohammad

对于我的React Native项目，这确实禁用了Prettier，但不会禁用ESLint的黄色警告。 - Bryan

这刚刚为我节省了数小时的抓狂时间。我发誓，过度的代码检查有一天会让我秃头。 - enchance

赞同！已经花了几个小时抓狂，这条评论终于救了我！@DBrown - TrollBearPig

Answer 2

为了解决同时使用prettier和eslint时的冲突问题，可以使用eslint-config-prettier包。

运行npm install --save-dev eslint-config-prettier进行安装，然后在eslintrc.js（或者您定义eslint规则的任何地方）中添加以下内容：

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

现在eslint应该遵守prettier的规则。这里是GH仓库的链接。

- wozniaklukasz

---

我已经安装了这两个软件包，但是Prettier一直在我的VSCode界面上突出显示错误 - 我不需要它，因为我已经设置了保存时自动修复，可以在我甚至不知道有多余的制表符的情况下解决所有问题。这只是让人感到非常烦恼，到处都是错误提示。 - godblessstrawberry