DEV Community

Cover image for Add Eslint, Prettier, Husky, Lint-staged to Vue Project
Tony Zheng
Tony Zheng

Posted on

Add Eslint, Prettier, Husky, Lint-staged to Vue Project

#eslint #vue #javascript #husky

1. Install packages

npm install husky lint-staged eslint prettier --save-dev
Enter fullscreen mode Exit fullscreen mode

2. eslint configuration

npm init @eslint/config
Enter fullscreen mode Exit fullscreen mode

3. lint-staged Configuration
Add this to package.json

{
  ...
  "lint-staged": {
    "src/**/*.{js,vue,html,css}": "prettier --write",
    "src/**/*.{js,vue}": "eslint --fix"
  }
}
Enter fullscreen mode Exit fullscreen mode

4. husky configuration

npx husky-init && npm install
Enter fullscreen mode Exit fullscreen mode

Update .husky/pre-commit file

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx lint-staged
Enter fullscreen mode Exit fullscreen mode

Top comments (0)

Read next

thisweekinjavascript profile image

Claude AI now runs JavaScript, Python beats JavaScript on GitHub, new Node.js versions and more

James -

m_sea_bass profile image

Modify the local bolt.new interface to allow input of the API key

M Sea Bass -

nobody-99 profile image

-? What is YARN ?-

nobody-99 -

charan_sajjanapu profile image

Evolution of Web Tech and Browsers

Charan Sajjanapu -