Back to Details

code-formatter-installer

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Code Formatter & Linter Installer

代码格式化与代码检查工具安装器

Establish consistent code formatting and linting across your project.
在项目中建立统一的代码格式化与代码检查规范。

Core Workflow

核心流程

  1. Detect stack: Identify language/framework (JS/TS, Python, Go, Rust)
  2. Choose tools: Select appropriate formatters and linters
  3. Generate configs: Create config files with best-practice rules
  4. Add scripts: Include npm/package scripts for format/lint
  5. Configure editor: Provide VS Code, IntelliJ, Vim settings
  6. Setup pre-commit: Add git hooks for automatic formatting
  7. CI integration: Suggest GitHub Actions or CI config
  1. 检测技术栈：识别语言/框架（JS/TS、Python、Go、Rust）
  2. 选择工具：挑选合适的格式化工具与代码检查工具
  3. 生成配置：创建遵循最佳实践规则的配置文件
  4. 添加脚本：包含用于格式化/检查的npm/package脚本
  5. 配置编辑器：提供VS Code、IntelliJ、Vim的设置方案
  6. 设置Git钩子：添加自动格式化的git hooks
  7. CI集成：建议GitHub Actions或CI配置

Tool Selection by Stack

按技术栈选择工具

JavaScript/TypeScript

JavaScript/TypeScript

  • Formatter: Prettier
  • Linter: ESLint + typescript-eslint
  • Editor: EditorConfig
  • Hooks: Husky + lint-staged
  • 格式化工具：Prettier
  • 代码检查工具：ESLint + typescript-eslint
  • 编辑器配置：EditorConfig
  • 钩子工具：Husky + lint-staged

Python

Python

  • Formatter: Black + isort
  • Linter: Ruff or Flake8 + mypy
  • Hooks: pre-commit
  • 格式化工具：Black + isort
  • 代码检查工具：Ruff 或 Flake8 + mypy
  • 钩子工具：pre-commit

Go

Go

  • Formatter: gofmt + goimports
  • Linter: golangci-lint
  • 格式化工具：gofmt + goimports
  • 代码检查工具：golangci-lint

Rust

Rust

  • Formatter: rustfmt
  • Linter: clippy
  • 格式化工具：rustfmt
  • 代码检查工具：clippy

Configuration Templates

配置模板

Prettier (.prettierrc.json)

Prettier (.prettierrc.json)

json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid"
}
json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "arrowParens": "avoid"
}

ESLint (.eslintrc.json)

ESLint (.eslintrc.json)

json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}
json
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:react/recommended",
    "prettier"
  ],
  "rules": {
    "no-console": "warn",
    "@typescript-eslint/no-unused-vars": "error"
  }
}

EditorConfig (.editorconfig)

EditorConfig (.editorconfig)

ini
root = true

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

[*.py]
indent_size = 4

[*.md]
trim_trailing_whitespace = false
ini
root = true

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

[*.py]
indent_size = 4

[*.md]
trim_trailing_whitespace = false

Python (pyproject.toml)

Python (pyproject.toml)

toml
[tool.black]
line-length = 100
target-version = ['py311']

[tool.isort]
profile = "black"
line_length = 100

[tool.mypy]
strict = true
warn_return_any = true
toml
[tool.black]
line-length = 100
target-version = ['py311']

[tool.isort]
profile = "black"
line_length = 100

[tool.mypy]
strict = true
warn_return_any = true

Package Scripts

包脚本

JavaScript/TypeScript (package.json)

JavaScript/TypeScript (package.json)

json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "typecheck": "tsc --noEmit"
  }
}
json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "lint": "eslint . --ext .ts,.tsx,.js,.jsx",
    "lint:fix": "eslint . --ext .ts,.tsx,.js,.jsx --fix",
    "typecheck": "tsc --noEmit"
  }
}

Python

Python

bash
undefined
bash
undefined

Makefile or scripts

Makefile 或脚本

format: black . isort .
lint: ruff check . mypy .
format-check: black --check . isort --check .
undefined
format: black . isort .
lint: ruff check . mypy .
format-check: black --check . isort --check .
undefined

Git Hooks Setup

Git钩子设置

Husky + lint-staged (Node.js)

Husky + lint-staged (Node.js)

  1. Install dependencies:
bash
npm install --save-dev husky lint-staged
npx husky init
  1. Configure lint-staged (.lintstagedrc.json):
json
{
  "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "*.{json,md,yml}": ["prettier --write"]
}
  1. Add pre-commit hook (.husky/pre-commit):
bash
#!/bin/sh
npx lint-staged
  1. 安装依赖：
bash
npm install --save-dev husky lint-staged
npx husky init
  1. 配置lint-staged (.lintstagedrc.json)：
json
{
  "*.{ts,tsx,js,jsx}": ["eslint --fix", "prettier --write"],
  "*.{json,md,yml}": ["prettier --write"]
}
  1. 添加pre-commit钩子 (.husky/pre-commit)：
bash
#!/bin/sh
npx lint-staged

pre-commit (Python)

pre-commit (Python)

  1. Create .pre-commit-config.yaml:
yaml
repos:
  - repo: https://github.com/psf/black
    rev: 24.1.1
    hooks:
      - id: black

  - repo: https://github.com/pycqa/isort
    rev: 5.13.2
    hooks:
      - id: isort

  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.2.0
    hooks:
      - id: ruff
        args: [--fix]

  - repo: https://github.com/pre-commit/mirrors-mypy
    rev: v1.8.0
    hooks:
      - id: mypy
  1. Install:
bash
pip install pre-commit
pre-commit install
  1. 创建 .pre-commit-config.yaml：
yaml
repos:
  - repo: https://github.com/psf/black
    rev: 24.1.1
    hooks:
      - id: black

  - repo: https://github.com/pycqa/isort
    rev: 5.13.2
    hooks:
      - id: isort

  - repo: https://github.com/astral-sh/ruff-pre-commit
    rev: v0.2.0
    hooks:
      - id: ruff
        args: [--fix]

  - repo: https://github.com/pre-commit/mirrors-mypy
    rev: v1.8.0
    hooks:
      - id: mypy
  1. 安装：
bash
pip install pre-commit
pre-commit install

Editor Configuration

编辑器配置

VS Code (settings.json)

VS Code (settings.json)

json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}
json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter"
  }
}

VS Code Extensions (.vscode/extensions.json)

VS Code 扩展 (.vscode/extensions.json)

json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "ms-python.black-formatter"
  ]
}
json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "editorconfig.editorconfig",
    "ms-python.black-formatter"
  ]
}

IntelliJ/WebStorm

IntelliJ/WebStorm

  • Enable: Settings → Languages & Frameworks → JavaScript → Prettier → On save
  • Enable: Settings → Tools → Actions on Save → Reformat code
  • 启用：设置 → 语言与框架 → JavaScript → Prettier → 保存时自动格式化
  • 启用：设置 → 工具 → 保存时执行的操作 → 重新格式化代码

CI Integration

CI集成

GitHub Actions (.github/workflows/lint.yml)

GitHub Actions (.github/workflows/lint.yml)

yaml
name: Lint

on: [push, 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 format:check
      - run: npm run lint
      - run: npm run typecheck
yaml
name: Lint

on: [push, 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 format:check
      - run: npm run lint
      - run: npm run typecheck

Pre-merge checks

合并前检查

yaml
undefined
yaml
undefined

.github/workflows/pr-checks.yml

.github/workflows/pr-checks.yml

  • name: Check formatting run: | npm run format:check || { echo "Code is not formatted. Run 'npm run format' locally." exit 1 }
undefined
  • name: Check formatting run: | npm run format:check || { echo "Code is not formatted. Run 'npm run format' locally." exit 1 }
undefined

Installation Checklist

安装检查清单

For every setup, provide:
  • Config files (.prettierrc, .eslintrc, .editorconfig, etc.)
  • Ignore files (.prettierignore, .eslintignore)
  • Package scripts (format, lint, format:check, lint:fix)
  • Git hooks (husky/pre-commit)
  • Editor settings (.vscode/settings.json)
  • CI workflow (.github/workflows/lint.yml)
  • Documentation (README section on running lint/format)
每次设置时，需确保包含以下内容：
  • 配置文件（.prettierrc、.eslintrc、.editorconfig等）
  • 忽略文件（.prettierignore、.eslintignore）
  • 包脚本（format、lint、format:check、lint:fix）
  • Git钩子（husky/pre-commit）
  • 编辑器设置（.vscode/settings.json）
  • CI工作流（.github/workflows/lint.yml）
  • 文档说明（README中关于运行检查/格式化的章节）

Best Practices

最佳实践

  1. Run formatter last: Prettier should override other formatting rules
  2. Extend configs: Use popular presets (Airbnb, Standard, etc.)
  3. Ignore generated files: Add build outputs to ignore files
  4. Make hooks skippable: Allow 
    git commit --no-verify
    for emergencies
  5. Document process: Add "Code Style" section to CONTRIBUTING.md
  6. Test on clean install: Ensure configs work without local editor setup
  7. Keep rules minimal: Start strict, relax if needed
  1. 最后运行格式化工具：Prettier应覆盖其他格式化规则
  2. 扩展配置：使用流行的预设（Airbnb、Standard等）
  3. 忽略生成文件：将构建输出添加到忽略文件中
  4. 允许跳过钩子：紧急情况下允许使用
    git commit --no-verify
  5. 记录流程：在CONTRIBUTING.md中添加「代码风格」章节
  6. 在全新环境测试：确保无需本地编辑器设置即可正常使用配置
  7. 保持规则精简：初始严格，必要时再放宽

Common Configurations

常见配置

See 
assets/configs/
for ready-to-use config files:
  • Next.js + TypeScript
  • React + TypeScript
  • Node.js + TypeScript
  • Python FastAPI
  • Python Django
可查看
assets/configs/
获取即用型配置文件：
  • Next.js + TypeScript
  • React + TypeScript
  • Node.js + TypeScript
  • Python FastAPI
  • Python Django

Bypass Instructions (Emergencies)

紧急绕过说明

bash
undefined
bash
undefined

Skip pre-commit hooks

跳过pre-commit钩子

git commit --no-verify
git commit --no-verify

Skip CI checks (not recommended)

跳过CI检查（不推荐）

git push --no-verify

Document when bypass is acceptable (hotfixes, emergencies only).
git push --no-verify

请记录可接受绕过的场景（仅适用于热修复、紧急情况）。