prettier-config-dia

Prettier shareable configuration for projects at DIA

Table of Contents

• Installation
• Usage
• Optional Configurations
• Used Plugins
• Recommendations
  • Pre-Commit Hook Installation
  • Pre-Commit Hook Usage
• License

Installation

npm install --save-dev @interaktiv/prettier-config-dia

Usage

.prettierrc.js

module.exports = require('@interaktiv/prettier-config-dia');

.prettierignore

Do something like this:

cat ./node_modules/@interaktiv/prettier-config-dia/.prettierignore >> .prettierignore

or use the prettier-cli:

prettier --ignore "./node_modules/@interaktiv/prettier-config-dia/.prettierignore" --write .

package.json

e.g.

...
"scripts": {
  "format": "prettier --write \"src/**/*.+(js|ts|vue|json)\""
}
...

Optional Configurations

• aura - Lightning Aura Components, extends but also replaces options in a more es5 based fashion for files in **/aura/** dirs.

• lwc - Lightning Web Components, literally just extends the default config and sets the parser for html files in **/lwc/** dirs to lwc.

  If you are in a Lightning Web Components project just set your prettier config to @interaktiv/prettier-config-dia/lwc.

• salesforce - A merge of the lwc and aura configs to support Code Formatting for Development on the Salesforce Platform.

Used Plugins

• prettier-plugin-apex - Used to format our Apex code in Salesforce DX projects.
• prettier-plugin-packagejson - Used to make the keys of package.json well sorted order

If you wanna opt-out of these plugin see the Prettier Docs.

Recommendations

We recommend to use Prettier together with husky and lint-staged as a pre-commit git hook.

Pre-Commit Hook Installation

npm install --save-dev husky lint-staged

Pre-Commit Hook Usage

package.json

e.g.

...
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "**/*.+(js|ts|vue|json|css|sass|less|graphql|yml|yaml|scss|md)": [
    "prettier --write",
    "git add",
  ]
}
...

License

MIT Copyright © 2019-present die.interaktiven GmbH & Co. KG