JS 格式化与代码质量的关系

代码格式化不仅是美观问题，更与代码质量密切相关。良好的格式能暴露潜在问题，提升代码可维护性。

格式化如何提升代码质量

1. 暴露逻辑问题

// 未格式化，问题隐藏
if(condition)doSomething();doOther();

// 格式化后，问题暴露
if (condition)
    doSomething();
doOther();  // 这行不在 if 内！

// 正确写法
if (condition) {
    doSomething();
}
doOther();

2. 发现死代码

// 格式化后更容易发现
function process() {
    var data = fetchData();
    return data;
    
    // 以下代码永远不会执行
    console.log('processing...');
    transform(data);
}

3. 识别重复代码

// 格式化后，重复模式更明显
function handleA() {
    validate();
    process();
    save();
    notify();
}

function handleB() {
    validate();
    process();
    save();
    notify();
}

// 发现重复，可以提取公共函数

格式规范与代码质量

1. 一致的命名

// 不一致，难以理解
function getUserData() { }
function fetch_post_list() { }
function LoadComments() { }

// 一致，清晰易懂
function getUserData() { }
function getPostList() { }
function getComments() { }

2. 合理的空行

// 无空行，逻辑混杂
function processOrder(order) {
    validate(order);
    var total = calculateTotal(order);
    if (total > 1000) {
        applyDiscount(order);
    }
    save(order);
    sendEmail(order);
    updateInventory(order);
}

// 合理空行，逻辑分组
function processOrder(order) {
    // 验证
    validate(order);
    
    // 计算
    var total = calculateTotal(order);
    if (total > 1000) {
        applyDiscount(order);
    }
    
    // 持久化
    save(order);
    
    // 通知
    sendEmail(order);
    updateInventory(order);
}

3. 适当的注释

// 无注释，意图不明
if (status === 3) {
    process();
}

// 有注释，意图清晰
// 状态 3 表示订单已支付，可以开始处理
if (status === PAYMENT_CONFIRMED) {
    process();
}

格式化检查工具

ESLint

// .eslintrc.js
module.exports = {
    rules: {
        // 格式相关
        'indent': ['error', 4],
        'semi': ['error', 'always'],
        'quotes': ['error', 'single'],
        'comma-dangle': ['error', 'always-multiline'],
        
        // 质量相关
        'no-unused-vars': 'error',
        'no-unreachable': 'error',
        'eqeqeq': 'error',
        'curly': 'error',
        'no-eval': 'error'
    }
};

Prettier

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 100
}

代码审查中的格式化

审查清单

## 代码格式检查

### 基础格式
- [ ] 缩进统一
- [ ] 分号使用一致
- [ ] 引号风格统一
- [ ] 空行合理

### 命名规范
- [ ] 变量名有意义
- [ ] 函数名描述行为
- [ ] 常量全大写
- [ ] 类名 PascalCase

### 代码结构
- [ ] 函数长度合理（< 50 行）
- [ ] 嵌套层级合理（< 4 层）
- [ ] 单一职责原则
- [ ] 无重复代码

自动化审查

# GitHub Actions
name: Code Review
on: [pull_request]
jobs:
    review:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - run: npm ci
            - run: npm run lint
            - run: npm run format:check

格式化与重构

1. 格式化作为重构第一步

// 重构前：先格式化
function process(d){var r=[];for(var i=0;i<d.length;i++){if(d[i].active){r.push(d[i].value*2)}}return r}

// 格式化后
function process(data) {
    var result = [];
    for (var i = 0; i < data.length; i++) {
        if (data[i].active) {
            result.push(data[i].value * 2);
        }
    }
    return result;
}

// 然后重构为现代语法
function process(data) {
    return data
        .filter(item => item.active)
        .map(item => item.value * 2);
}

2. 格式化发现重构机会

// 格式化后，重复模式明显
function createUser(name, age, email) {
    var user = {};
    user.name = name;
    user.age = age;
    user.email = email;
    return user;
}

function createPost(title, content, author) {
    var post = {};
    post.title = title;
    post.content = content;
    post.author = author;
    return post;
}

// 重构：使用工厂函数或类
function create(type, data) {
    return { ...data, type, createdAt: new Date() };
}

团队实践

1. 渐进式引入

# 第一步：只格式化新文件
# 第二步：修改旧文件时顺带格式化
# 第三步：全量格式化（选择低峰期）

2. 格式化与业务分离

# 单独的格式化 PR，不与业务代码混合
git checkout -b chore/format-code
npx prettier --write "src/**/*.js"
git commit -m "chore: format code with Prettier"

3. 度量代码质量

// 使用工具度量代码质量
const { execSync } = require('child_process');

// ESLint 问题数
const eslintIssues = execSync('npx eslint src/ --format json').toString();
const issues = JSON.parse(eslintIssues);
const totalIssues = issues.reduce((sum, file) => sum + file.errorCount + file.warningCount, 0);

console.log(`代码质量问题: ${totalIssues}`);

总结

代码格式化是代码质量的基础。通过统一的格式规范，可以暴露潜在问题、提升可读性、降低维护成本。将格式化集成到开发流程中，是专业团队的标配。