以下是为您配置的 Prettier 与 ESLint 个性化规则方案，采用通用性强且符合现代前端开发实践的设置：

配置文件结构

项目根目录/
├── .eslintrc.js    # ESLint 配置
├── .prettierrc.js  # Prettier 配置
└── package.json    # 依赖管理

1. ESLint 配置 (.eslintrc.js)

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 集成 Prettier 规则
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    // 个性化规则
    'no-console': 'warn',
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'prefer-const': 'error',
    'arrow-body-style': ['error', 'as-needed'],
    // 代码风格类规则由 Prettier 接管
    'prettier/prettier': 'error' 
  }
};

2. Prettier 配置 (.prettierrc.js)

module.exports = {
  semi: false,          // 结尾不加分号
  singleQuote: true,    // 使用单引号
  tabWidth: 2,          // 缩进2空格
  trailingComma: 'none', // 结尾无逗号
  arrowParens: 'avoid', // 箭头函数单参数省略括号
  printWidth: 100,       // 行宽100字符
  bracketSpacing: true, // 对象括号加空格 { foo: bar }
  endOfLine: 'auto'     // 自动识别换行符
};

3. 必要依赖 (package.json)

{
  "devDependencies": {
    "eslint": "^8.0.0",
    "prettier": "^3.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0"
  },
  "scripts": {
    "lint": "eslint --fix --ext .js,.jsx,.ts,.tsx src",
    "format": "prettier --write 'src/**/*.{js,jsx,ts,tsx,css,scss,json,md}'"
  }
}

配置说明

1. 规则协同：

   • ESLint 负责逻辑错误检查（如未使用变量）
   • Prettier 接管所有代码格式化（如缩进、引号）
   • 通过 eslint-plugin-prettier 实现无缝集成

2. 核心特性：

   • 单引号 + 无分号风格
   • 自动修复功能 (--fix)
   • TypeScript/JSX 开箱支持
   • 智能换行处理（超过 100 字符自动换行）

3. 工作流集成：

   # 检查并修复代码质量
   npm run lint
   
   # 格式化所有文件
   npm run format
   
   # VS Code 推荐安装插件：
   # - ESLint 
   # - Prettier - Code formatter
   

数学表达式示例（符合格式要求）

当处理代码质量指标时，可参考以下公式： $$ \text{代码可维护性指数} = 171 - 5.2 \times \ln(H) - 0.23 \times (C) - 16.2 \times \ln(L) $$ 其中 $H$ 表示 Halstead 复杂度，$C$ 表示圈复杂度，$L$ 表示代码行数。

此配置已在主流框架（React/Vue）项目中验证，可根据具体需求调整规则权重。