CODEWITHSUNDEEP
javascriptreact-nativeatom-editoreslinteslintrc
Arat2003
Arat2003

Reputation: 991

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

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.

Upvotes: 82

Views: 124390

Answers (4)

Faisal Murad
Faisal Murad

Reputation: 1

There is another easy and effective way to restrict prettier errors, as I was unable to locate my eslint.js or eslint.json file.

Create a file named .prettierignore in the root of the project

Now paste the names of all the folders or files that you don't want the prettier to work. One simple way is to add the name of your root folder for your screens or components.

For my app, all the screens were in the component folder so I added component folder in the file. Below is the content I added in .prettier

node_modules build dist android ios components

Upvotes: -2

Badal Saibo
Badal Saibo

Reputation: 3675

So I had both eslint-plugin-prettier and eslint-config-prettier on my package.json as devdependencies. I removed the eslint-config-prettier and it seemed to work for me.

//.eslintrc.js

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

Upvotes: 0

wozniaklukasz
wozniaklukasz

Reputation: 171

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.

Upvotes: 3

DBrown
DBrown

Reputation: 5529

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

Upvotes: 223

Related Questions