vue3 + typescript 项目集成 eslint + prettier + husky

在Vue3 + TypeScript项目中，你可以使用以下步骤来集成ESLint、Prettier和Husky：

1. 安装必要的包：

npm install --save-dev eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier @vue/cli-plugin-eslint

2. 添加或更新eslintrc.js配置文件：

module.exports = {
  extends: [
    // 添加 prettier 插件
    'plugin:prettier/recommended',
    // 使用 Vue3 的推荐配置
    'plugin:vue/vue3-recommended',
    // 标准样式
    'standard'
  ],
  rules: {
    // 你的自定义 ESLint 规则
  }
};

3. 创建.prettierrc配置文件，并添加以下内容：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

4. 在package.json中添加scripts来运行ESLint和Prettier：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "format": "prettier --write \"src/**/*.{js,vue}\""
  }
}

5. 安装并设置Husky进行提交钩子：

npm install husky --save-dev
npx husky install

6. 添加.husky/pre-commit文件，以在提交前运行lint和format脚本：

#!/bin/sh
. "$(dirname "$0")/_/npx/node/bin/node" "$(dirname "$0")/_/npx/node_modules/husky/bin/husky.js" install
. "$(dirname "$0")/_/npx/node/bin/node" "$(dirname "$0")/_/npx/node_modules/husky/bin/husky.js" run pre-commit

这样，你的Vue3 + TypeScript项目就可以使用ESLint进行代码质量检查，并使用Prettier进行代码格式化，同时通过Husky确保在提交前对更改进行lint和format。