Vite+Vue3项目集成ESLint+Prettier+Stylelint+Husky让项目规范起来

为了在Vite + Vue 3项目中集成ESLint、Prettier、Stylelint和Husky，你需要按照以下步骤操作：

1. 安装所需依赖：

npm install eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue stylelint husky lint-staged --save-dev

2. 在项目根目录下创建.eslintrc.js，配置ESLint规则：

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

3. 创建.prettierrc，配置Prettier规则：

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

4. 创建.stylelintrc.js，配置Stylelint规则：

module.exports = {
  extends: 'stylelint-config-standard',
  rules: {
    // 自定义样式规则
  }
};

5. 在package.json中添加lint-staged配置：

{
  "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --fix",
      "git add"
    ],
    "*.{css,scss,sass}": [
      "stylelint --fix",
      "git add"
    ]
  }
}

6. 设置Husky以运行lint-staged，当提交前运行脚本：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

这样，你的Vite + Vue 3项目就配置了ESLint、Prettier、Stylelint和Husky，以确保代码风格和质量的一致性。在提交前，lint-staged会自动修复可修复的问题，并添加修改后的文件以包含在提交中。如果发现不符合规则的代码提交，将会中断提交过程，直到代码修正。