prettier-config
A simple Prettier configuration in a lightweight npm package used at Chaine. Use this to standarize code format for your project or accross teams in a large project.
Quick Start
If you have Prettier already configured, simply install and use:
npm install --save-dev @chaine/prettier-config
Add prettier key to package.json to use config in your project:
"prettier": "@chaine/prettier-config",
Config details
{
printWidth: 120,
tabWidth: 2,
semi: false,
singleQuote: true,
bracketSpacing: false,
trailingComma: 'none',
arrowParens: 'avoid'
}
Check out the prettier
documentation for more info on sharing configurations.
Set up in 3 steps
Instructions if you have never used Prettier before.
1. Prerequisite
Prettier must be installed as a dev dependency
npm install --save-dev --save-exact prettier
2. Install package and update package.json
Install the package using npm
(or yarn
)
npm install --save-dev @chaine/prettier-config
Add the prettier
key to your package.json
diff --git a/package.json b/package.json
index 2ecef3d..260838f 100644
--- a/package.json
+++ b/package.json
@@ -5,6 +5,7 @@
"keywords": [
"prettier"
],
+ "prettier": "@chaine/prettier-config",
"license": "MIT",
"author": "Chaine Inc.",
"main": "index.js"
3. VSCode Setup
To use the Prettier we have just installed from VSCode we need to install the Prettier VSCode extension:
In VSCode terminal, run the following command:
ext install esbenp.prettier-vscode
Open .vscode/settings.json file and confirm:
- VSCode Prettier extension is configured as the default formatter.
- Formatting on save is enabled
.vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}
You can also use the same config from this package directly in your VSCode if you don't want to install this package everytime for personal projects or POCs. Just add this to the settings.json
:
"prettier.printWidth": 120,
"prettier.tabWidth": 2,
"prettier.semi": false,
"prettier.singleQuote": true,
"prettier.bracketSpacing": false,
"prettier.trailingComma": "none",
"prettier.arrowParens": "avoid",
Extend or override this configuration
If you want to extend or this configuration or override any of the options for a specific project or repo, first import the configuration in a .prettierrc.js
file and then export the modifications.
[See here for more details] (https://prettier.io/docs/en/configuration.html#sharing-configurations)
module.exports = {
...require('@chaine/prettier-config'),
semi: false,
...[options]
}