DT
开发者工具箱
开发工具

代码质量工具：ESLint、Prettier、SonarQube

介绍ESLint、Prettier、SonarQube等代码质量工具的使用方法和配置技巧，帮你的团队写出更规范的代码。

#代码质量 #ESLint #Prettier #SonarQube #Lint

为什么代码质量工具是必须的

“能跑就行”的代码，迟早会变成技术债务。代码质量工具能帮你在代码提交前就发现潜在问题，统一团队代码风格，减少Code Review中的无意义争论。

代码质量工具全景

工具类型用途语言
ESLintLinter代码规则检查JS/TS
PrettierFormatter代码格式化多语言
BiomeLinter+Formatter一体化工具JS/TS
SonarQube质量平台深度代码分析多语言
RuffLinter+FormatterPython代码质量Python
ClippyLinterRust代码建议Rust
golangci-lintLinterGo代码检查Go

ESLint：JavaScript/TypeScript的标准

ESLint是JS/TS生态中最重要的代码质量工具，几乎每个前端项目都会使用。

ESLint v9 Flat Config

2026年ESLint已经全面转向Flat Config（扁平配置），告别了复杂的.eslintrc。

// eslint.config.js
import js from '@eslint/js'
import tseslint from 'typescript-eslint'
import react from 'eslint-plugin-react'

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.{ts,tsx}'],
    plugins: {
      react,
    },
    rules: {
      'no-unused-vars': 'off',
      '@typescript-eslint/no-unused-vars': 'error',
      'react/prop-types': 'off',
      'no-console': 'warn',
    },
  },
  {
    ignores: ['dist/', 'node_modules/', '*.config.js'],
  },
]

常用ESLint规则

规则说明推荐级别
no-unused-vars未使用变量error
no-console禁止consolewarn
eqeqeq强制使用===error
no-var禁止varerror
prefer-const优先使用consterror
no-implicit-coercion禁止隐式类型转换warn

Prettier：统一代码格式

Prettier是一个”有主见”的代码格式化工具。它不关心代码逻辑，只管代码格式。

// .prettierrc
{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint + Prettier配合使用

这两个工具有规则重叠的地方，需要正确配置避免冲突：

# 安装兼容包
pnpm add -D eslint-config-prettier
// eslint.config.js 中添加prettier配置
import prettier from 'eslint-config-prettier'

export default [
  // ... 其他配置
  prettier,  // 放在最后，关闭与Prettier冲突的规则
]

Biome：新一代一体化工具

Biome（原Rome）是一个用Rust编写的一体化工具，速度极快。

# 安装Biome
pnpm add -D @biomejs/biome

# 初始化配置
pnpm biome init
// biome.json
{
  "formatter": {
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "suspicious": {
        "noExplicitAny": "warn"
      }
    }
  }
}

Biome vs ESLint+Prettier

维度BiomeESLint+Prettier
速度极快(Rust)慢(JS)
配置复杂度低(一个文件)高(多个配置文件)
生态/插件有限非常丰富
规则数量较少但在增长非常多
维护成本低中

我的建议：新项目可以试试Biome，旧项目继续用ESLint+Prettier。

SonarQube：企业级代码质量平台

SonarQube提供深度的代码分析，包括代码异味、安全漏洞、技术债务等维度。

SonarQube能检测什么

维度说明示例
Bug代码中的错误空指针引用
漏洞安全问题SQL注入、XSS
代码异味可维护性问题过长函数、重复代码
覆盖率测试覆盖行覆盖率、分支覆盖率
重复代码重复重复代码块

SonarQube版本

版本价格特色
Community免费基础分析，17种语言
Developer$150/年起分支分析+PR装饰
Enterprise$20000/年起安全报告+合规
SonarCloud免费(开源)云端版本

在CI/CD中集成代码质量检查

代码质量检查最好集成到CI/CD流程中，在PR时自动运行。

# GitHub Actions中运行ESLint
name: Code Quality

on: [pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npm run lint
      - run: npm run format:check

Git Hooks：提交前检查

用lint-staged + husky在git commit前自动检查代码：

# 安装
pnpm add -D husky lint-staged

# 初始化husky
pnpm exec husky init
// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md}": [
      "prettier --write"
    ]
  }
}
# .husky/pre-commit
pnpm exec lint-staged

这样每次提交代码时，只会检查暂存区的文件，既保证了代码质量，又不会太慢。

编辑器集成

代码质量工具的最佳体验是在编辑器中实时显示问题。VS Code中安装ESLint和Prettier插件，配合保存时自动修复，编码时就能保持代码规范。

// VS Code settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

团队代码规范建议

  1. 选一套规范并坚持：Airbnb/Standard/Google都可以，但要统一
  2. 配置放进仓库：所有配置文件入Git，保证团队一致
  3. CI强制检查：PR不过lint就不能合并
  4. 逐步引入：老项目不要一次性全开，逐步修复

更多关于Git工作流的最佳实践，也有助于团队保持一致的代码质量标准。

总结

代码质量工具是团队协作的基础设施。ESLint + Prettier是目前的主流方案，Biome是值得关注的新选择，SonarQube适合企业级深度分析。不管选哪个，关键是在团队中强制执行，让代码规范成为习惯而不是负担。