Vue project configuration files (.npmrc, .env, .cz-config.js, commitlint.config.js)

1. .npmrc

 .npmrc The file is located in the root directory of the project (that is,  the sibling of node_modules and  package.json ), as a configuration file for the npm runtime. The registry registers the source address for the npm package, and legacy-peer-deps ignores the introduction of the same modules.

# npm包注册源地址
registry=http://registry.npm.taobao.org
# 忽略项目中引入的各个modules之间的相同modules,但不同版本的问题并继续安装
legacy-peer-deps=true

Two, Env environment variable

You can place the following files in the project root directory to specify environment variables, where .env and .env.local will be loaded in all environments, and .env.local will be ignored by git. .env.development is the configuration file in the development environment, and .env.production is the configuration file in the production environment.

.env                // 在所有的环境中被载入
.env.local          // 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         // 只在指定的模式中被载入
.env.[mode].local   // 只在指定的模式中被载入，但会被 git 忽略

The priority relationship is as follows, and it is recommended to use .env.local.

.env.development.local>.env.local>.env.development>.env // 开发环境
.env.production.local>.env.local>.env.production>.env // 生产环境

3. Git hooks

Customized script program, the function realized is related to the corresponding git action. The commit workflow hooks used in the project include pre-commit and commit-msg. For more git hooks, refer to the official website: Git hooks .

pre-commit // 钩子在键入提交信息前运行
commit-msg // 用来在提交通过前验证项目状态或提交信息。

If you want to bypass the hooks check, you can use the following command:

git commit -m 'xxx' --no-verify

The project uses lint-staged in the pre-commit hook to verify the file format. Use commitlint in the commit-msg hook to check whether the message submitted by git conforms to the specification.

4. yorkie+lint-staged

install dependencies

npm install yorkie
npm install lint-staged

yorkie is a fork to the husky library and has been fine-tuned to make it easier to configure git hooks in the warehouse. On the one hand, better support monorepo library, on the other hand, change the configuration location of hooks in package.json.

// package.json
// before 
{
    "scripts": {
       "commit-msg": "commitlint -e -V",
       "pre-commit": "lint-staged && vue-tsc --noEmit"
    }
}

// after
{
    "gitHooks": {
        "commit-msg": "commitlint -e -V",
        "pre-commit": "lint-staged && vue-tsc --noEmit"
     },
}

lint-staged: Only verify the file code format submitted to the git temporary storage area, instead of verifying all file formats, which can improve the verification efficiency

// package.json
"lint-staged": {
    "*.{vue,ts,tsx,jsx}": "eslint --fix"
 },

5. Commitizen 

Commitizen is a tool to help write a standard commit message, assist in filling in the commit information, and play a role in the pre-commit hook. Install dependencies as follows:

npm install commitizen -D

The cz-conventional-changelog adapter is used to initialize the project, and the terminal operation prompts are all in English. Therefore, the cz-customizable adapter is used in the project, and a configuration file is set externally .cz-config.js，支持to customize the configuration options. Run the following command:

npx commitizen init cz-customizable --save-dev --save-exact --force

This line of command does two things:

First: install cz-customizable to development dependencies (devDependencies)

"devDependencies": {
  ...
  "cz-customizable": "^6.3.0",
  ...
},

Second: field package.jsonbeing modifiedconfig.commitizen

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

Create a file in the root directory of the project .cz-config.js, and modify it to Chinese in the project as follows

module.exports = {
  // type 类型（定义之后，可通过上下键选择）
  types: [
    { value: 'feat', name: 'feat:     新增功能' },
    { value: 'fix', name: 'fix:      修复 bug' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式（不影响功能，例如空格、分号等格式修正）' },
    { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     添加、修改测试用例' },
    { value: 'build', name: 'build:    构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
    { value: 'ci', name: 'ci:       修改 CI 配置、脚本' },
    { value: 'chore', name: 'chore:    对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
    { value: 'revert', name: 'revert:   回滚 commit' }
  ],

  // scope 类型（定义之后，可通过上下键选择）
  scopes: [
    ['components', '组件相关'],
    ['hooks', 'hook 相关'],
    ['utils', 'utils 相关'],
    ['element-ui', '对 element-ui 的调整'],
    ['styles', '样式相关'],
    ['deps', '项目依赖'],
    ['auth', '对 auth 修改'],
    ['other', '其他修改'],
    // 如果选择 custom，后面会让你再输入一个自定义的 scope。也可以不设置此项，把后面的 allowCustomScopes 设置为 true
    ['custom', '以上都不是？我要自定义']
  ].map(([value, description]) => {
    return {
      value,
      name: `${value.padEnd(30)} (${description})`
    }
  }),

  // 是否允许自定义填写 scope，在 scope 选择的时候，会有 empty 和 custom 可以选择。
  // allowCustomScopes: true,

  // allowTicketNumber: false,
  // isTicketNumberRequired: false,
  // ticketNumberPrefix: 'TICKET-',
  // ticketNumberRegExp: '\\d{1,5}',


  // 针对每一个 type 去定义对应的 scopes，例如 fix
  /*
  scopeOverrides: {
    fix: [
      { name: 'merge' },
      { name: 'style' },
      { name: 'e2eTest' },
      { name: 'unitTest' }
    ]
  },
  */

  // 交互提示信息
  messages: {
    type: '确保本次提交遵循 Angular 规范！\n选择你要提交的类型：',
    scope: '\n选择一个 scope（可选）：',
    // 选择 scope: custom 时会出下面的提示
    customScope: '请输入自定义的 scope：',
    subject: '填写简短精炼的变更描述：\n',
    body:
      '填写更加详细的变更描述（可选）。使用 "|" 换行：\n',
    breaking: '列举非兼容性重大的变更（可选）：\n',
    footer: '列举出所有变更的 ISSUES CLOSED（可选）。 例如: #31, #34：\n',
    confirmCommit: '确认提交？'
  },

  // 设置只有 type 选择了 feat 或 fix，才询问 breaking message
  allowBreakingChanges: ['feat', 'fix'],

  // 跳过要询问的步骤
  // skipQuestions: ['body', 'footer'],

  // subject 限制长度
  subjectLimit: 100
  breaklineChar: '|', // 支持 body 和 footer
  // footerPrefix : 'ISSUES CLOSED:'
  // askForBreakingChangeFirst : true,
}

The code was submitted before git commit -m "xxx", but now it can be used git cz. Follow the terminal operation prompts and fill in the information step by step, and a standard commit message can be automatically generated.

If you execute git cz and report the following error, the reason is that there is a problem with the installation of commitizen (npm ci commitizen -D), change the installation command npm install commitizen -g, and git cz will succeed. Reference: Related Articles

6. Commitlint 

When running git commmit -m 'xxx', commitlint is used as xxxa tool to check whether the fixed format is satisfied, that is, to verify the commit information, and play a role in the commit-msg hook. Reference: Related articles , install dependencies as follows:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

Create a file in the root directory of the project commitlint.config.jsto configure commitlint verification rules. The writing method of the configuration file is similar to that of eslint . commitlint recommends using config-conventional configuration to write commits.

module.exports = { extends: ['@commitlint/config-conventional'] };

The commitlint verification is as follows, that is, the submission information that does not meet the specifications fails to be submitted, and the submission information that meets the specifications is successfully submitted to the warehouse. Error reporting: git commit -m "package installation"

Success: git commit -m "feat: package installed"