⌈波涛汹涌实践项目⌋项目工程规范(eslint、prettier、husky、lint-staged、commitlint)

语法检测与代码风格规范

ESLint 做语法检测
Prettier 格式化代码风格

安装`Eslint`&`Prettier`相关依赖

pnpm add eslint prettier eslint-config-prettier eslint-plugin-prettier -Dw

安装检测`typescript`语法及风格依赖

pnpm add @typescript-eslint/eslint-plugin @typescript-eslint/parser -Dw

整理配置文件

.eslintignore

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist

.eslintrc

{
  "root": true,
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint" // 禁用TS插件中与 Prettier 冲突的规则
    // 之后vue react等其它插件,需要在后面做配置
    // prettier/**
    // 解决Prettier与插件之间兼容问题
  ],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {}
}

.prettierignore

# don't ever lint node_modules
node_modules
# don't lint build output (make sure it's set to your correct build folder name)
dist

.prettierrc

代码风格配置

{
  "singleQuote": true,
  "tabWidth": 2,
  "semi": true
}

提代码交规范

husky 处理git hooks
commitlint 针对commit信息做规范校验
lint-staged 只针对git暂存区文件作处理

安装`lint-staged`依赖

pnpm add lint-staged -Dw

.lintstagedrc

{
  "packages/**/*.{vue,ts,js}": [
    "eslint --fix"
  ]
}

安装`commitlint`相关依赖及配置

pnpm add @commitlint/cli @commitlint/config-conventional commitlint-config-cz cz-customizable -Dw

package.json

{
// ...
  "scripts":{
      "commit": "node ./node_modules/cz-customizable/standalone.js",
      "preinstall": "npx only-allow pnpm"
   },
// ...
}

.commitlintrc

{
    "extends": ['@commitlint/config-conventional', 'cz']
}

汉化默认的commit提示 .cz-config.js

module.exports = {
  types: [
    { value: "feat", name: "✨ Features | 新功能" },
    { value: "fix", name: "🐛 Bug Fixes | Bug 修复" },
    { value: "init", name: "🎉 Init | 初始化" },
    { value: "docs", name: "✏️ Documentation | 文档" },
    { value: "style", name: "💄 Styles | 风格" },
    { value: "refactor", name: "♻️ Code Refactoring | 代码重构" },
    { value: "perf", name: "⚡ Performance Improvements | 性能优化" },
    { value: "test", name: "✅ Tests | 测试" },
    { value: "revert", name: "⏪ Revert | 回退" },
    { value: "build", name: "📦‍ Build System | 打包构建" },
    { value: "chore", name: "🚀 Chore | 构建/工程依赖/工具" },
    { value: "ci", name: "👷 Continuous Integration | CI 配置" }
  ],

  // scopes: [{ name: 'accounts' }, { name: 'admin' }, { name: 'exampleScope' }, { name: 'changeMe' }],

  allowTicketNumber: false,
  isTicketNumberRequired: false,
  ticketNumberPrefix: 'TICKET-',
  ticketNumberRegExp: '\\d{1,5}',

  // it needs to match the value for field type. Eg.: 'fix'
  /*
  scopeOverrides: {
    fix: [
      {name: 'merge'},
      {name: 'style'},
      {name: 'e2eTest'},
      {name: 'unitTest'}
    ]
  },
  */
  // override the messages, defaults are as follows
  messages: {
    type: "选择要提交的更改类型:",
    scope: '\n表示此更改的范围(可选):',
    // used if allowCustomScopes is true
    customScope: '表示此更改的范围(自定义):',
    subject: '写一个简短的，命令式的时态描述变化:\n',
    body: '提供更改的较长描述(可选)。使用"|"换行:\n',
    breaking: '列出任何重大更改(可选):\n',
    footer: '列出此更改关闭的任何问题(可选). E.g.: #31, #34:\n',
    confirmCommit: '您确定要继续上面的提交吗?',
  },

  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'],
  // skip any questions you want
  skipQuestions: ['body'],

  // limit subject length
  subjectLimit: 100,
  // breaklineChar: '|', // It is supported for fields body and footer.
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true, // default is false
};

安装`husky`依赖及初始化

pnpm add husky -Dw

# 初始化husky
npx husky install

# 添加 pre-commit hooks
npx husky add  .husky/pre-commit "npx lint-staged"

# 添加 commit-msg hooks
npx husky add  .husky/commit-msg 'npx --no -- commitlint --edit "$1"'