From 4d46b0bbdfdf0da0f88086656cc7dc893f45f30a Mon Sep 17 00:00:00 2001
From: Maarten Hus <MaartenHus@gmail.com>
Date: Fri, 21 Apr 2017 10:35:52 +0200
Subject: [PATCH 1/7] Added instruction on how to install Prettier

---
 packages/react-scripts/template/README.md | 46 +++++++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 080329cff..6713d1fed 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -17,6 +17,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
 - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor)
 - [Debugging in the Editor](#debugging-in-the-editor)
+- [Formatting Code Automatically](#formatting-code-automatically)
 - [Changing the Page `<title>`](#changing-the-page-title)
 - [Installing a Dependency](#installing-a-dependency)
 - [Importing a Component](#importing-a-component)
@@ -263,6 +264,51 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
 
 Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
 
+## Formatting Code Automatically
+Prettier is an opinionated JavaScript formatter. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's github page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
+
+To format our code whenever we make a commit in git, we need to install the following dependencies:
+
+[Husky](https://github.com/typicode/husky) with npm:
+
+```
+npm install husky --save-dev
+```
+
+Husky makes it easy to use githooks as if they are npm scripts.
+
+Next we need to install [lint-staged](https://github.com/okonet/lint-staged) with npm:
+
+```
+npm install lint-staged --save-dev
+``` 
+lint-staged allows us to run scripts on staged files in git. See this (blog post about lint-staged for more information)[https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8].
+
+Now we can add prettier itself with npm: 
+
+```npm install prettier --save-dev``` 
+
+Now we can make sure every file is formatted correctly by adding the following code to the `package.json`:
+
+Add the following line to scripts:
+
+```js
+"precommit": "lint-staged"
+```
+
+Next we add a 'lint-staged' field to the `package.json`, for example:
+
+```js
+"lint-staged": {
+  "src/**/*.js": [
+    "prettier --single-quote --write",
+    "git add"
+  ]
+}
+```
+
+Next you might want to integrate Prettier in your favorite editor, read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier github page.
+
 ## Changing the Page `<title>`
 
 You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else.
-- 
GitLab


From a96551661fa81fe728d6f4eb375dd9a65e209518 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:38:19 +0100
Subject: [PATCH 2/7] Tweak style

---
 packages/react-scripts/template/README.md | 44 +++++++++++++++--------
 1 file changed, 29 insertions(+), 15 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 6713d1fed..1a92e7247 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -265,14 +265,15 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
 Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
 
 ## Formatting Code Automatically
-Prettier is an opinionated JavaScript formatter. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's github page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
+
+Prettier is an opinionated JavaScript formatter. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/).
 
 To format our code whenever we make a commit in git, we need to install the following dependencies:
 
 [Husky](https://github.com/typicode/husky) with npm:
 
 ```
-npm install husky --save-dev
+npm install --save-dev husky
 ```
 
 Husky makes it easy to use githooks as if they are npm scripts.
@@ -280,34 +281,47 @@ Husky makes it easy to use githooks as if they are npm scripts.
 Next we need to install [lint-staged](https://github.com/okonet/lint-staged) with npm:
 
 ```
-npm install lint-staged --save-dev
+npm install --save-dev lint-staged
 ``` 
-lint-staged allows us to run scripts on staged files in git. See this (blog post about lint-staged for more information)[https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8].
 
-Now we can add prettier itself with npm: 
+lint-staged allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+
+Now we can add Prettier itself with npm: 
 
-```npm install prettier --save-dev``` 
+```
+npm install --save-dev prettier
+``` 
 
-Now we can make sure every file is formatted correctly by adding the following code to the `package.json`:
+Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
 
-Add the following line to scripts:
+Add the following line to `scripts` section:
 
 ```js
-"precommit": "lint-staged"
+{
+  // ...
+  "scripts": {
+    // ...
+    "precommit": "lint-staged"
+  },
+  // ...
+}
 ```
 
 Next we add a 'lint-staged' field to the `package.json`, for example:
 
 ```js
-"lint-staged": {
-  "src/**/*.js": [
-    "prettier --single-quote --write",
-    "git add"
-  ]
+{
+  // ...
+  "lint-staged": {
+    "src/**/*.js": [
+      "prettier --single-quote --write",
+      "git add"
+    ]
+  }
 }
 ```
 
-Next you might want to integrate Prettier in your favorite editor, read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier github page.
+Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
 
 ## Changing the Page `<title>`
 
-- 
GitLab


From e146a963ee6cf5587ba0d17928d2793e89383174 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:39:48 +0100
Subject: [PATCH 3/7] Update README.md

---
 packages/react-scripts/template/README.md | 24 ++++++-----------------
 1 file changed, 6 insertions(+), 18 deletions(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 1a92e7247..2964aad6f 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -270,27 +270,13 @@ Prettier is an opinionated JavaScript formatter. With Prettier you can format th
 
 To format our code whenever we make a commit in git, we need to install the following dependencies:
 
-[Husky](https://github.com/typicode/husky) with npm:
-
-```
-npm install --save-dev husky
 ```
-
-Husky makes it easy to use githooks as if they are npm scripts.
-
-Next we need to install [lint-staged](https://github.com/okonet/lint-staged) with npm:
-
+npm install --save-dev husky lint-staged prettier
 ```
-npm install --save-dev lint-staged
-``` 
 
-lint-staged allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
-
-Now we can add Prettier itself with npm: 
-
-```
-npm install --save-dev prettier
-``` 
+* `husky` makes it easy to use githooks as if they are npm scripts.
+* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
+* `prettier` is the JavaScript formatter we will run before commits.
 
 Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root.
 
@@ -321,6 +307,8 @@ Next we add a 'lint-staged' field to the `package.json`, for example:
 }
 ```
 
+Now, when you make a commit, Prettier will format the code automatically.
+
 Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
 
 ## Changing the Page `<title>`
-- 
GitLab


From 71f604096b9b7b5830add4888f7c482033b55216 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:43:01 +0100
Subject: [PATCH 4/7] Update README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 8cd74f24f..eb62b61e3 100644
--- a/README.md
+++ b/README.md
@@ -116,6 +116,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Supported Language Features and Polyfills](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#supported-language-features-and-polyfills)
 - [Syntax Highlighting in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#syntax-highlighting-in-the-editor)
 - [Displaying Lint Output in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#displaying-lint-output-in-the-editor)
+- [Formatting Code Automatically](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#formatting-code-automatically)
 - [Debugging in the Editor](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#debugging-in-the-editor)
 - [Changing the Page `<title>`](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#changing-the-page-title)
 - [Installing a Dependency](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#installing-a-dependency)
-- 
GitLab


From 318dafd20ab6f2edf193e3d5467f7175f0375b6d Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:45:16 +0100
Subject: [PATCH 5/7] Support JSX

---
 packages/react-scripts/template/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 2964aad6f..450775c90 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -299,7 +299,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example:
 {
   // ...
   "lint-staged": {
-    "src/**/*.js": [
+    "src/**/*.{js,jsx}": [
       "prettier --single-quote --write",
       "git add"
     ]
-- 
GitLab


From ef2a8b72b8a145ef4bb1105b58dd359ca24a8164 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:46:00 +0100
Subject: [PATCH 6/7] Update README.md

---
 packages/react-scripts/template/README.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index 450775c90..d507a2a60 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -274,6 +274,12 @@ To format our code whenever we make a commit in git, we need to install the foll
 npm install --save-dev husky lint-staged prettier
 ```
 
+or if you use Yarn:
+
+```
+yarn add --dev husky lint-staged prettier
+```
+
 * `husky` makes it easy to use githooks as if they are npm scripts.
 * `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8).
 * `prettier` is the JavaScript formatter we will run before commits.
-- 
GitLab


From 8330fdd72adca8970bd97f5fde36b110fe083a36 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Tue, 27 Jun 2017 17:51:33 +0100
Subject: [PATCH 7/7] Update README.md

---
 packages/react-scripts/template/README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md
index d507a2a60..a878c6846 100644
--- a/packages/react-scripts/template/README.md
+++ b/packages/react-scripts/template/README.md
@@ -313,7 +313,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example:
 }
 ```
 
-Now, when you make a commit, Prettier will format the code automatically.
+Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time.
 
 Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page.
 
-- 
GitLab