Skip to content
Blog

Configuring a Prettier pre-commit hook

Front end1 min read

1. Install Prettier

terminalbash
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.

.prettierrcJSON
{
  "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

terminalbash
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

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

References