Prettier
tip
Review the Official Prettier Installation Instructions for changes.
Installation​
Install prettier using the following command:
pnpm add --save-dev --save-exact prettier
Then install prettier-plugin-organize-imports
pnpm add --save-dev prettier-plugin-organize-imports
Finally, create a .prettierrc
file and add the following:
prettierrc
{
"plugins": ["prettier-plugin-organize-imports"]
}
Script​
Add the following scripts to the project's package.json
file:
"prettier": "prettier --write ./",
"prettier:check": "prettier --check ./",
VS Code Extension​
Add the following to the .vscode/extensions.json
file.
.vscode/extensions.json
{
"recommendations": [
. . .
"esbenp.prettier-vscode",
]
}
VS Code Settings​
tip
Most IDE's can be configured to format files on save according to the prettier style guide.
Add the following to the .vscode/settings.json
file.
.vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
Project Documentation​
Update 01-scripts.md
Documentation​
Add the following to the docusaurus/docs/01-scripts.md
documentation
docusaurus/docs/01-scripts.md
| `pnpm run prettier` | Format files to conform to the Prettier Style Guide |
| `pnpm run prettier:check` | Check if files conforms to the Prettier Style Guide without making changes. Exits with an error status if files require re-formatting |
Update 98-vs-code/02-vs-code-extensions.md
Documentation​
Add the follow to the docusaurus/docs/98-vs-code/02-vs-code-extensions.md
documentation
docusaurus/docs/98-vs-code/02-vs-code-extensions.md
| [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) | Used to automatically format code files to a consistent style |
Create 02-code-quality/03-prettier.md
Documentation​
docusaurus/docs/02-code-quality/03-prettier.md
# Prettier
## What is Prettier
Prettier is used to format our code to conform to a consistent style.
## Prettier Ignore Node
In some cases prettier will reformat code that we don't want reformated. We can use `// prettier-ignore` to exclude the next node from formatting. For example:
```js
matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
```
will be transformed to:
```js
// Prettier forces this to be a single line, which makes this harder to read
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
```
## Prettier Disable Conventions
When disabling a line or block of code please provide a note explaining why the rule is disabled