# vue_Mongoose

**Repository Path**: Xbaiss/vue_Mongoose

## Basic Information

- **Project Name**: vue_Mongoose
- **Description**: ESLint+Prettier+Stylelint+Commitlint+husky提交拦截、保存后自动fix
- **Primary Language**: 其他
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-07-12
- **Last Updated**: 2023-07-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# git 代码提交规范
首先 这个项目是git项目，全局安装commitizen
 npm install -g commitizen
## 1.初始化搭建
vue3_ts_eslint_prettier_sass
### 创建.eslintrc.js
``` js
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    "standard-with-typescript",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended",
  ],
  parserOptions: {
    ecmaVersion: "latest",
    sourceType: "module",
  },
  plugins: ["vue"],
  rules: {},
};
```
### 创建.prettierrc.js
``` js
module.exports = {};
```
## 2.git cz提交
commitizen用git进行提交规范，方便多人共同开发时，代码格式的统一
### 在项目中安装cz-customizable
npm i cz-customizable --save-dev

#### 1.在package.json中进行新增
``` js
"config": {
    "commitizen": {
      "path": "./node_modules/cz-customizable"
    },
    "cz-customizable": {
      "config": "./.cz-config.js"
    }
  }
```
#### 2. 项目根目录下创建 .cz-config.js自定义提示文件
``` js
module.exports = {
  types: [
    {
      value: 'build',
      name: '📦️build: 编辑相关的修改，例如打包、发布版本、对项目构建或者依赖改动,'
    },
    { value: 'feat', name: '✨feat: 新功能' },
    { value: 'fix', name: '🐛fix: 修复BUG' },
    { 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: 'del', name: '🔥del: 删除代码/文件' },
    { value: 'ci', name: '👷CI:   related changes' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型(必选):',
    // scope: '请输入文件修改范围(可选):',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    // body: '请输入详细描述(可选，待优化去除，跳过即可):',
    // breaking: 'List any BREAKING CHANGES (optional):\n',
    footer: '请输入要关闭的issue(待优化去除，跳过即可):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // used if allowCustomScopes is true
  allowCustomScopes: true,
  // allowBreakingChanges: ['feat', 'fix'],
  skipQuestions: ['body', 'footer'],
  // limit subject length, commitlint默认是72
  subjectLimit: 200
}

```

注意：做到这步时使用 git cz 替换 git commit -m “提交信息”
## 3. 使用husky进行强制git代码提交规范
### （1）安装 commitlint 校验插件
 npm i @commitlint/config-conventional @commitlint/cli -D

### （2）安装 husky 强制性使用规范
npm install husky -D

### 初始化 husky
npx husky install
这时根目录多了一个.husky文件

### 导入commitlint配置文件
#### (1)在根目录新增 commitlint.config.cjs 文件并写入
``` js
module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}
```
#### (2)在package.json中新增指令
```js
  "scripts": {
    ...
    "prepare": "husky install"
  },
```
### 执行命令
npm run prepare 
###  生成 husky commit时的配置文件
npx husky add .husky/commit-msg
.husky文件下多了一个commit-msg文件
### 把husky和commitlint进行关联, 在刚刚新增husky配置commit-msg文件里写入
```js
npx --no -- commitlint --edit 
```
### husky也支持在推送代码时强制代码格式化
npx husky add .husky/pre-commit
.husky文件下多了一个pre-commit文件
###  在刚刚新增husky配置pre-commit文件里写入
```js
npx lint-staged
```
### 把package.json文件的lint-staged修改为
```js
"lint-staged": {
   "src/**/*.{js,vue}": [      //src目录下所有的js和vue文件
     "eslint --fix",           // 自动修复
     "git add"                 // 自动提交时修复
   ]
 }
```
## 4. 集成一些配置editorconfig + prettier + eslint
 .prettierrc
 ``` js
 {
    // 代码换行长度
    "printWidth": 200,
    // 代码缩进空格数
    "tabWidth": 2,
    // 使用制表符缩进而不是空格缩进
    "useTabs": true,
    // 代码结尾是否加分号
    "semi": false,
    // 是否使用单引号
    "singleQuote": true,
    // 对象大括号内两边是否加空格 { a:0 }
    "bracketSpacing": true,
    // 单个参数的箭头函数不加括号 x => x
    "arrowParens": "avoid"
}
 ```
  不允许拥有注释，保存时删除注释

根目录下新建 .editorconfig 文件,内容如下
```js
  # http://editorconfig.org
  root = true

  [*]
  charset = utf-8
  indent_style = space
  indent_size = 4
  end_of_line = lf
  insert_final_newline = true
  trim_trailing_whitespace = true

  [*.md]
  insert_final_newline = false
  trim_trailing_whitespace = false

```