Skip to main content

How to integrate husky prettier etc in Vue project?

Create Project with vite​

pnpm create vite-app vue3-ts

Install Dependencies​

pnpm install husky lint-staged eslint prettier -D

Configure prettier​

// .prettierrc.json
{
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "trailingComma": "all",
  "endOfLine": "auto"
}

you can format code using pnpx prettier --write .

Configure eslint​

# inialize eslint 
pnpm create @eslint/config

The following optional, you can choose the same with me.

image-20231231160250767

run the command pnpx eslint . to check eslint rules;

Install husky and Configure it​

# init husty 
pnpm husky install
# Configure husky 
pnpx husky add .husky/pre-commit "pnpm lint-staged"

after run the command above, see your project like this, a underline directory and a pre-commit file auto created.

image-20231231154728294

Wait a minute, another configuration need to configure.

// pakage.json
  "scripts": {
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "lint-staged": "lint-staged"
  },
 "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  },

Check the husky​

Run the command following to commit some files

git add .

git commit -m 'test for husky'

You will see this in the console:

image-20231231160344135

Congratulations, you succeed to use git commit trigger lint-stage.

This conclude eslint fix code and prettier format code.

To the End​

Thanks for your time, If you get something from my article, please give me clap, meanwhile, feel free to ask question as you need.