如何使用 JS 格式化工具提升开发效率 - 极速工具箱

在快节奏的前端开发中，手动格式化代码是低效的。掌握格式化工具的正确使用方式，能显著提升开发效率。

工具选择

在线工具

适用场景：临时处理、快速查看

优势：

无需安装
跨平台
即时使用

推荐：本工具的 JS 格式化功能

编辑器插件

适用场景：日常开发

编辑器	推荐插件
VS Code	Prettier
WebStorm	内置格式化
Sublime	JsFormat
Vim/Neovim	coc-prettier

命令行工具

适用场景：批量处理、CI/CD

# Prettier
npx prettier --write "src/**/*.js"

# ESLint
npx eslint --fix "src/**/*.js"

工作流集成

1. 保存时自动格式化

VS Code

// settings.json
{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

WebStorm

Settings > Languages & Frameworks > JavaScript > Prettier
- On save: 勾选

2. Git Hook 自动格式化

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

3. CI/CD 检查

# .github/workflows/lint.yml
name: Lint
on: [push, pull_request]
jobs:
    lint:
        runs-on: ubuntu-latest
        steps:
            - uses: actions/checkout@v3
            - uses: actions/setup-node@v3
            - run: npm ci
            - run: npm run lint
            - run: npm run format:check

高效使用技巧

1. 快捷键

VS Code:
- 格式化文档：Shift + Alt + F
- 格式化选区：Ctrl + K, Ctrl + F
- 快速修复：Ctrl + .

WebStorm:
- 格式化代码：Ctrl + Alt + L (Win) / Cmd + Option + L (Mac)
- 优化导入：Ctrl + Alt + O

2. 局部格式化

// prettier-ignore
const uglyCode = {a:1,b:2,c:3,d:4,e:5};

// 或使用注释控制
// prettier-ignore-start
const special = {
    custom: 'formatting'
};
// prettier-ignore-end

3. 批量处理

# 格式化整个项目
npx prettier --write "src/**/*.{js,ts,jsx,tsx}"

# 检查格式（不修改）
npx prettier --check "src/**/*.js"

# 只格式化修改的文件
git diff --name-only --diff-filter=d | grep '\.js$' | xargs npx prettier --write

团队协作

1. 统一配置

// .prettierrc（提交到仓库）
{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "trailingComma": "es5",
    "printWidth": 100
}

// .editorconfig
root = true

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

2. 代码审查

## 格式规范检查清单

- [ ] 代码已格式化
- [ ] 无格式相关的 diff
- [ ] 导入已排序
- [ ] 无多余空行

3. 新人引导

## 开发环境设置

1. 安装 VS Code
2. 安装 Prettier 插件
3. 安装 ESLint 插件
4. 运行 `npm install`
5. 确认保存时自动格式化已开启

常见问题

问题一：格式化后代码被破坏

原因：格式化工具不理解特殊语法

解决：

// 使用注释跳过
// prettier-ignore
const special = eval('...');

问题二：团队配置不一致

原因：个人配置覆盖了项目配置

解决：

// .vscode/settings.json（项目级）
{
    "prettier.configPath": ".prettierrc"
}

问题三：格式化速度慢

原因：大文件或网络问题

解决：

使用本地安装而非 npx
排除不需要格式化的目录
使用缓存

性能优化

1. 排除不需要格式化的文件

// .prettierignore
node_modules/
dist/
build/
coverage/
*.min.js

2. 增量格式化

# 只格式化 git 修改的文件
git diff --name-only --diff-filter=ACM | grep '\.js$' | xargs npx prettier --write

3. 缓存机制

// 自定义脚本，只格式化修改的文件
const { execSync } = require('child_process');
const fs = require('fs');
const crypto = require('crypto');

function getHash(content) {
    return crypto.createHash('md5').update(content).digest('hex');
}

// 检查缓存，跳过未修改的文件

最佳实践

项目初始化时配置：不要等到代码混乱后再格式化
自动化一切：保存时格式化、提交时检查
让工具决定：减少人工干预，避免风格争论
定期更新工具：获取最新的格式化规则
文档化规范：让新人快速了解团队风格

总结

JS 格式化工具是提升开发效率的利器。通过正确的配置、工作流集成和团队协作，可以让开发者专注于业务逻辑，而非代码格式。