【打造前端现代化规范工程】Vite + ESLint + Husky + Commitlint + Lint-staged

yarn create vite

cd warbler-fe
 yarn
 yarn dev

// package.json
  "scripts": {
    "dev": "vite --open",
  },

// package.json
{
  "name": "warbler-fe",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "typescript": "*",
    "vite": "^4.2.0",
    "vue-tsc": "^1.2.0"
  }
}

yarn add -D
eslint
eslint-plugin-vue
eslint-plugin-import
vue-eslint-parser
eslint-config-airbnb-base
@typescript-eslint/parser
@typescript-eslint/eslint-plugin

// .eslintrc.cjs
module.exports = {
  root: true,
  globals: {
    defineProps: 'readonly',
    defineExpose: 'readonly',
    defineEmits: 'readonly',
    withDefaults: 'readonly',
  },
  extends: ['plugin:@typescript-eslint/recommended', 'plugin:vue/vue3-recommended', 'airbnb-base'],
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 'latest',
  },
  rules: {
    // 关闭函数名后面必须有空格的验证
    'space-before-function-paren': 0,
    // 关闭强制不变的变量使用 const, 因为自动格式化 有时候会把 let 变成 const
    'perfer-const': 0,
    // 允许行尾分号
    semi: 0,
    // 允许尾后逗号
    'comma-dangle': 0,
  },
};

// .eslintignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*

node_modules
dist
dist-ssr
*.local
.history

# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

// 不加这两个会报错
.cz-config.js
package.json

// 需要 vscode 安装 Prettier - Code formatter 扩展
{
  // 控制编辑器是否自动格式化粘贴的内容。格式化程序必须可用，并且能针对文档中的某一范围进行格式化
  "editor.formatOnPaste": true,
  // 在保存时格式化文件。格式化程序必须可用，延迟后文件不能保存，并且编辑器不能关闭。
  "editor.formatOnSave": true,
  // 控制编辑器在键入一行后是否自动格式化该行。
  "editor.formatOnType": false,
  // 当编辑器失去焦点时，将自动保存未保存的编辑器。
  "files.autoSave": "onFocusChange",
  //在一定数量的字符后显示标尺
  "editor.rulers": [100],
  // 定义一个默认格式化程序, 该格式化程序优先于所有其他格式化程序设置。必须是提供格式化程序的扩展的标识符。
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 忽略单词
  "cSpell.words": ["vite"]
}

yarn add -D
husky
lint-staged
commitizen
commitlint
cz-customizable
commitlint-config-cz
@commitlint/config-conventional

// 在 package.json 中添加脚本
npm set-script prepare "husky install"
// 初始化 husky，将 git hooks 钩子交由 husky 执行
npm run prepare

"scripts": {
    "prepare": "husky install"
  },

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

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

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

// commitlint.config.js
module.exports = {
  // 继承第三方库的配置
  extends: ['cz'],
  rules: {
    // 自定义规则,
  },
};

// .cz-config.js
module.exports = {
  types: [
    { value: '? 新增  ', name: '新增:  新的内容' },
    { value: '? 修复  ', name: '修复:  修复一个Bug' },
    { value: '? 文档  ', name: '文档:  变更的只有文档' },
    { value: '? 格式  ', name: '格式:  空格, 分号等格式修复' },
    { value: '♻️ 重构  ', name: '重构:  代码重构，注意和特性、修复区分开' },
    { value: '⚡️ 性能  ', name: '性能:  提升性能' },
    { value: '✅ 测试  ', name: '测试:  添加一个测试' },
    { value: '? 工具  ', name: '工具:  开发工具变动(构建、脚手架工具等)' },
    { value: '⏪ 回滚  ', name: '回滚:  代码回退' },
  ],

  // Specify the scopes for your particular project
  scopes: [],
  messages: {
    type: '选择一种你的提交类型: \n',
    cope: '选择一个 scope（可选）\n：',
    customScope: '请输入修改范围(可选): \n',
    subject: '短说明: \n',
    body: '长说明，使用 "|" 换行(可选)：\n',
    breaking: '非兼容性说明 (可选): \n',
    footer: '关联关闭的issue，例如：#31, #34(可选): \n',
    confirmCommit: '确定提交说明? \n',
  },
  // 跳过空的 scope
  skipEmptyScopes: true,
  skipQuestions: ['scopes', 'breaking', 'body', 'footer'],
  // 设置为 true，在 scope 选择的时候，会有 empty 和 custom 可以选择
  // 顾名思义，选择 empty 表示 scope 缺省，如果选择 custom，则可以自己输入信息
  allowCustomScopes: true,
  // 只有我们 type 选择了 feat 或者是 fix，才会询问我们 breaking message.
  allowBreakingChanges: ['feat', 'fix'],
};

// package.json
  "scripts": {
    "commit": "git-cz",
    "commit:all": "git add . && git-cz",
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

npx husky add .husky/post-commit 'git push'

{
  "name": "warbler-fe",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview",
    "commit": "git-cz",
    "commit:all": "git add . && git-cz",
    "prepare": "husky install"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@commitlint/config-conventional": "^17.4.4",
    "@typescript-eslint/eslint-plugin": "^5.56.0",
    "@typescript-eslint/parser": "^5.56.0",
    "@vitejs/plugin-vue": "^4.1.0",
    "commitizen": "^4.3.0",
    "commitlint": "^17.4.4",
    "commitlint-config-cz": "^0.13.3",
    "cz-customizable": "^7.0.0",
    "eslint": "^8.36.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-vue": "^9.9.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.0",
    "typescript": "*",
    "vite": "^4.2.0",
    "vue-eslint-parser": "^9.1.0",
    "vue-tsc": "^1.2.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,vue,json}": [
      "eslint --fix"
    ]
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
}