代码质量工具大揭秘：ESLint、Prettier、Black、Ruff 2026 版
对比 ESLint、Prettier、Black、Ruff 等代码质量工具。格式化、Linting、自动修复。提升代码可维护性。
- JavaScript
- Python
- TypeScript
- MIT
- 更新于 2026-05-18
什么是代码质量工具？ #
代码质量工具帮助开发者写出「干净、一致、可维护」的代码。通过 Linting（检查）和 Formatting（格式化）。
工具分类 #
| 类型 | JavaScript | Python | 通用 |
|---|---|---|---|
| Linter | ESLint | flake8, pylint | golangci-lint |
| Formatter | Prettier | Black, YAPF | clang-format |
| Runner | — | Ruff | — |
JavaScript 生态 #
ESLint：JavaScript Linter #
// .eslintrc.json
{
"extends": ["eslint:recommended"],
"env": { "node": true, "es2021": true },
"rules": {
"no-unused-vars": "error",
"semi": ["error", "always"]
}
}
常见规则 #
| 规则 | 说明 |
|---|---|
no-console | 禁止 console |
no-debugger | 禁止 debugger |
prefer-const | 推荐 const |
no-var | 禁止 var |
Prettier：代码格式化 #
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5"
}
常用配置 #
| 配置 | 说明 |
|---|---|
semi | 分号 |
singleQuote | 单引号 |
tabWidth | 缩进宽度 |
printWidth | 行宽 |
ESLint + Prettier 集成 #
npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier
Python 生态 #
Black：自动格式化器 #
pip install black
black src/ --line-length 88
配置 #
# pyproject.toml
[tool.black]
line-length = 88
target-version = ['py310']
include = '\.pyi?$'
exclude = '''
/(
\.eggs
| \.git
| \.hg
| \.mypy_cache
| \.tox
| \.venv
| _build
| buck-out
| build
| dist
)/
'''
Ruff：超快 Linter + Formatter #
pip install ruff
ruff check src/
ruff format src/
pyproject.toml #
[tool.ruff]
line-length = 100
target-version = "py310"
[tool.ruff.lint]
select = ["E", "F", "I", "N"]
ignore = ["E501"]
[tool.ruff.lint.isort]
known-first-party = ["myapp"]
Flake8：经典 Linter #
pip install flake8
flake8 src/ --max-line-length=88
VS Code 配置 #
settings.json #
{
"[python]": {
"editor.defaultFormatter": "ms-python.black-formatter",
"editor.formatOnSave": true
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"eslint.enable": true,
"prettier.enable": true
}
工作区配置 #
// .vscode/settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true,
"source.organizeImports": true
}
}
CI/CD 集成 #
GitHub Actions #
- name: Lint
run: npm run lint
- name: Test
run: npm test
- name: Format Check
run: |
npx prettier --check .
python -m black --check .
pre-commit Hook #
# .pre-commit-config.yaml
repos:
- repo: https://github.com/psf/black
rev: 23.12.0
hooks:
- id: black
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.1.6
hooks:
- id: ruff
性能比较 #
| 工具 | 速度 | 功能 | 适合场景 |
|---|---|---|---|
| ESLint | 中等 | 丰富 | 大型 JS 项目 |
| Prettier | 极快 | 专注 | 格式化 |
| Black | 极快 | 固定 | Python 项目 |
| Ruff | 极快 | 全能 | Python 项目 |
| Flake8 | 中等 | 基础 | 轻量 Python |
代码格式最佳实践 #
目录结构 #
src/
├── __init__.py
├── main.py # <--- 79 字符内
├── config.py
└── utils/
└── helpers.py
导入排序 #
# 使用 isort
import os
import sys
from typing import List, Dict
import requests
from dotenv import load_dotenv
from .config import CONFIG
常见问题 #
Q: 为什么格式化后 Git 有变更？
答：格式化器修改了文件。提交前运行格式化工具。
Q: 如何禁用某个规则？
答：编辑配置，添加规则 ID 到 ignore 列表。
Q: 为什么 eslint 和 prettier 冲突？
答：用 eslint-config-prettier 禁用冲突规则。
总结 #
代码质量工具 = 0 警告。从 lint 到 format，自动化维护代码质量。
参考：eslint.org、prettierjs.com、black.readthedocs.io、ruff.py 更新：2026-05-18
💬 留言讨论