从0到1搭建一个项目，我们需要做些什么？

从0到1搭建一个项目，我们需要做些什么？（eslint+lint-staged+husky+commitlint）

Code-Template

当开发一个新的项目，我们首先要做的是选择项目中将要使用的技术栈。国内大部分常用的都是Vue或者React，在官网都有提供内置的脚手架工具，可以快速搭建一套开箱即用的代码模板。当前我们也可以自己做一个cli工具（从npm init开始到打包配置），方便我们后续快速生成自己的代码模板，可以关注我，后续的文档将带大家从0到1搭个前端cli工具。

• Vue
  vite   vue-cli
• React
  create-react-app   umi

本文后续将通过用使用vite来快速搭建一个React项目为例（根据自己的需求选择就好）:

ESLint

可以使用ESLint的默认配置，可以使用自定义ESLint-Config。
1.默认配置：

// 根据不同选项生成默认的.eslintrc.json,开箱即用
npm install -g eslint
eslint --init

2.自定义配置（可使用，这篇文档封装好的eslint-config）

// 安装依赖
pnpm add -D eslint eslint-config-waltiu-react

// .eslintrc.json中加入以下配置
{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint-config-waltiu-react"
    ],
    "rules": {
    }
}
// package.json 下面加入以下代码
  "scripts": {
    "lint:staged":"eslint --ext .js,.jsx,.ts,.tsx ",
    "lint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
    "lint:fix": "eslint --fix --ext .js,.jsx,.ts,.tsx ./src",
  },

点击了解更多...

lint-staged

对暂存区的文件进行校验，可以快速对修改过的文件进行lint或者style之类的校验

 // package.json 下面加入以下代码
  "scripts": {
    "lint-staged": "lint-staged"
  },
 "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint:staged"
  }

husky

husky是一个git hook工具，可以在git提交的各个阶段如（pre-commit等）配合ESLint对提交的代码进行一些格式之类的校验。husky 6.0版本前后的写法不同，下面将分别介绍下。

1. 6.0之前（新工程不建议使用，直接修改旧工程配置就好）

   // package.json 下面加入以下代码
    "husky": {       
        "hooks": {
         // commit之前执行的校验命令
        "pre-commit": "npm run lint-staged", 
         // 校验commit时添加的备注信息是否符合我们要求的规范
        "commit-msg": "commitlint -e $HUSKY_GIT_PARAMS" 
        }
      }

2. 6.0之后（建议）

  //安装husky依赖
  npm install -d husky
  // package.json的scripts
 {
        "scripts": {
            "prepare": "husky install" 
            // 如项目git目录和开发目录不同级 则 "prepare": "cd ../ && husky install",切换到git目录 
        }
    }
 // 运行prepare，生成.husky目录
 npm run prepare
 // 添加pre-commit前执行命令
 npx husky add .husky/pre-commit "npm run lint-staged"

commitlint

官网 github.com/conventiona…

1.手动提交校验

// 安装commitlint依赖
 npm install -D @commitlint/cli @commitlint/config-conventional
// 生成husky相关配置文件
 npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
// 新增commitlint配置文件，commitlint.config.js，并根据自身喜好修改
    module.exports = {
        extends: [
            '@commitlint/config-conventional'
        ],
          // https://commitlint.js.org/#/reference-rules
        rules: {
        }
    }
  

commit代码后就回校验提交信息是否符合规范

2.git-cz 交互式提交代码

// 添加commitizen和适配器
npm install -D  commitizen @commitlint/cz-commitlint
// package.json中添加配置
  "config": {
        "commitizen": {
            // path路径为git路径的相对路径，如开发项目目录不是根目录，也需要更改
            "path": "./node_modules/@commitlint/cz-commitlint"
          }
        },
   
  "scripts": {
    "commit": "git-cz",
  }
// git add. 后 执行npm run commit，看到结果如下

3.后续优化，修改commitlint配置文件

// <type> [?scope]: <subject description>
// [?body]
// [?footer(s)]
// feat(模块名称): 本次提交主要更新信息-相关地址

module.exports = {
    "extends": ["@commitlint/config-conventional"],
    // https://commitlint.js.org/#/reference-rules
  
    rules: {
      "type-enum": [
        2,
        "always",
        ["feat", "fix", "refactor", "style", "docs", "test", "revert", "chore"]
      ],
      "type-case": [0],
      "type-empty": [0],
      "scope-empty": [0],
      "scope-case": [0],
      "subject-full-stop": [0, "never"],
      "subject-case": [0, "never"],
      "header-max-length": [0, "always", 72]
    },
    prompt: {
      messages: {
        skip: "",
        max: "upper %d chars",
        min: "%d chars at least",
        emptyWarning: "当前内容不能为空",
        upperLimitWarning: "over limit",
        lowerLimitWarning: "below limit"
      },
      questions: {
        type: {
          description: "Commit类型选择:",
          "enum": {
            feat: {
              description: "✨ 新需求+1"
            },
            fix: {
              description: "