...
 
Commits (2)
{
"printWidth": 80,
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
# Prettier
[Prettier](https://prettier.io/docs/en/index.html) is an opinionated code formatter. I will copy some of its documentation.
It is **highly recommended** to use it in every project in our company. It saves time. Not only yours, as you don't have to format code all by yourself, but also others that would read that code in the future.
## Table of Contents
- [Prettier config](#prettier-config)
- [Development](#development)
- [CI/CD](#cicd)
- [Prettier options](#prettier-options)
- [Print Width](#print-width)
- [Semicolons](#semicolons)
- [Single Quotes](#single-quotes)
- [Trailing Commas](#trailing-commas)
## Prettier config
### Development
Set your editor to `format on save` using prettier. But to format the whole project you will have to add this script to `package.json`.
```json
"scripts": {
"format": "yarn format:prettier",
"format:prettier": "prettier --config .prettierrc \"src/**/*.{js,tsx,ts,scss}\" --write"
},
```
It will take config from `.prettierrc` and format all `js`, `ts`, `tsx` and `scss` files. You can change what type of files it should format.
You can choose folders you want to format by changing `src/` to `{stc,otherFolder}/`.
At the end of the script, there is `--write` flag so prettier will override files.
### CI/CD
```json
"scripts": {
"format-test": "npm run format-test:prettier",
"format-test:prettier": "prettier --config .prettierrc \"src/**/*.{js,tsx,ts,scss}\" -l"
}
```
The only difference in CI/CD is that you have the `-l` flag instead of `--write`.
> `-l` (or `--list-different`) is a flag which prints the filenames of files that are different from Prettier formatting. If there are differences the script errors out, which is useful in a CI scenario.
> [source](https://prettier.io/docs/en/cli.html#list-different)
## Prettier options
Keep `.prettierrc` file in the main project directory.
[Full documentation here.](https://prettier.io/docs/en/options.html)
I will just focus on those that are worth changing or those you should keep untouched. Other than those are really up to you and your project team.
### Print Width
Specify the line length that the printer will wrap on.
I'd recommended setting value not greater than 100.
| Default | Recommended | key |
| ------- | ----------- | -------------- |
| `80` | `80`-`100` | `"printWidth"` |
### Semicolons
Print semicolons at the ends of statements.
Valid options:
- `true` - Add a semicolon at the end of every statement.
- `false` - Only add semicolons at the beginning of lines that may introduce ASI failures.
I'd recommended using semicolons, but the decision is up to you. But you can [avoid weird bugs](https://flaviocopes.com/javascript-automatic-semicolon-insertion/) just by using them.
| Default | Recommended | key |
| ------- | ----------- | -------- |
| `true` | `true` | `"semi"` |
### Single Quotes
Use single quotes instead of double quotes.
| Default | Recommended | key |
| ------- | ----------- | --------------- |
| `false` | `true` | `"singleQuote"` |
### Trailing Commas
Print trailing commas wherever possible when multi-line. (A single-line array, for example, never gets trailing commas.)
Valid options:
- `"none"` - No trailing commas.
- `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.)
- `"all"` - Trailing commas wherever possible (including function arguments). This requires node 8 or a [transform](https://babeljs.io/docs/plugins/syntax-trailing-function-commas/).
I'd recommended using `"es5"` trailing commas, as it will **not** cause weird commit changes as follow:
```git
{
first: "value",
- second: 42
+ second: 42,
+ newParam: "newval"
}
```
| Default | Recommended | key |
| -------- | ----------- | ----------------- |
| `"none"` | `"es5"` | `"trailingComma"` |
{
"name": "application-name",
"version": "1.0.0",
"scripts": {
"format": "yarn format:prettier",
"format:prettier": "prettier --config .prettierrc \"src/**/*.{js,tsx,ts,scss}\" --write",
"format-test": "yarn format-test:prettier",
"format-test:prettier": "prettier --config .prettierrc \"src/**/*.{js,tsx,ts,scss}\" -l"
},
"devDependencies": {
"prettier": "1.18.2"
}
}