2024最新vite + vue3 配置eslint prettier stylelint husky lint-staged husky commitlint

为了配置Vite + Vue 3项目中使用的ESLint、Prettier和Stylelint，以及Husky和lint-staged，你需要按照以下步骤操作：

1. 安装必要的包：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard --save-dev
npm install stylelint stylelint-config-standard stylelint-config-prettier stylelint-scss --save-dev
npm install husky lint-staged --save-dev

2. 在项目根目录下创建.eslintrc.js，.prettierrc.js和stylelint.config.js配置文件。

.eslintrc.js:

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

.prettierrc.js:

module.exports = {
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  semi: true,
  useTabs: false,
  endOfLine: 'auto'
};

stylelint.config.js:

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier', 'stylelint-scss'],
  rules: {
    // 自定义规则
  }
};

3. 在package.json中添加lint-staged和husky相关脚本：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src && stylelint 'src/**/*.scss'",
    "format": "prettier --write \"src/**/*.{js,vue}\" && stylelint --fix \"src/**/*.scss\""
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ],
    "src/**/*.scss": [
      "stylelint --fix",
      "git add"
    ]
  }
}

4. 运行npx husky install以初始化husky。

这样配置后，每次commit前，husky将通过lint-staged运行配置好的ESLint和Stylelint，并自动修复那些可以修复的问题。如果代码中存在不符合规则的地方，commit将被中断，直到代码被修正并符合规则为止。