项目前期必备技能：规范代码、高效提交

前端

2023-09-29 00:29:43

在踏上项目开发之旅之前，为确保项目的顺利进行和代码的整洁高效，需要做好充分的准备，其中规范代码和高效提交管理至关重要。本文将详细阐述如何通过一系列工具和规范，构建一个井然有序的项目环境，让你事半功倍。

1. 统一编码规范

编码规范的统一可以极大程度地提高代码的可读性和可维护性，避免不同开发者之间的风格差异带来的混乱。EditorConfig是一款强大的代码风格校验工具，它可以根据预定义的规则自动格式化代码，从而保证整个团队的代码风格保持一致。

2. 高效提交管理

代码提交是项目开发中的重要环节，需要遵循规范，确保提交记录清晰明了。husky是一个钩子工具，它可以拦截Git提交操作，执行一系列自定义脚本，比如格式化代码、校验代码风格、运行测试等，从而在提交前对代码进行自动检查和修复。

3. 代码提交自动化

lint-staged是一个用于自动整理和提交代码的工具。它可以根据预定义的规则，在提交特定文件时自动执行特定的操作，例如运行代码检查、格式化代码等。通过lint-staged，可以简化提交流程，提高提交效率。

4. 代码风格美化

代码风格美化可以让代码看起来更加赏心悦目，也便于阅读和理解。prettier是一个代码格式化工具，它可以根据预定义的规则自动格式化代码，从而保持代码风格的统一性和美观性。

5. 提交规范

规范化的提交记录对于代码维护和追踪至关重要。commitlint是一个提交消息校验工具，它可以根据预定义的规则校验提交消息，确保提交消息格式规范、信息完整，便于理解和追溯。

6. 自动化持续集成

GitHub Actions是一个强大的自动化工具，它可以将代码提交与持续集成和持续交付（CI/CD）流程关联起来。通过GitHub Actions，可以在每次代码提交后自动触发一系列操作，例如构建、测试、部署等，从而提高开发效率和代码质量。

实践案例

下面是一个基于上述工具和规范的实际项目配置示例：

# .editorconfig 文件
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,vue}]
indent_style = space
indent_size = 2

# package.json 文件
{
  "scripts": {
    "lint": "eslint --ext .js,.vue src",
    "lint-staged": "lint-staged",
    "commitmsg": "commitlint -E HUSKY_GIT_PARAMS",
    "pre-commit": "husky install && npm run lint-staged && npm run commitmsg",
    "build": "vue-cli-service build",
    "test": "vue-cli-service test:unit",
    "serve": "vue-cli-service serve"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run pre-commit"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "prettier --write",
      "eslint --fix"
    ]
  },
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

# .github/workflows/main.yml 文件
name: CI/CD

on:
  push:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '16'
          cache: 'npm'
      - run: npm ci
      - run: npm run build --if-present
      - run: npm run test --if-present