From 4d46b0bbdfdf0da0f88086656cc7dc893f45f30a Mon Sep 17 00:00:00 2001 From: Maarten Hus 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 080329cffad..6713d1fed30 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 ``](#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. 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 6713d1fed30..1a92e72477c 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>` 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 1a92e72477c..2964aad6f75 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>` 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 8cd74f24f86..eb62b61e3a2 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) 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 2964aad6f75..450775c90d6 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" ] 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 450775c90d6..d507a2a60d1 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. 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 d507a2a60d1..a878c6846e0 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.