Configuring Prettier pre-commit hook.

prettier.md

Installing and Configuring Prettier in Your Project

1. Install Pritter

npm install --save-dev --save-exact prettier

2. Create Prettier Configuration File

Create a .prettierrc file and paste your configuration into it. For more options, refer to the Prettier documentation.

{
    "arrowParens": "avoid",
    "singleQuote": true,
    "semi": true,
    "bracketSameLine": false,
    "bracketSpacing": true,
    "vueIndentScriptAndStyle": true,
    "trailingComma": "es5",
    "singleAttributePerLine": true,
    "jsxBracketSameLine": true,
    "tabWidth": 2,
    "useTabs": false,
    "printWidth": 100
}

3. Set Up Pre-commit Hook

npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "lint-staged"

4. Update package.json with Lint-Staged Configuration

 "lint-staged": {
    "*.js": "eslint --fix",
    "{**/*,*}.{js,vue,html,css}": "prettier --write"
 }

References

• lint staged

• husky

• prettier options

• prettier precommit