vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

以下是一个使用 Vue 3、TypeScript 和 ESLint 的简单项目结构示例，并配置了 Git Hooks 使用 Husky。

1. 初始化项目:

npm init @vitejs/app my-vue3-app --template vue-ts

2. 进入项目目录并安装依赖:

cd my-vue3-app
npm install

3. 安装 ESLint 和相关插件:

npm install eslint eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier --save-dev

4. 创建 .eslintrc.js 文件并配置 ESLint:

module.exports = {
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  rules: {
    // 自定义规则
  }
};

5. 安装 Husky:

npm install husky@next --save-dev

6. 使用 husky 初始化 Git Hooks:

npx husky install

7. 添加 ESLint 的 Git Hook:

npx husky add .husky/pre-commit "npx lint-staged"

8. 安装 lint-staged:

npm install lint-staged --save-dev

9. 在 package.json 中添加 lint-staged 配置:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": "eslint"
  }
}

这样就配置了一个基本的 Vue 3 + TypeScript 项目，并且通过 ESLint 进行代码质量检查，并且使用 Husky 来在 Git commit 阶段运行 ESLint 检查。