跳到主要内容

Cursor 中的代码自动格式化

提示

Cursor 提供强大的代码格式化功能，帮助您在项目中保持一致的代码风格。

设置格式化工具​

内置格式化工具​

Cursor 内置了支持多种语言的格式化工具。使用方法：

  1. 打开命令面板（Ctrl/Cmd + Shift + P）
  2. 输入"Format Document"
  3. 按回车键

常用格式化工具​

# 安装 Prettier
npm install --save-dev prettier

# 创建配置文件
echo {} > .prettierrc.json

配置文件​

Prettier 配置​

.prettierrc.json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

ESLint 配置​

.eslintrc.json
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "prettier"
  ],
  "rules": {
    "indent": ["error", 2],
    "linebreak-style": ["error", "unix"],
    "quotes": ["error", "single"],
    "semi": ["error", "always"]
  }
}

保存时格式化​

启用自动格式化​

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

特定语言设置​

{
  "[python]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "ms-python.python"
  },
  "[java]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "redhat.java"
  }
}

键盘快捷键​

默认格式化快捷键：

操作Windows/LinuxmacOS
格式化文档Shift + Alt + FShift + Option + F
格式化选中内容Ctrl + K Ctrl + FCmd + K Cmd + F

高级配置​

忽略文件​

.prettierignore
# 构建输出
dist/
build/

# 依赖
node_modules/

# 生成的文件
*.generated.*

ESLint 集成​

.eslintrc.json
{
  "extends": [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

自定义格式化规则​

代码风格强制执行​

.prettierrc.json
{
  "overrides": [
    {
      "files": "*.component.ts",
      "options": {
        "printWidth": 120,
        "singleQuote": true
      }
    },
    {
      "files": "*.spec.ts",
      "options": {
        "printWidth": 80,
        "semi": true
      }
    }
  ]
}

项目特定规则​

.editorconfig
root = true

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

[*.{js,ts}]
quote_type = single

[*.py]
indent_size = 4

故障排除​

常见问题​

  1. 格式化不生效

    • 检查格式化工具安装
    • 验证配置文件
    • 确保文件未被忽略

  2. 工具之间的冲突

    .vscode/settings.json
    {
      "editor.formatOnSave": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
      },
      "eslint.format.enable": false
    }

  3. 性能问题

    {
      "editor.formatOnSaveTimeout": 5000,
      "editor.formatOnPaste": false
    }

最佳实践​

1. 版本控制​

.gitignore
# 不要忽略格式化配置文件
!.prettierrc
!.eslintrc
!.editorconfig

# 忽略缓存文件
.prettier-cache
.eslintcache

2. 团队一致性​

创建共享配置：

.vscode/extensions.json
{
  "recommendations": [
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint"
  ]
}

3. 提交前钩子​

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

IDE 集成​

自定义快捷键​

keybindings.json
[
  {
    "key": "ctrl+shift+i",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider"
  }
]

工作区设置​

.vscode/settings.json
{
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": true,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}
提示

记得提交您的格式化配置文件，以确保团队中的格式化一致性！

相关资源​