How can I disable the error (prettier/prettier) on eslint?

Question

While coding, I was not using eslint. Now I installed it and it has flooded my editor with prettier/prettier errors, which by no way seem like they make my code prettier. I am looking to find a way to solve this.

prettierrc.js:

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

eslintrc.js:

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

And finally, some example code:

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

I am simply trying to remove the error since it is annoying to have thousands of red dots looking to make my code "prettier", which is not achieving.

https://prettier.io/docs/en/integrating-with-linters.html#turn-off-eslint-s-formatting-rules — Dženis H., Oct 17 '19 at 05:01

score 195 · Answer 1 · answered Jan 22 '20 at 23:35

195

Instead of disabling linting for the file, you can instead disable prettier within the eslintrc.js config file:

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

answered Jan 22 '20 at 23:35

DBrown

5,111
2
23
24

10

You saved me hours of searching/config. IntelliJ IDEA wasn't fixing ESLint errors due to this. Thanks! – Rafael Fontoura Jul 07 '20 at 00:43
2

is there a way to just stop errors in compile time? – Mohammad Apr 12 '21 at 09:51
1

For my react-native project, this disables prettier indeed but not eslint yellow warnings – Bryan Oct 12 '21 at 23:15
I can confirm this still works correctly with RN 0.66, so you may be seeing a different warning, or one come from another module. What rule is eslint returning warnings for? – DBrown Oct 13 '21 at 15:35
2

This just saved me hours of hair pulling. I swear, excessive linting is going to turn me bald someday. – enchance Mar 25 '22 at 06:01
Glad to help! I really don't understand why they felt the need to make this default in the community package, when so many prefer not to use it. – DBrown Mar 26 '22 at 18:12
2

Thirded! Already spent hours pulling hair and this comment finally saved the day! @DBrown – TrollBearPig Aug 26 '22 at 23:40
@Bryan did you get the solution? I don't like to add *Semi-colons* at the end of each line, but VS Code keeps highlighting these lines with yellow warnings. – Muhammad Tahir Ali Dec 12 '22 at 07:50
1

@MuhammadTahirAli In VSCode's Problem area it should tell you which eslint rule is causing the warning, and more than likely it's coming from the default semicolon rule. Just set "semicolon": [0, "never"] in your eslintrc rules. – DBrown Dec 12 '22 at 20:02
Is there a way to set this property globally? It seems that I would have to do it for each project. – Eric Mar 22 '23 at 10:18
@Eric yes, you could use a global eslint config for this rule. – DBrown Mar 26 '23 at 04:09
1

can I disable some specific prettier rules as well from .eslintrc.json? Ex I just want to turn off trailing comma prettier rule @DBrown – Akshay May 22 '23 at 07:55
@Akshay I still don't think you can. You can find out more from the post here: https://stackoverflow.com/a/76152109/4488503 – DBrown Jul 28 '23 at 18:51

score 2 · Answer 2 · answered Jul 23 '22 at 16:56

2

To get rid of conflicting rules when using both - prettier and eslint there is a eslint-config-prettier package.

Run npm install --save-dev eslint-config-prettier to install and then in eslintrc.js (or wherever you have the eslint rules defined) add:

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

Now eslint should respect prettier rules. Here is a link to GH repo.

answered Jul 23 '22 at 16:56

wozniaklukasz

161
1
12

1

I already had both packages but prettier was highlighting my vscode interface with errors - I dont need this as I have autofix on save which will fix everything without me even knowing that there were few unnecessary tabs. this was just annoying to see errors everywhere – godblessstrawberry Nov 05 '22 at 13:23

How can I disable the error (prettier/prettier) on eslint?

2 Answers2

Linked