【源码】基于 ESLint、Prettier、husky 和 lint staged 的前端代码规范管理项目

项目简介

本项目集成 ESLint、Prettier、husky 和 lint - staged 等工具，为前端开发者提供统一的代码规范和自动化工具。借助该工具集，开发者能在代码提交前自动检查并格式化代码，保证代码符合预定规范和标准，提高代码质量、提升开发效率并减少手动操作。

项目的主要特性和功能

1. ESLint 代码检查：可检查 JavaScript 代码中的问题，并自动修复部分问题，且规则可配置以适配不同项目需求。
2. Prettier 代码格式化：自动格式化代码，确保代码风格一致，支持 JavaScript、TypeScript 等多种语言。
3. husky git 钩子操作：能在 git 的特定阶段（如 pre - commit）执行脚本，用于在代码提交前执行代码检查和格式化操作。
4. lint - staged 暂存区代码检查：仅检查 git 暂存区修改的代码，提升检查效率。

安装使用步骤

假设用户已下载本项目的源码文件： 1. 安装依赖：在项目根目录下执行 npm install 安装所有依赖。 2. 配置 ESLint：执行 npm init @eslint/config 初始化 ESLint 配置，按提示选择合适的规则和环境，配置完成后生成 .eslintrc.js 文件。 3. 配置 Prettier：在项目根目录下创建 .prettierrc 文件，配置自己的格式化规则。 4. 配置 husky 和 lint - staged：在 package.json 文件的 scripts 部分添加相关脚本命令，运行 npx husky install 安装 husky，然后在 package.json 的 lint - staged 字段中配置 lint - staged。 5. 运行代码检查和格式化：在 pre - commit 阶段，husky 会自动运行 lint - staged 配置的命令，执行 ESLint 检查和 Prettier 格式化，也可手动运行 npx lint - staged 进行检查和格式化。 6. 测试：提交代码时，应能看到 ESLint 的错误提示和 Prettier 的格式化效果，若存在 ESLint 的 error 信息，commit 将被阻止。

请注意，此项目仅为工具集成示例，实际项目中需根据具体需求进行配置和调整。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】