Separate ESLint and Prettier

[gaearon]

Our current setup is running Prettier as a part of ESLint run because of facebook/react-native#43756. This wasn't super intentional and is just a consequence of us using the default configs which have this arcane setting turned on.

The recommended modern approach is to treat Prettier and ESLint as separate unrelated tools.
This has a few benefits:

• Editors that support Prettier will no longer run Prettier twice on every save (currently they do because we lint in addition to formatting, but linting also includes formatting).
• Formatting nits will no longer show up in IDEs as errors or warnings (currently they do because, well, for the same reason).
• This may also prevent some cases where lint has to run more than once (due to cycles).

See Prettier's Integrating with Linters and Josh Goldberg's blog post for more background.

Okay, so what are we doing?

• First, I get rid of eslint-plugin-prettier by explicitly disabling the prettier/prettier rule. We'll be able to remove this special case when Replace outdated Prettier settings with recommended ones facebook/react-native#43756 ships.
• Next, I add explicit yarn prettier --check . to CI.
• I tweak the .eslintignore to select the stuff we want (code in src) and exclude the rest. Previously it was kind of selectively ignoring a bunch of stuff but it was also being called outside just for src so there was no source of truth.
• I extend the lint staged commands to run Prettier after ESLint. Note I removed the yarn indirection there to cut down time on node init. Otherwise we have a chain of Node processes which is slower than we want.
• Finally, added --cache to both commands as suggested by Christoph Nakazawa, it seems to be working decent in my testing.

If I didn't mess it up, this should give us roughly same behavior as before but faster and less annoying.

[github-actions]

The Pull Request introduced fingerprint changes against the base commit: 0ff7e71

Fingerprint diff

[
  {
    "type": "file",
    "filePath": ".gitignore",
    "reasons": [
      "bareGitIgnore"
    ],
    "hash": "9a4ece6359c958ac13d9d9d770a2fc4fb00c99a0"
  },
  {
    "type": "file",
    "filePath": "package.json",
    "reasons": [
      "expoConfigPlugins"
    ],
    "hash": "7128c1cabb8455b0deca33e941f2efae77cc1185"
  },
  {
    "type": "contents",
    "id": "packageJson:scripts",
    "contents": "{\"prepare\":\"is-ci || husky install\",\"postinstall\":\"patch-package && yarn intl:compile\",\"prebuild\":\"expo prebuild --clean\",\"android\":\"expo run:android\",\"ios\":\"expo run:ios\",\"web\":\"expo start --web\",\"use-build-number\":\"./scripts/useBuildNumberEnv.sh\",\"build-web\":\"expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/\",\"build-all\":\"yarn intl:build && yarn use-build-number eas build --platform all\",\"build-ios\":\"yarn use-build-number eas build -p ios\",\"build-android\":\"yarn use-build-number eas build -p android\",\"build\":\"yarn use-build-number eas build\",\"start\":\"expo start --dev-client\",\"start:prod\":\"expo start --dev-client --no-dev --minify\",\"clean-cache\":\"rm -rf node_modules/.cache/babel-loader/*\",\"test\":\"NODE_ENV=test jest --forceExit --testTimeout=20000 --bail\",\"test-watch\":\"NODE_ENV=test jest --watchAll\",\"test-ci\":\"NODE_ENV=test jest --ci --forceExit --reporters=default --reporters=jest-junit\",\"test-coverage\":\"NODE_ENV=test jest --coverage\",\"lint\":\"yarn eslint --cache --ext .js,.jsx,.ts,.tsx src\",\"typecheck\":\"tsc --project ./tsconfig.check.json\",\"e2e:mock-server\":\"./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts\",\"e2e:metro\":\"NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios\",\"e2e:build\":\"NODE_ENV=test detox build -c ios.sim.debug\",\"e2e:run\":\"NODE_ENV=test detox test --configuration ios.sim.debug --take-screenshots all\",\"perf:test\":\"NODE_ENV=test maestro test\",\"perf:test:run\":\"NODE_ENV=test maestro test __e2e__/maestro/scroll.yaml\",\"perf:test:measure\":\"NODE_ENV=test flashlight test --bundleId xyz.blueskyweb.app --testCommand 'yarn perf:test' --duration 150000 --resultsFilePath .perf/results.json\",\"perf:test:results\":\"NODE_ENV=test flashlight report .perf/results.json\",\"perf:measure\":\"NODE_ENV=test flashlight measure\",\"intl:build\":\"yarn intl:extract && yarn intl:compile\",\"intl:check\":\"yarn intl:extract && git diff-index -G'(^[^\\\\*# /])|(^#\\\\w)|(^\\\\s+[^\\\\*#/])' HEAD || (echo '\\n⚠️ i18n detected un-extracted translations\\n' && exit 1)\",\"intl:extract\":\"lingui extract\",\"intl:compile\":\"lingui compile\",\"nuke\":\"rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android\",\"update-extensions\":\"bash scripts/updateExtensions.sh\",\"export\":\"npx expo export\",\"make-deploy-bundle\":\"bash scripts/bundleUpdate.sh\"}",
    "reasons": [
      "packageJson:scripts"
    ],
    "hash": "c18ddef91d77aa574fc23064280b0ec5106e2e02"
  }
]

---

Generated by PR labeler 🤖

[haileyok]

Amazing! Pulled this down and I'm getting the expected behavior in Webstorm now. Prettier only runs on save if I explicitly tell Webstorm to do so, rather than it running all the time w/ eslint. Seriously appreciate you looking into this, it was killing performance for me!

Will be curious to see over time if the --cache flag improves performance as well. Never knew about this one. Code in ./modules/*/src is also linted correctly so .eslintignore looks solid.

[gaearon]

OK let's give this a go.

[gaearon]

#codingonaplane

[estrattonbailey]

Nice one!