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]
}