[chore] Added prettier formatting to src and test

[adityavohra7]

This branch attempts to add prettier to this project via eslint. The motivation behind doing this is mostly to have easily configurable and consistent JS formatting across the entire project. I chose the values for the prettier options used (semi and singleQuote) based on what I thought the codebase was leaning towards. All other options assume their default values. Let me know if I should configure anything differently! I also ran yarn lint --fix.

[adityavohra7]

Ah checks failed because I forgot to run yarn examples:lint. I'll update the PR shortly!

[adityavohra7]

Also fixing a failing snapshot test in examples/todos-flow.

[timdorr]

Woah, that's a lot of stuff.

Perhaps we can limit it to just the src and test directory for now? This is going to bust a lot of PRs otherwise.

Also, can we extract the prettier config to a .prettierrc.json file. Editor plugins will be able to pick up on the config that way.

[adityavohra7]

Heh, totally fair, it's a pretty large diff 😅 I'll try to restrict prettier to only run on src/ and test/ for now. What about build/ (eslint currently runs on this)?

And hmm I've usually found that editors that have eslint integrations/plugins installed can pick up prettier if it runs through eslint. But I guess those who have prettier plugins installed would need a prettier config file? I'll add one anyway. What do you think about adding a .prettierrc.js? JS might let us do logic if we ever need it?

[timdorr]

That'll be going away in the next major, so I wouldn't worry about it.

I'd go with the JSON .prettierrc for now. I think that has broader support, so it's more likely for someone to pick up in their editor.

[adityavohra7]

I've updated the PR to run prettier only on src/ and test/. I've also changed how prettier was being run. It's now being running via its own CLI as opposed to via eslint. I did this because I was having some troubles trying to ignore examples/ when running prettier through eslint. Here's what I changed the .eslintrc.js to be:

module.exports = {
  extends: ['react-app', 'prettier'],

  plugins: ['prettier'],

  rules: {
    'prettier/prettier': ['error', require('./.prettierrc.json')]
  },

  overrides: [
    {
      files: 'test/**/*.js',
      env: {
        jest: true,
      },
    },
  ],
}

where .prettierrc.json is:

{
  "semi": false,
  "singleQuote": true
}

and the .prettierignore is:

es
examples
dist
lib

Running prettier directly on examples/ yields nothing (as expected, examples/ is ignored):

➜  redux git:(add_prettier) ✗ ./node_modules/.bin/prettier 'examples/**/*.js'
➜  redux git:(add_prettier) ✗

But running it through eslint results in errors (examples/ dir is not ignored):

➜  redux git:(add_prettier) ✗ yarn examples:lint
yarn run v1.1.0
$ eslint examples

/Users/adityavohra7/Documents/Github/redux/examples/async/src/components/Picker.js
   7:53  error  Delete `⏎···········`                                                             prettier/prettier
   9:29  error  Insert `·(`                                                                       prettier/prettier
  12:18  error  Delete `)`                                                                        prettier/prettier
  13:7   error  Insert `))`                                                                       prettier/prettier
  19:30  error  Replace `⏎····PropTypes.string.isRequired⏎··` with `PropTypes.string.isRequired`  prettier/prettier

/Users/adityavohra7/Documents/Github/redux/examples/async/src/components/Posts.js
  4:17  error  Replace `posts` with `·posts·`                                                                                                                       prettier/prettier
  5:7   error  Replace `⏎····{posts.map((post,·i)·=>⏎······<li·key={i}>{post.title}</li>⏎····)}⏎··` with `{posts.map((post,·i)·=>·<li·key={i}>{post.title}</li>)}`  prettier/prettier

/Users/adityavohra7/Documents/Github/redux/examples/async/src/containers/App.js
  46:16  error  Insert `⏎·········`                                                                                                                                                                     prettier/prettier
  47:1   error  Delete `······`                                                                                                                                                                         
...
...

I think this might be due to how prettier's API is called in eslint-plugin-prettier? Because examples/ isn't ignored by eslint, it passes down the files in there to prettier too?

Do we have any preferences on how we want to run prettier? Is running it directly through the CLI okay? Or would we want to run it through eslint?

[timdorr]

I might extract this to a separate script. The act of cleaning up code and linting it for errors is really two separate things. In fact, it probably should be in reverse order so that the linting is on the transformed code. I'd extract it out and add it to the prepare script before the lint command.

[eps1lon]

This doesn't error out if there were changes though. Isn't it better to use --list-different which errors out? The prettier documentation specifically mentions this flag for CI purposes.

[adityavohra7]

What if we used both --write and --list-different? As you said, --list-different will exit non-zero when prettier finds that the formatting of at least one file was different than what it should be. And --write will actually fix that formatting so users don't have to run it themselves (one less iteration for a redux dev). All this while still exiting non-zero so CI will fail if there were any formatting changes.

[eps1lon]

Wouldn't this be confusing if you run the format command and get errors thrown when you actually expect them to be fixed in place?

In the spirit of redux I'd prefer the approach of @timdorr to create an extra command (or rather two). One for formatting in place for development and one side-effect free that just checks for errors for CI. This would also make more sense since we don't run eslint with the --fix flag

[adityavohra7]

@eps1lon, it doesn't actually throw errors per se, it just exits non-zero printing what files were different/changed:

➜  redux git:(add_prettier) ./node_modules/.bin/prettier --write --list-different '{src,test}/**/*.js'
src/applyMiddleware.js
➜  redux git:(add_prettier) echo $?
1

@eps1lon, so you're suggesting a side-effect free addition to the lint command (something like prettier --list-different '{src,test}/**/*.js'), and a format helper utility run script (something like prettier --write '{src,test}/**/*.js'), that devs can run during dev time?

@timdorr, you're suggesting no addition to the lint script, but creating the same format script and having it run before lint in the prepare script?

Those seem a little contradictory, but I'm probably misunderstanding something 😅

[eps1lon]

One format script entry with --write for devs and one format:check with --list-different. And
add format:check to the CI scripts.

[adityavohra7]

@timdorr, @eps1lon, updated! Added the format and format:check run scripts, and added the format:check script to prepare before lint.

[adityavohra7]

Friendly bump! Let me know if there's anything I should change!

[timdorr]

Just a question: Do you know if prettier --list-differences will return a non-zero exit code (e.g., indicate a failure)? If so, we're all good here. Otherwise, style violating code can still make its way through.

[adityavohra7]

Yup! Looks like it does. With this diff:

diff --git a/src/bindActionCreators.js b/src/bindActionCreators.js
index b44d6ff..6b02dfd 100644
--- a/src/bindActionCreators.js
+++ b/src/bindActionCreators.js
@@ -27,7 +27,7 @@ function bindActionCreator(actionCreator, dispatch) {
  */
 export default function bindActionCreators(actionCreators, dispatch) {
   if (typeof actionCreators === 'function') {
-    return bindActionCreator(actionCreators, dispatch)
+    return bindActionCreator(actionCreators, dispatch);
   }

   if (typeof actionCreators !== 'object' || actionCreators === null) {

Running the prepare script yields:

➜  redux git:(add_prettier) ✗ yarn prepare
yarn run v1.1.0
$ npm run clean && npm run format:check && npm run lint && npm test && npm run build

> [email protected] clean /Users/adityavohra7/Documents/Github/redux
> rimraf lib dist es coverage

> [email protected] format:check /Users/adityavohra7/Documents/Github/redux
> prettier --list-different '{src,test}/**/*.js'

src/bindActionCreators.js
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] format:check: `prettier --list-different '{src,test}/**/*.js'`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] format:check script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/adityavohra7/.npm/_logs/2017-11-01T16_49_11_973Z-debug.log
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Just running prettier --list-different '{src,test}/**/*.js' shows that it returns 1:

➜  redux git:(add_prettier) ✗ ./node_modules/.bin/prettier --list-different '{src,test}/**/*.js'
src/bindActionCreators.js
➜  redux git:(add_prettier) ✗ echo $?
1

[timdorr]

OK, I think this is good to go.

I do want to wait until we get next merged into master. Maintaining each branch where there are so many changes will be difficult and will break the open set of PRs. Let me work on getting them merged in and next merged as well, and then we can merge in this one without a ton of hassle.

Thanks for the hard work so far!

[adityavohra7]

@timdorr sounds good! Thanks for the feedback throughout the review! 😊

[timdorr]

next has been merged into master. Want to update this and get it merged in?

[adityavohra7]

Sure! I'll try to update this soon! 😄

[adityavohra7]

Updated! Let me know if you have any questions!

[adityavohra7]

Bump! Let me know if there's anything I should change!

[timdorr]

I'm good with this. @markerikson did you want to provide any input, or should we ship it?

[markerikson]

I haven't looked at this in detail, but I have no particular complaints about running everything through Prettier.

[timdorr]

Than ship it we shall. Thanks, @adityavohra7!

[adityavohra7]

@timdorr, thanks for merging this PR! Would you be open to a PR running prettier on examples/? I only see that conflicting with this PR.

[timdorr]

Those are pretty volatile, so that would probably be more trouble than it's worth. I'd also like to keep them simple to use, so additional tooling would go against that goal.

[adityavohra7]

@timdorr, makes sense! Thanks once again for helping throughout this PR 😊

[okwolf]

Is there a specific reason for not wanting npm run format at the top level folder to also format the code in examples/? There's a lot of inconsistent formatting there that makes me reluctant to work on improving them 🤔

I've also been using prettier long enough now that it would feel weird working on code without having a way to autoformat it 😂

[timdorr]

Same reason we don't lint them. They're (almost) all built with Create React App and have that tooling built-in. I'd rather use the tooling from CRA than have to maintain that ourselves.