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

mahiworld profile image

How to Uncheck All Your Twitter (X) Interests in Bulk with Developer Tools (Quick Method)

Mahendra -

kaankaya profile image

Dirty Code: Simple Rules to Avoid It

Kaan Kaya -

hitesh_developer profile image

Angular vs Next.js: A Detailed Comparison

Hitesh Chauhan -

abhay_yt_52a8e72b213be229 profile image

Implementing Route Guards in React: Protecting Your Routes with Authentication and Roles

Abhay Singh Kathayat -