多人协作项目中ESLint与Prettier配置最佳实践：解决跨平台换行符问题

在多人协作的前端项目中，不同操作系统的换行符差异常常导致代码格式化问题，严重影响开发效率。本文将详细介绍如何配置ESLint和Prettier，解决跨平台协作中的格式化冲突。

问题背景

在多人协作项目开始时，经常出现格式化报错的问题，特别是类Unix系统（Linux/macOS）与Windows系统在换行符上的差异，造成几乎每行都报错，无法进行有效协作。主要原因是：

Windows使用CRLF（\r\n）作为换行符
Unix系统（包括Linux、macOS）使用LF（\n）作为换行符

换行符差异详解

CRLF与LF的区别

CRLF（Carriage Return + Line Feed）：\r\n，Windows系统默认使用
LF（Line Feed）：\n，Unix系统（Linux、macOS）默认使用

在VSCode等编辑器的右下角可以看到当前文件的换行符格式，CRLF表示Windows格式，LF表示Unix格式。

解决方案

1. Git配置 最根本的解决方法是在Git层面统一换行符处理：

# 设置Git自动转换换行符
git config --global core.autocrlf true    # Windows用户
git config --global core.autocrlf input   # Mac/Linux用户

或者完全禁用Git对换行符的自动转换（不推荐）：

git config --global core.autocrlf false

2. ESLint配置 在.eslintrc.js配置文件中添加以下规则来处理换行符问题：

module.exports = {
  // ... 其他配置
  rules: {
    // 忽略换行符风格检查
    'linebreak-style': process.env.NODE_ENV === 'production' ? 'error' : 'off',
    // 或者完全禁用
    'linebreak-style': 'off',

    // 统一使用Unix换行符
    'linebreak-style': ['error', 'unix'],
  }
};

3. Prettier配置 在.prettierrc或.prettier.config.js中统一换行符设置：

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"  // 统一使用LF换行符
}

4. EditorConfig配置 在项目根目录创建.editorconfig文件：

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

项目级配置示例

完整的ESLint配置（.eslintrc.js）

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    '@react-native-community',
    'plugin:prettier/recommended', // 添加prettier插件
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
    'prettier',
  ],
  rules: {
    'prettier/prettier': 'error', // 让eslint报告prettier的格式错误
    'linebreak-style': ['error', 'unix'], // 统一使用Unix换行符
    'quotes': ['error', 'single'], // 统一使用单引号
    'semi': ['error', 'always'], // 统一分号
  },
};

package.json中的脚本配置

{
  "scripts": {
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
    "format": "prettier --write .",
    "pre-commit": "lint-staged"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ],
    "*.{json,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

最佳实践建议

1. 使用husky和lint-staged 安装依赖：

npm install --save-dev husky lint-staged

配置package.json：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  }
}

2. 团队约定

在项目README中明确说明代码规范要求
提供IDE配置文件模板（如.vscode/settings.json）
定期进行代码审查，确保规范执行

3. 持续集成 在CI/CD流程中加入代码格式检查：

- name: Lint Check
  run: |
    npm run lint
    npm run format -- --check

总结

通过合理的ESLint和Prettier配置，结合Git的换行符处理策略，可以有效解决多人协作项目中的跨平台格式化问题。关键是要建立团队统一的编码规范，并通过工具链自动化执行，确保代码质量和协作效率。