Vue3项目规范

editorconfig

在编译器中 编写代码时 就会采用 .editorconfig 文件中的规范。

#[采用的相对路径以这个文件开始]
root = true

#匹配所有文件
#缩进采用tab、大小为4、编码utf-8、删除行尾空格、最后一行是空白行 、文件最大行223行
[*]
indent_style = tab
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 233

#.prettierrc采用的规则
[.prettierrc]
indent_style = space
indent_size = 2

#.yml .yaml .json 文件采用的规则
[*.{yml,yaml,json}]
indent_style = space
indent_size = 2

#由于root=true ,test文件夹和.editorconfig文件应在同一文件夹内
#test/cases/parsing/bom/ 文件下的bomfile.css bomfile.js
[test/cases/parsing/bom/bomfile.{css,js}]
charset = utf-8-bom

#所有markdown文件的规则
[*.md]
trim_trailing_whitespace = false

执行这个配置文件,需要在 vscode 中安装 editorconfig for vscode 插件。

prettier

格式化代码时 的规范

  1. 安装 prettier 开发时依赖

  1. 在.prettierrc文件中写规范

{
  "useTabs": false,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.vue",
      "options": {
        "parser": "vue"
      }
    }
  ],
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "none",
  "semi": true
}

在保存项目中单个文件时,就会采用配置文件,但是一个一个文件去保存就比较慢,需要一个指令。

在 package.json中写"prettier": "prettier --write ."

在命令行中执行 npm run prettier

如果项目中右一些文件不需要在格式化的时候修改,可以写在.prettierignore中

也需要vscode 中下载 prettier 插件。

eslint

语法检查工具,编码不规范的地方下面右下划线。因为 prettier 是格式化代码用的,所以需要格式化成 eslint 规定的语法格式,就需要 prettier 和 eslint的规范统一。

// .eslintrc.js
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/typescript/recommended',
    '@vue/prettier',
    '@vue/prettier/@typescript-eslint',
    'plugin:prettier/recommanded'
  ]

git 提交规范

需要在项目代码提交之前做代码规范的验证,husky 是 git hook 工具,帮助我们触发git提交的各个阶段:pre-commit、commit-msg、pre-push

如果你的 Vue 项目已经安装了 husky,但是在提交代码时没有执行 pre-commit 中的指令,有可能是以下原因导致的:

  1. 你没有在项目根目录下创建 .husky/pre-commit 文件。在这个文件中,你需要定义要在提交代码之前执行的指令。例如:

#!/bin/sh
npm run lint

这个文件的内容表示在执行 git commit 命令之前,先执行 npm run lint 命令进行代码检查。

  1. .husky/pre-commit 文件没有执行权限。你可以使用以下命令为文件添加执行权限:

chmod +x .husky/pre-commit
  1. 你在提交代码时使用了 --no-verify 参数。这个参数可以跳过 husky 的钩子函数,导致 pre-commit 中的指令没有被执行。如果你需要强制提交代码而不执行 pre-commit 中的指令,可以使用 git commit --no-verify 命令。

如果你已经检查了以上内容,仍然无法执行 pre-commit 中的指令,可以尝试卸载 husky 并重新安装。具体操作如下:

  1. 在项目根目录下,运行以下命令卸载 husky:

npm uninstall husky
  1. 删除 .git/hooks 目录下的所有文件。

  1. 重新安装 husky:

npm install husky --save-dev
  1. 在项目根目录下,运行以下命令初始化 husky:

npx husky-init && npm install

这个命令会重新创建 .husky 目录,并在其中添加一些必要的文件。

  1. 在 .husky/pre-commit 文件中定义要执行的指令。

  1. 运行以下命令为 .husky/pre-commit 文件添加执行权限:

chmod +x .husky/pre-commit

现在,重新提交代码,看看 pre-commit 中的指令是否被正确执行了。

规范git提交信息

commitizen 工具

插件安装:npm i commitizen -D

安装cz-conventional-changelog,并且初始化cz-conventional-changelog:

npx commitizen init cz-conventional-changelog --save-dev --save-exact

执行上面的指令之后,在package.json中会进行配置:

  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  }

提交代码需要使用 npx cz,但是在执行这个指令之前需要先执行 git add

  • 第一步是选择type,本次更新的类型

  feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests

翻译

| Type     | 作用                                                         |
| -------- | ------------------------------------------------------------ |
| feat     | 新增特性 (feature)                                           |
| fix      | 修复 Bug(bug fix)                                            |
| docs     | 修改文档 (documentation)                                     |
| style    | 代码格式修改(white-space, formatting, missing semi colons, etc) |
| refactor | 代码重构(refactor)                                           |
| perf     | 改善性能(A code change that improves performance)            |
| test     | 测试(when adding missing tests)                              |
| build    | 变更项目构建或外部依赖(例如 scopes: webpack、gulp、npm 等) |
| ci       | 更改持续集成软件的配置文件和 package 中的 scripts 命令,例如 scopes: Travis, Circle 等 |
| chore    | 变更构建流程或辅助工具(比如更改测试环境)                     |
| revert   | 代码回退                                                     |

Select the type of change that you're committing: feat: A new feature

  • 第二步选择本次修改的范围(作用域)

What is the scope of this change (e.g. component or file name): (press enter to skip) project init

  • 第三步选择提交的信息

Write a short, imperative tense description of the change (max 80 chars):

(20) this is project init

  • 第四步提交详细的描述信息

Provide a longer description of the change: (press enter to skip)

this is a longer description

  • 第五步是否是一次重大的更改

Are there any breaking changes? No

  • 第六步是否影响某个open issue

Does this change affect any open issues? No

你可能感兴趣的:(vue3,前端,javascript,vue.js)