Vue3项目规范配置

加菲猫的鳄鱼
272 阅读3分钟

配置prettier

安装包

npm i prettier -dev
npm i eslint-config-prettier -D  
npm i eslint-plugin-prettier -D

创建prettier.js配置文件

  • 1 创建 .prettierrc.js
// prettier.config.js or .prettierrc.js
    module.exports = {
      printWidth: 120, // 每行代码最大长度
      tabWidth: 2, // 一个tab代表几个空格数，默认为80
      useTabs: false, // 是否使用tab进行缩进，默认为false，表示用空格进行缩减
      semi: false, // 声明后带分号
      singleQuote: true, // 使用单引号
      jsxSingleQuote: true, // 使用单引号
      jsxBracketSameLine: true, // 启用jsx语法，> 放在末尾
      trailingComma: 'none' // 最后一个对象增加逗号
      // proseWrap: 'nerver' // 不换行
    }
  • 2 创建.prettierignore
    # 忽略格式化文件 (根据项目需要自行添加)
    node_modules
    dist
  • 3 增加配置 package.json文件
{
...
 scripts：{
 ...
  "lint": "eslint src --fix --ext .ts,.tsx,.vue,.js,.jsx",
  "prettier": "prettier --write ."
 }
}

配置husky

下载包

  • 先确保当前项目已经配置了eslint & prettier

使用mrm的方式配置husky

  • 1 mrm会帮助配置需要的husky & lint-staged配置，自动生成项目中的文件配置项
 npm i mrm -D
 npx mrm lint-staged
  • 2 下载后会自动生成配置

image.png

image.png

  • 3 我们根据项目增加配置
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  }

执行效果

 git add .
 git commit -m 'fix: test eslint'

会对当前的暂存区的数据进行eslint校验与prettier矫正，执行后的效果图如图所示
image.png

配置commitizen

commitizen是一个git提交规范

下载commitizen 相关的包

全局安装 & 安装项目使用的git指令中文包

    npm install -g commitizen
    commitizen init cz-conventional-changelog --save-dev --save-exact //自动安装中文包和配置项

使用指定的git cz 启动git规范信息 也可以在配置中增加运行命令

 {
 ...
     script:{
         ...
          "commit": "git cz"
     },
     "config": {
        "commitizen": {
          "path": "node_modules/cz-conventional-changelog-zh"
          }
     }
 }
 
 npm run commit// 等同于git cz指令

执行 git cz

  git cz

image.png 此时使用git cz执行git指令会按照定义好的规范来。但是此时强制使用git commit 去提交的话不会进行任何规范显示，所以此时我们需要配置其他的来做规范

安装对commit 命令的限制

  • 1 下载包
npm install --save-dev @commitlint/config-conventional @commitlint/cli
  • 2 增加配置文件 在.husky下新增文件
npx husky add .husky/commit-msg 'npm-run-test' // 会在husky下生产 commit-msg文件 
npx --no-install commitlint --edit $1 // 进入文件中吧npm-run-test替换

gerrit 与 husky的处理

公司的项目使用了gerrit在commit的时候生成change-id所以这里的配置不样

#!/bin/sh
# From Gerrit Code Review 3.6.3-69-g0dee511269
#
# Part of Gerrit Code Review (https://www.gerritcodereview.com/)
#
# Copyright (C) 2009 The Android Open Source Project
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.

set -u

# avoid [[ which is not POSIX sh.
if test "$#" != 1 ; then
  echo "$0 requires an argument."
  exit 1
fi

if test ! -f "$1" ; then
  echo "file does not exist: $1"
  exit 1
fi

# Do not create a change id if requested
if test "false" = "$(git config --bool --get gerrit.createChangeId)" ; then
  exit 0
fi


if git rev-parse --verify HEAD >/dev/null 2>&1; then
  refhash="$(git rev-parse HEAD)"
else
  refhash="$(git hash-object -t tree /dev/null)"
fi

random=$({ git var GIT_COMMITTER_IDENT ; echo "$refhash" ; cat "$1"; } | git hash-object --stdin)
dest="$1.tmp.${random}"

trap 'rm -f "${dest}"' EXIT


if ! git stripspace --strip-comments < "$1" > "${dest}" ; then
   echo "cannot strip comments from $1"
   exit 1
fi

if test ! -s "${dest}" ; then
  echo "file is empty: $1"
  exit 1
fi

reviewurl="$(git config --get gerrit.reviewUrl)"
if test -n "${reviewurl}" ; then
  if ! git interpret-trailers --parse < "$1" | grep -q '^Link:.*/id/I[0-9a-f]\{40\}$' ; then
    if ! git interpret-trailers \
          --trailer "Link: ${reviewurl%/}/id/I${random}" < "$1" > "${dest}" ; then
      echo "cannot insert link footer in $1"
      exit 1
    fi
  fi
else
  # Avoid the --in-place option which only appeared in Git 2.8
  # Avoid the --if-exists option which only appeared in Git 2.15
  if ! git -c trailer.ifexists=doNothing interpret-trailers \
        --trailer "Change-Id: I${random}" < "$1" > "${dest}" ; then
    echo "cannot insert change-id line in $1"
    exit 1
  fi
fi

if ! mv "${dest}" "$1" ; then
  echo "cannot mv ${dest} to $1"
  exit 1
fi


npx --no-install commitlint --edit $1

image.png 在根目录下增加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', // 打包t
        'ci' // 持续集成服务 与 脚本配置信息
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

当执行不符合git提交的规范的时候，不允许进行提交&会提示当前的错误信息。 此时不管怎么提交。都会在限定的规范内。

image.png

avatar
文章
阅读
粉丝