mirror of
https://github.com/zhigang1992/create-react-app.git
synced 2026-05-16 19:09:05 +08:00
55 lines
1.9 KiB
Markdown
55 lines
1.9 KiB
Markdown
---
|
|
id: formatting-code-automatically
|
|
title: Formatting Code Automatically
|
|
sidebar_label: Formatting code
|
|
---
|
|
|
|
Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. 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:
|
|
|
|
```sh
|
|
npm install --save husky lint-staged prettier
|
|
```
|
|
|
|
Alternatively you may use `yarn`:
|
|
|
|
```sh
|
|
yarn add 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 field to the `package.json` section:
|
|
|
|
```diff
|
|
+ "husky": {
|
|
+ "hooks": {
|
|
+ "pre-commit": "lint-staged"
|
|
+ }
|
|
+ }
|
|
```
|
|
|
|
Next we add a 'lint-staged' field to the `package.json`, for example:
|
|
|
|
```diff
|
|
"dependencies": {
|
|
// ...
|
|
},
|
|
+ "lint-staged": {
|
|
+ "src/**/*.{js,jsx,json,css}": [
|
|
+ "prettier --single-quote --write",
|
|
+ "git add"
|
|
+ ]
|
|
+ },
|
|
"scripts": {
|
|
```
|
|
|
|
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://prettier.io/docs/en/editors.html) on the Prettier GitHub page.
|