步骤

  1. 初始化
npm init -y
git init

创建.gitignore并指定忽略规则

依赖安装

  • npm i @ls-lint/ls-lint --save-dev
  • npm install eslint --save-dev
  • npm install typescript --save-dev
  • npm install @typescript-eslint/parser --save-dev
  • npm install --save-dev --save-exact prettier
  • npm install -D husky
  • npm install -D lint-staged
  • npm install -D conventional-changelog-cli
  • npm install -g commitizen

    • commitizen init cz-conventional-changelog --save --save-exact
  • npm install cz-customizable --save-dev
  • npm install --save-dev @commitlint/cli
  • npm install --save-dev @commitlint/config-conventional

各种配置

统一编码风格

根目录下创建 .editorconfig

# http://editorconfig.org
root = true # 应在文件顶部指定的特殊属性,true表示停止搜索当前文件

[*]
charset = utf-8 # 统一字符格式
indent_style = space # 缩进方式为空格
indent_size = 2 # 缩进为两个空格
end_of_line = lf # 换行符统一用lf
insert_final_newline = true # 保证文件结尾留一个空行
trim_trailing_whitespace = true # 移除新一行前的空白字符

[*.md]
insert_final_newline = false
trim_trailing_whitespace = false

文件名校验:ls-lint

  • 新建.ls-lint.yml
  • 配置规则

    # https://ls-lint.org/
    ls:
        src:
            .js: snake_case
            .ts: snake_case | camelCase
            .d.ts: PascalCase
            .html: regex:[a-z0-9]+
    ignore:
    - .git 
    - node_modules
  • 执行npx ls-lint会进行检查

语法校验: eslint

  • 安装依赖
  • 新建.eslintrc
  • 填写配置文件
{
    "extends": "eslint:recommended",
    "parser": "@typescript-eslint/parser",
    "env": {
        "browser": true,
        "node": true
    },
    "parserOptions": {
        "sourceType": "module"
    }
}
  • 执行npx eslint src/**会进行检查

代码格式化: prettier

  • 安装依赖
  • 新建.prettierrc
  • 填写配置文件
{
    "tabWidth": 4,
    "useTabs": false,
    "semi": false,
    "singleQuote": false,
    "trailingComma": "all",
    "bracketSpacing": true,
    "arrowParens": "avoid",
    "printWidth": 140
}
  • 执行npx prettier --check src/**/* --ignore-unknown会进行检查
  • 执行npx prettier --write src/**/* --ignore-unknown会进行格式化--ignore-unknown会忽略匹配的未知文件
格式化操作后,结束标签>跑到下一行的问题。增加配置
htmlWhitespaceSensitivity: “ignore”

Git提交信息格式: commitizen+conventional-changelog-cli

  • 安装依赖

    npm install -D commitizen
    # 此时需要在pacakge.json中写入命令git cz,或者npx git cz提交,因为不是全局的
    # npm install -D conventional-changelog
    npm install -D conventional-changelog-cli
  • 运行下面命令,使其支持Angular的Commit message格式

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

    此时 package.json中会多出一个 config字段

  • git cz代替 git commit,此时已经可以用这个命令了
  • 生成 changelog文件,需要按上面的规范提交 commit信息

    conventional-changelog -p angular -i CHANGELOG.md -s && git add CHANGELOG.md
    # 或者
    conventional-changelog -p angular -w -r 0 > CHANGELOG.md
  • 自定义配置

如果不喜欢上面的 cz-conventional-changelog可以使用 cz-customizable

npm uni cz-conventional-changelog
commitizen init cz-customizable --save --save-exact --force

此时需要配置一个文件 .cz-config.js做自定义配置:

"use strict"

module.exports = {
    types: [
        { value: "feat", name: "特性:    一个新的特性" },
        { value: "fix", name: "修复:    修复一个Bug" },
        { value: "docs", name: "文档:    变更的只有文档" },
        { value: "style", name: "格式:    空格, 分号等格式修复" },
        { value: "refactor", name: "重构:    代码重构,注意和特性、修复区分开" },
        { value: "pref", name: "性能:    提升性能" },
        { value: "test", name: "测试:    添加一个测试" },
        { value: "build", name: "工具:    开发工具变动(构建、脚手架工具等)" },
        { value: "ci", name: "自动化:    改变自动化配置文件以及脚本" },
        { value: "chore", name: "chore:    除了src以及test的其他地方的修改" },
        { value: "revert", name: "回滚:    代码回退" },
    ],

    scopes: [{ name: "核心代码" }, { name: "业务逻辑" }, { name: "其他代码" }],
    // scopeOverrides: {
    //   fix: [
    //     {name: 'merge'},
    //     {name: 'style'},
    //     {name: 'e2eTest'},
    //     {name: 'unitTest'}
    //   ]
    // },

    messages: {
        type: "选择一种你的提交类型:",
        scope: "选择一个scope (可选):",
        // customScope: "Denote the SCOPE of this change:",
        subject: "短说明:\n",
        body: '长说明,使用"|"换行(可选):\n',
        breaking: "非兼容性说明 (可选):\n",
        footer: "关联关闭的issue,例如:#31, #34(可选):\n",
        confirmCommit: "确定提交说明?",
    },

    allowCustomScopes: false,
    allowBreakingChanges: ["feat", "fix"],
    subjectLimit: 100,
}

此时执行 git cz就有效了。

Commitizen校验: commitlint

npm install --save-dev @commitlint/cli
// 安装符合Angular风格的校验规则
npm install --save-dev @commitlint/config-conventional

新建配置文件 commitlint.config.js:

module.exports = {
    extends: ["@commitlint/config-conventional"],
    rules: {
        "scope-empty": [0, "never"],
        "scope-enum": [2, "always", ["核心代码", "业务逻辑", "其他代码"]],
        "type-enum": [2, "always", ["feat", "fix", "style", "docs", "refactor", "pref", "test", "build", "ci", "chore", "revert"]],
    },
}

此时执行 echo 'foo: bar' | npx commitlint(linux or macos)上执行可以看到格式不对的错误.
然后可以在 .husky/commit-msg中加上以下命令校验

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

Git Hook: husky+lint-staged

(husky安装流程出现问题,待续)

npm install -D husky

执行 npx husky install,此时会多一个 .husky文件夹。

添加脚本命令(这种方式再 npm i之后会自动执行)

{
  "scripts": {
    "prepare": "husky install"
  }
}
  • 然后添加一个命令
For Windows users, if you see the help message when running npx husky add ..., try node node_modules/.bin/husky add ... instead. This isn't an issue with husky code.
node node_modules/.bin/husky add .husky/pre-commit "npm test"
node node_modules/.bin/husky add .husky/commit-msg "npm test"

暂存区检测: lint-staged

npm install -D lint-staged

创建 .lintstagedrc

{
    "src/**": ["npm run in:checkfiles", "git add ."]
}

执行 npx lint-staged --allow-empty可以开始检测

最后修改:2022 年 03 月 09 日
如果觉得我的文章对你有用,请随意赞赏