From 71ad945fa613782ca1db53507d86438d04a121df Mon Sep 17 00:00:00 2001 From: Maarten Hus Date: Tue, 27 Jun 2017 18:51:58 +0200 Subject: [PATCH] Added instruction on how to install Prettier (#2006) * Added instruction on how to install Prettier * Tweak style * Update README.md * Update README.md * Support JSX * Update README.md * Update README.md --- README.md | 1 + packages/react-scripts/template/README.md | 54 +++++++++++++++++++++++ 2 files changed, 55 insertions(+) diff --git a/README.md b/README.md index 06a2fbf4df9..969d0311054 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 ``](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) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3edaec5cefd..c54858b03f1 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) @@ -264,6 +265,59 @@ 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: + +``` +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. + +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` section: + +```js +{ + // ... + "scripts": { + // ... + "precommit": "lint-staged" + }, + // ... +} +``` + +Next we add a 'lint-staged' field to the `package.json`, for example: + +```js +{ + // ... + "lint-staged": { + "src/**/*.{js,jsx}": [ + "prettier --single-quote --write", + "git add" + ] + } +} +``` + +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. + ## 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.