Back to Details

lint-format

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Lint & Format

代码检查与格式化

Set up linting and formatting for consistent code quality.
配置代码检查与格式化，确保代码质量一致。

ESLint (JavaScript/TypeScript)

ESLint（JavaScript/TypeScript）

Setup (Flat Config - ESLint 9+)

配置（Flat Config - ESLint 9+）

bash
npm init @eslint/config@latest
bash
npm init @eslint/config@latest

or

or

npm install -D eslint @eslint/js typescript-eslint

```javascript
// eslint.config.js
import js from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/no-explicit-any": "warn",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
  {
    ignores: ["dist/", "node_modules/", "*.config.js"],
  },
];
npm install -D eslint @eslint/js typescript-eslint

```javascript
// eslint.config.js
import js from "@eslint/js";
import tseslint from "typescript-eslint";

export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    rules: {
      "no-unused-vars": "off",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/no-explicit-any": "warn",
      "no-console": ["warn", { allow: ["warn", "error"] }],
    },
  },
  {
    ignores: ["dist/", "node_modules/", "*.config.js"],
  },
];

With React

结合React使用

bash
npm install -D eslint-plugin-react eslint-plugin-react-hooks
javascript
// eslint.config.js
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";

export default [
  // ...base config
  {
    plugins: { react, "react-hooks": reactHooks },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
    },
    settings: {
      react: { version: "detect" },
    },
  },
];
bash
npm install -D eslint-plugin-react eslint-plugin-react-hooks
javascript
// eslint.config.js
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";

export default [
  // ...base config
  {
    plugins: { react, "react-hooks": reactHooks },
    rules: {
      ...reactHooks.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",
      "react/prop-types": "off",
    },
    settings: {
      react: { version: "detect" },
    },
  },
];

Run

运行

bash
npx eslint .
npx eslint --fix .
npx eslint src/
npx eslint "src/**/*.{ts,tsx}"
bash
npx eslint .
npx eslint --fix .
npx eslint src/
npx eslint "src/**/*.{ts,tsx}"

Prettier

Prettier

Setup

配置

bash
npm install -D prettier eslint-config-prettier
json
// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}
// .prettierignore
dist
node_modules
coverage
*.min.js
pnpm-lock.yaml
bash
npm install -D prettier eslint-config-prettier
json
// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always",
  "endOfLine": "lf"
}
// .prettierignore
dist
node_modules
coverage
*.min.js
pnpm-lock.yaml

ESLint + Prettier

ESLint + Prettier

javascript
// eslint.config.js
import prettier from "eslint-config-prettier";

export default [
  // ...other configs
  prettier,  // Must be last to override conflicting rules
];
javascript
// eslint.config.js
import prettier from "eslint-config-prettier";

export default [
  // ...other configs
  prettier,  // Must be last to override conflicting rules
];

Run

运行

bash
npx prettier --write .
npx prettier --check .
npx prettier --write "src/**/*.{ts,tsx,css,json}"
bash
npx prettier --write .
npx prettier --check .
npx prettier --write "src/**/*.{ts,tsx,css,json}"

Ruff (Python - Linter + Formatter)

Ruff（Python - 代码检查器 + 格式化工具）

Setup

配置

bash
pip install ruff
toml
undefined
bash
pip install ruff
toml
undefined

pyproject.toml

pyproject.toml

[tool.ruff] target-version = "py312" line-length = 100
[tool.ruff.lint] select = [ "E", # pycodestyle errors "W", # pycodestyle warnings "F", # pyflakes "I", # isort "N", # pep8-naming "UP", # pyupgrade "B", # flake8-bugbear "SIM", # flake8-simplify "TCH", # flake8-type-checking ] ignore = [ "E501", # line too long (handled by formatter) ]
[tool.ruff.lint.isort] known-first-party = ["myproject"]
[tool.ruff.format] quote-style = "double" indent-style = "space"
undefined
[tool.ruff] target-version = "py312" line-length = 100
[tool.ruff.lint] select = [ "E", # pycodestyle errors "W", # pycodestyle warnings "F", # pyflakes "I", # isort "N", # pep8-naming "UP", # pyupgrade "B", # flake8-bugbear "SIM", # flake8-simplify "TCH", # flake8-type-checking ] ignore = [ "E501", # line too long (handled by formatter) ]
[tool.ruff.lint.isort] known-first-party = ["myproject"]
[tool.ruff.format] quote-style = "double" indent-style = "space"
undefined

Run

运行

bash
undefined
bash
undefined

Lint

Lint

ruff check . ruff check --fix .
ruff check . ruff check --fix .

Format

Format

ruff format . ruff format --check .
undefined
ruff format . ruff format --check .
undefined

Black (Python Formatter)

Black（Python格式化工具）

bash
pip install black
bash
pip install black

Format

Format

black . black --check . black --diff .

```toml
black . black --check . black --diff .

```toml

pyproject.toml

pyproject.toml

[tool.black] line-length = 100 target-version = ["py312"]
undefined
[tool.black] line-length = 100 target-version = ["py312"]
undefined

mypy (Python Type Checker)

mypy（Python类型检查器）

bash
pip install mypy

mypy src/
mypy --strict src/
toml
undefined
bash
pip install mypy

mypy src/
mypy --strict src/
toml
undefined

pyproject.toml

pyproject.toml

[tool.mypy] python_version = "3.12" strict = true warn_return_any = true warn_unused_configs = true disallow_untyped_defs = true
undefined
[tool.mypy] python_version = "3.12" strict = true warn_return_any = true warn_unused_configs = true disallow_untyped_defs = true
undefined

EditorConfig

EditorConfig

ini
undefined
ini
undefined

.editorconfig

.editorconfig

root = true
[*] end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true charset = utf-8
[*.{js,ts,tsx,json,css,yml,yaml}] indent_style = space indent_size = 2
[*.py] indent_style = space indent_size = 4
[*.md] trim_trailing_whitespace = false
[Makefile] indent_style = tab
undefined
root = true
[*] end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true charset = utf-8
[*.{js,ts,tsx,json,css,yml,yaml}] indent_style = space indent_size = 2
[*.py] indent_style = space indent_size = 4
[*.md] trim_trailing_whitespace = false
[Makefile] indent_style = tab
undefined

Pre-commit Integration

预提交集成

bash
undefined
bash
undefined

Install

Install

npm install -D husky lint-staged
npm install -D husky lint-staged

Setup husky

Setup husky

npx husky init
npx husky init

.husky/pre-commit

.husky/pre-commit

npx lint-staged

```json
// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"],
    "*.py": ["ruff check --fix", "ruff format"]
  }
}
npx lint-staged

```json
// package.json
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,yml}": ["prettier --write"],
    "*.py": ["ruff check --fix", "ruff format"]
  }
}

Python pre-commit

Python预提交

yaml
undefined
yaml
undefined

.pre-commit-config.yaml

.pre-commit-config.yaml

repos:

```bash
pip install pre-commit
pre-commit install
pre-commit run --all-files
repos:

```bash
pip install pre-commit
pre-commit install
pre-commit run --all-files

package.json Scripts

package.json脚本

json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "check": "npm run lint && npm run format:check && npm run typecheck"
  }
}
json
{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint --fix .",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "typecheck": "tsc --noEmit",
    "check": "npm run lint && npm run format:check && npm run typecheck"
  }
}

Reference

参考资料

For CI integration and configuration recipes: 
references/configs.md
如需了解CI集成和配置方案，请查看：
references/configs.md