从零搭建开发工具库：ESLint、Prettier、Husky、Commitlint

构建一个全面的开发工具库：提升开发效率和代码质量

在现代软件开发中，利用强大的开发工具库至关重要，它可以显著提高效率并保障代码质量。本文将指导你从头开始构建一个完善的工具库，涵盖代码风格检查、单元测试和提交规范等各个方面。

1. 工具介绍

• TypeScript： 一种强类型语言，可增强代码健壮性。
• Rollup： 一个 JavaScript 模块打包器，可优化代码加载。
• Jest： 一个广泛使用的 JavaScript 测试框架。
• ESLint： 一个静态代码分析器，可检查代码风格和语法错误。
• Prettier： 一个代码格式化工具，可确保代码一致性。
• Husky： 一个 Git 钩子工具，可执行代码风格和单元测试检查。
• Commitlint： 一个 Git 钩子工具，可强制执行代码提交规范。

2. 搭建步骤

2.1 安装工具

npm install -g typescript rollup jest eslint prettier husky commitlint

2.2 创建项目

mkdir my-project
cd my-project
npm init -y

2.3 安装项目依赖

npm install --save-dev typescript rollup jest eslint prettier husky commitlint

2.4 配置 TypeScript

在 package.json 中添加：

{
  "scripts": {
    "build": "tsc"
  },
  "devDependencies": {
    "typescript": "^4.7.4"
  }
}

2.5 配置 Rollup

在 package.json 中添加：

{
  "scripts": {
    "build": "rollup -c"
  },
  "devDependencies": {
    "rollup": "^2.76.0"
  }
}

2.6 配置 Jest

在 package.json 中添加：

{
  "scripts": {
    "test": "jest"
  },
  "devDependencies": {
    "jest": "^28.0.0"
  }
}

2.7 配置 ESLint

在 package.json 中添加：

{
  "scripts": {
    "lint": "eslint . --fix"
  },
  "devDependencies": {
    "eslint": "^8.24.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-react": "^7.29.0"
  }
}

2.8 配置 Prettier

在 package.json 中添加：

{
  "scripts": {
    "format": "prettier --write ."
  },
  "devDependencies": {
    "prettier": "^2.7.1"
  }
}

2.9 配置 Husky

在 package.json 中添加：

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint && npm run test"
    }
  }
}

2.10 配置 Commitlint

在 package.json 中添加：

{
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

2.11 添加示例代码

在 src 目录创建 index.ts，添加示例代码：

function helloWorld() {
  console.log('Hello, world!');
}

helloWorld();

2.12 运行工具

• npm run build：构建项目。
• npm run test：运行单元测试。
• npm run lint：检查代码风格。
• npm run format：格式化代码。
• git commit -m "feat: add helloWorld function"：提交代码。

3. 总结

通过使用 TypeScript、Rollup、Jest、ESLint、Prettier、Husky 和 Commitlint，我们构建了一个完善的开发工具库，涵盖了代码风格检查、单元测试和代码提交规范。它将显著提升你的开发效率和代码质量，打造一个高效的开发环境。

4. 常见问题解答

4.1 为什么需要一个开发工具库？

一个开发工具库可以自动执行任务，例如代码检查和格式化，从而节省时间并提高代码质量。

4.2 这些工具之间有什么区别？

• ESLint：检查代码风格和语法。
• Prettier：格式化代码以保持一致性。
• Jest：执行单元测试。
• Husky 和 Commitlint：强制执行提交规范。

4.3 如何使用 TypeScript？

TypeScript 是一种强类型语言，需要编译才能运行。可以安装 TypeScript 编译器并使用 tsc 命令编译代码。

4.4 如何打包 JavaScript 代码？

Rollup 是一种模块打包器，可以将 JavaScript 代码捆绑到一个文件中，以便在浏览器中运行。

4.5 如何编写有效的提交消息？

遵循约定式提交规范，例如 Conventional Commits，以保持提交消息清晰简洁。