手摸手从零搭建vite+typescript+vue3项目--eslint+prettier+husky+lint-staged

# 安装eslint依赖
npm install eslint --save-dev
 
# 初始化eslint配置文件
npx eslint --init
 
# 安装vue3相关的eslint插件
npm install eslint-plugin-vue@next --save-dev
 
# 安装typescript支持
npm install @typescript-eslint/parser --save-dev
npm install @typescript-eslint/eslint-plugin --save-dev
 
# 安装prettier插件，用于eslint与prettier集成
npm install eslint-plugin-prettier --save-dev
 
# 安装husky，用于在git hooks中运行脚本
npm install husky --save-dev
 
# 设置husky hooks
npx husky install
 
# 添加husky hooks配置
npx husky add .husky/pre-commit "npx lint-staged"
 
# 安装lint-staged，用于在git commit之前运行eslint检查
npm install lint-staged --save-dev
 
# 在package.json中添加lint-staged配置
"lint-staged": {
  "*.{js,jsx,ts,tsx,vue}": [
    "eslint --fix",
    "git add"
  ]
}

以上代码示例展示了如何在一个vite+typescript+vue3项目中集成eslint、prettier、husky和lint-staged。这些工具能够帮助开发者维护代码风格的一致性，并在提交代码前发现并修复代码问题。