Lint

Lint 工具是现代前端开发流程中不可或缺的静态代码分析工具，它们帮助开发者保持代码质量、一致性和规避常见错误。

• 代码质量控制：检测潜在的错误和有问题的代码模式
• 代码风格统一：强制团队代码风格一致性
• 最佳实践推广：鼓励使用业界认可的编程实践
• 提升可维护性：通过统一的编码规范，使代码更易于理解和维护

ESLint

ESLint是一个用于识别和报告JavaScript和TypeScript代码中模式的工具，目的是使代码更加一致并避免错误。

JavaScript 和 TypeScript 代码规范基于 eslint-config-airbnb，这是业界广泛认可的编码规范之一。

Airbnb风格的主要特点：

• 强制使用ES6+特性：推荐使用箭头函数、模板字符串等现代JavaScript特性
• 严格的变量声明：优先使用 const，其次是 let，避免使用 var
• 组件和函数命名：React 组件使用 Pascal 命名法，函数使用驼峰命名法
• 空格和格式规则：详细规定了缩进、空格、换行等格式要求
• 避免副作用：鼓励纯函数，减少副作用
• 清晰的模块导入导出：规范化的 import/export 语句

stylelint

stylelint 是一个强大的现代 linter，可以帮助开发者避免 CSS/SCSS/Less 等样式代码中的错误并保持一致的编码风格。

样式代码基于 stylelint-config-twbs-bootstrap，这是 Bootstrap 官方推荐的 stylelint 配置。

Bootstrap样式规范的主要特点：

• 严格的格式要求：包括缩进、空格和换行规则
• 命名规范：采用多种命名约定
• 颜色表示法：推荐使用十六进制表示法，适当情况下使用 RGBA
• 媒体查询规则：定义了响应式设计中媒体查询的编写方式
• 避免过度嵌套：限制选择器嵌套深度，提高可维护性
• 变量命名规范：统一的变量命名方式，提高代码可读性

Git 工作流集成

为了确保团队成员提交的代码都符合项目规范，我们使用 lint-staged 和 husky 将 lint 检查集成到 Git 工作流中。

lint-staged

lint-staged 是一个在 git 暂存区上运行 linters 的工具，它只对 git 暂存区中的文件运行 lint 检查，这样可以显著提高性能，避免对整个项目重新 lint 检查。

• 高效率：只检查被修改的文件，避免全量检查带来的性能问题
• 及时反馈：在代码提交前发现并修复问题
• 自动修复：配合 ESLint 和 stylelint 的 --fix 选项，可以自动修复部分问题

husky

husky 是一个让 Git hooks 更易用的工具，它可以在 git 事件（如 commit、push）触发时执行特定脚本。

• 自动化检查：强制在代码提交前运行测试、lint 等检查
• 避免问题代码入库：不符合规范的代码将被拦截，无法提交到仓库
• 减轻代码审查负担：基础的代码质量问题在提交前就能被解决

工作流程

使用 husky 和 lint-staged 的典型工作流程如下：

1. 开发者修改代码并执行 git add 将变更添加到暂存区
2. 执行 git commit 时，husky 触发 pre-commit 钩子
3. pre-commit 钩子调用 lint-staged
4. lint-staged 对暂存区的文件运行配置好的 linters（ESLint、stylelint）
5. 若检查通过，则完成提交；若检查失败，则提交被阻止，开发者需修复问题后再次提交

通过这种方式，我们可以确保所有提交到代码库的代码都符合项目定义的代码规范，从源头上保证代码质量。

注意

除了在提交代码时进行 Lint 检查外，我们还可以在 CI/CD 流程中集成 Lint 检查，以确保所有合并到主分支的代码都符合规范。