【Vue】项目搭建规范

news2024/11/16 9:25:54

1. 集成editorconfig配置

EditorConfig 有助于为不同 IDE 编辑器上处理同一项目的多个开发人员维护一致的编码风格。

VSCode需要安装一个插件：EditorConfig for VS Code

创建 .editorconfig 文件：

# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

2. 语法检查 / 代码格式化

通过 vue-cli 创建项目，选择 eslint+prettier

eslint 使用默认的配置即可

prettier 可以根据自己的代码习惯来进行配置，步骤如下：

配置.prettierrc文件：

{
  "useTabs": false,        // 使用tab缩进还是空格缩进，选择false；
  "tabWidth": 2,           // tab是空格的情况下，是几个空格，选择2个；
  "printWidth": 80,        // 当行字符的长度，推荐80，也有人喜欢100或者120；
  "singleQuote": true,     // 使用单引号还是双引号，选择true，使用单引号；
  "trailingComma": "none", // 在多行输入的尾逗号是否添加，设置为 `none`；
  "semi": false            // 语句末尾是否要加分号，默认值true，选择false表示不加；
}

创建.prettierignore忽略文件

/dist/*
.local
.output.js
/node_modules/**

**/*.svg
**/*.sh

/public/*

在package.json中配置一个scripts：
```
"prettier": "prettier --write ."
```

注意：配置完.prettierrc后，一定要yarn run prettier，将所有文件格式化一下，否则会报错

3. git提交规范

通常我们的git commit会按照统一的风格来提交，这样可以快速定位每次提交的内容，方便之后对版本进行控制。

但是如果每次手动来编写这些是比较麻烦的事情，我们可以使用一个工具：Commitizen

安装commitizen和cz-customizable

npm install -g commitizen@4.2.4
npm i cz-customizable@6.3.0 --save-dev

在package.json中进行新增

"config": {
  "commitizen": {
    "path": "node_modules/cz-customizable"
  }
}

在这里插入图片描述

在根目录下新建.cz-config.js文件并写入配置，之后就可以用 git cz 来代替 git commit

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:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

使用husky进行强制git代码提交规范

npm install --save-dev @commitlint/config-conventional@12.1.4 @commitlint/cli@12.1.4
npm install husky@7.0.1 --save-dev
npx husky install

创建commitlint.config.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]
  }
}

在package.json中新增指令
```
"prepare": "husky install"
```
并执行
```
npm run prepare
```
新增husky配置文件
```
npx husky add .husky/commit-msg
```
往第九步生成的文件中写入
```
npx --no-install commitlint --edit
```
使用husky强制代码格式化创建配置文件
```
npx husky add .husky/pre-commit
```
往第十步生成的文件中写入
```
npx lint-staged
```

把package.json文件的lint-staged修改为

"lint-staged": {
   "src/**/*.{js,vue}": [      //src目录下所有的js和vue文件
     "eslint --fix",           // 自动修复
     "git add"                 // 自动提交时修复
   ]
 }