fix(eslint-config): Clashes with prettier

[iRoachie]

Summary

Currently, @react-native-community config package extends from prettier/recommended which comes with default settings from prettier. However there are still some eslint rules in the config that either clash or duplicate the settings from prettier.

This results in eslint fixing the formatting and then prettier undoing it. This PR removes the style specific rules from eslint and place them in the prettier section.

Changelog

[General] [Fixed] - Remove style rules from eslint config for prettier options

Test Plan

I created a repo for you to test with https://github.com/iRoachie/eslint-bug-replicate. You can see that running yarn lint --fix will never fix the issue. Eslint will complain about double quotes and subsequently after fixing it will complain about single quotes.

Here's a gif of the behaviour (vscode eslint plugin "eslint.autoFixOnSave": true):

[analysis-bot]

Code analysis results:

• eslint found some issues. Run yarn lint --fix to automatically fix problems.

[vikrantnegi]

@iRoachie You are a lifesaver. I've been struggling with this issue ever since react-native came with the eslint config.

Thanks for the fix.

[cpojer]

👍

[cpojer]

👍

[facebook-github-bot]

@cpojer is landing this pull request. If you are a Facebook employee, you can view this diff on Phabricator.

[react-native-bot]

This pull request was successfully merged by @iRoachie in e4b62bb.

^{When will my fix make it into a release? | Upcoming Releases}

[friederbluemle]

@iRoachie - I wonder how this section is related to the default content of .prettierrc.js:

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

Does it override and/or make it (partially) obsolete?

[iRoachie]

Not sure exactly, what i do know is that the contents of that file doesn’t get passed onto user projects and previously you had to have a .prettierrc of your own

[friederbluemle]

Okay thanks for your reply. If (part of?) that file is obsolete (after updating the @react-native-community/eslint-config dependency), maybe we should update the template file as well?

[satya164]

It's still useful for formatting a file manually, and formatting non-js files such as markdown etc.

[friederbluemle]

@satya164 - Thanks for your comment! Could you give an example (or a link to one)?

[satya164]

Prettier can format a wide-range of files such as markdown files (including code inside markdown files). The ESLint config only applies to TypeScript and JS files. Not sure what kind of example you're expecting?

[friederbluemle]

Okay never mind, I understand the reason. Thanks!

[cpojer]

Actually I have to revert this change because it's causing trouble with our setup at Facebook.

[friederbluemle]

Basically, without the changes in this PR, you're required to have a .prettierrc.js with the following config as well:

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

Otherwise, you'd run into the problem as stated by @iRoachie - Is that assumption correct?

[satya164]

You're not required to have that file. It'd just use prettier's default config.

[iRoachie]

@cpojer Sigh 😔 thanks everyone for your time. Will just use another config

[friederbluemle]

You're not required to have that file. It'd just use prettier's default config.

What I meant was that if you don't have it, you'd run into the problem described by @iRoachie

Let's try to find a solution that works - A couple of weeks ago I also tried to used @react-native-community/eslint-config and had linter conflicts related to the quotes.

@cpojer - Could you elaborate a bit on the trouble it caused?

[satya164]

The issue that @iRoachie described was because of conflicting eslint rules being enabled, not presence of the file.