Vue 项目工程化配置

创建项目

vue create vue-admin

? Please pick a preset: Manually select features

? Check the features needed for your project:
 ◉ Choose Vue version     // vue3
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

 ? Choose a version of Vue.js that you want to start the project with
  2.x
❯ 3.x

? Use history mode for router? (Requires proper server setup for index fallback in production) No

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)

? Pick a linter / formatter config: Standard

? Pick additional lint features:
 ◉ Lint on save
❯◉ Lint and fix on commit

? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

代码格式化

如果是通过上述方式创建项目则默认在根目录存在 .eslintrc.js 文件

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/vue3-essential", "@vue/standard"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    quotes: "warn",
  },
};

代码自动格式化

使用 prettier 配置格式化规则使项目代码自动格式化并满足 eslint 需求

安装依赖

yarn add prettier -D

配置规则

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none"
}

规范 git 提交

安装依赖

yarn add cz-customizable -D
yarn add commitizen -D

配置 cz-customizable

在 package.json 中添加配置

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable" // 依赖安装位置
    }
  }

配置提示文件

在项目根目录创建文件.cz-config.js

module.exports = {
  // 可选类型
  types: [
    {
      value: "feat",
      name: "feat:     新功能",
    },
    {
      value: "fix",
      name: "fix:    修复",
    },
    {
      value: "docs",
      name: "docs:    文档变更",
    },
    {
      value: "style",
      name: "style:   代码格式(不影响代码运行的变动)",
    },
    {
      value: "refactor",
      name: "refactor:    重构(既不是增加feature，也不是修复bug)",
    },
    {
      value: "perf",
      name: "perf:    性能优化",
    },
    {
      value: "test",
      name: "test:    增加测试",
    },
    {
      value: "chore",
      name: "chore:   构筑过程或辅助工具的变动",
    },
    {
      value: "revert",
      name: "revert:    回退",
    },
    {
      value: "build",
      name: "build:   打包",
    },
    {
      value: "",
      name: "",
    },
  ],
  // 消息步骤
  messages: {
    type: "请选择提交类型:",
    customScope: "请输入修改范围(可选):",
    subject: "请简要描述提交(必填):",
    body: "请输入详细描述(可选):",
    footer: "请输入要关闭的issue(可选):",
    confirmCommit: "确认使用以上信息提交(y/n/e/h)",
  },
  // 跳过问题
  skipOption: ["body", "footer"],
  // subject文字长度默认是72
  subjectLimit: 72,
};

校验提交

安装依赖

yarn add @commitlint/config-conventional @commitlint/cli -D
yarn add husky -D
yarn husky install

配置规则

在 script 中添加脚本

"prepare": "husky install"

创建 shell 脚本

# 检查提交信息
yarn husky add .husky/commit-msg 'yarn commitlint --edit $1'

在项目根目录创建 commitlint.config.js

module.exports = {
  extends: ["@commitlint/config-conventional"],
  // 定义规则
  roles: {
    // type的类型定义
    "type-enum": [
      // 当前验证的错误级别
      2,
      "always",
      // 泛型内容
      [
        "feat",
        "fix",
        "docs",
        "style",
        "refactor",
        "perf",
        "test",
        "chore",
        "revert",
        "build",
      ],
    ],
    // subject 不做大小写校验
    "subject-case": [0],
  },
};

使用 lint-staged 自动修复错误

// package.json
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }

使用 husky 在提交前触发 lint-staged

yarn husky add .husky/test "git add .
yarn lint-staged"

以上配置会在提交发生错误时自动尝试修复并提交