LMNR-AI 项目前端代码规范优化实践

前言

在现代前端开发中，代码规范和风格一致性是保证项目可维护性的重要因素。LMNR-AI 项目团队近期针对前端代码的 linting 和格式化规则进行了系统性的优化，解决了多个影响开发体验和代码质量的问题。本文将详细介绍这些优化措施及其技术实现。

问题背景

在 LMNR-AI 项目的前端开发过程中，团队发现存在几个影响开发效率和代码质量的规范性问题：

1. VS Code 编辑器对 JSX/TSX 文件的缩进设置未被正确识别
2. 文件末尾缺少换行符的问题未被处理
3. 最大行长度限制要么未配置，要么设置过大，要么未被严格执行

这些问题虽然看似微小，但长期积累会导致代码风格不一致，影响团队协作效率和代码可读性。

解决方案

1. JSX/TSX 文件缩进配置

针对 JSX/TSX 文件缩进问题，团队在项目根目录的 .vscode/settings.json 中增加了针对性的配置：

{
  "[typescriptreact]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这一配置确保了在 React 组件文件中，无论开发者个人的编辑器设置如何，都会统一使用 2 个空格作为缩进标准。

2. 文件末尾换行符处理

为了确保所有文件末尾都有换行符，团队在 ESLint 配置中启用了 eol-last 规则：

// .eslintrc.js
module.exports = {
  rules: {
    'eol-last': ['error', 'always']
  }
}

同时，在 Prettier 配置中也进行了相应设置：

// .prettierrc
{
  "endOfLine": "auto"
}

这种双重保障确保了无论开发者使用什么操作系统或编辑器，提交的代码都会符合统一的换行标准。

3. 最大行长度限制优化

关于代码行长度的问题，团队经过讨论后确定了以下最佳实践：

// .eslintrc.js
module.exports = {
  rules: {
    'max-len': [
      'error',
      {
        code: 100,
        tabWidth: 2,
        ignoreUrls: true,
        ignoreStrings: true,
        ignoreTemplateLiterals: true
      }
    ]
  }
}

// .prettierrc
{
  "printWidth": 100
}

将最大行长度设置为 100 个字符，既保证了代码的可读性，又避免了过度限制导致的不必要换行。同时，对 URL、字符串字面量和模板字符串进行了特殊处理，避免因为这些内容导致不必要的警告。

技术实现细节

配置优先级处理

在实现这些规范时，团队特别注意了不同工具的配置优先级：

1. 编辑器配置（.vscode/settings.json）仅影响 VS Code 用户
2. ESLint 配置作为强制的代码质量检查
3. Prettier 配置作为自动格式化标准

这种分层设计确保了无论开发者使用什么工具链，都能获得一致的代码风格。

Git 钩子集成

为了确保这些规范在团队协作中得到执行，项目还配置了 pre-commit Git 钩子，在提交前自动运行 lint 和格式化检查：

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

最佳实践建议

基于 LMNR-AI 项目的经验，对于类似的前端项目，我们建议：

1. 尽早建立规范：在项目初期就确立代码规范，避免后期调整成本过高
2. 工具链统一：确保团队使用相同的开发工具和配置
3. 自动化检查：通过 Git 钩子等机制自动化执行规范检查
4. 灵活性与严格性平衡：在保证基本规范的同时，对特殊场景（如长URL）适当放宽限制

结语

通过这次代码规范的优化，LMNR-AI 项目显著提升了前端代码的一致性和可维护性。这些实践不仅适用于当前项目，也可以为其他前端团队提供有价值的参考。代码规范虽然看似是细节问题，但对项目的长期健康发展至关重要。