Cursor · Cursor Prettier 统一 4 Spaces 缩进

问题

在 .prettierrc 中设置：

{
    "tabWidth": 4,
    "useTabs": false
}

使用 Prettier 格式化后可以得到 4 Spaces，但打开 .mdx 文件时，Cursor 底部仍可能显示：

Spaces: 2

此时按 Tab、回车或自动缩进时，编辑器仍可能按照 2 Spaces 处理。

原因是 Prettier 和 Cursor 的缩进配置是两套独立配置：

配置	作用
`prettier.tabWidth`	Prettier 格式化时的缩进宽度
`editor.tabSize`	Cursor 编辑器中的缩进宽度
`editor.insertSpaces`	按 Tab 时插入空格而非 Tab 字符
`editor.detectIndentation`	是否根据当前文件内容自动推断缩进

Prettier 配置

项目根目录 .prettierrc：

{
    "printWidth": 120,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "all",
    "arrowParens": "always",
    "bracketSameLine": true,
    "jsxSingleQuote": false,
    "plugins": ["prettier-plugin-tailwindcss"]
}

核心配置：

{
    "tabWidth": 4,
    "useTabs": false
}

表示 Prettier 使用 4 个空格进行缩进。

Cursor 配置

项目级配置文件：

.vscode/settings.json

针对 MDX 设置：

{
    "js/ts.tsdk.path": "node_modules/typescript/lib",
 
    "editor.formatOnSave": true,
 
    "[mdx]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true,
        "editor.detectIndentation": false,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

其中最关键的是：

"editor.detectIndentation": false

Cursor 默认可以根据文件已有内容自动检测缩进。如果一个 MDX 文件原本大量使用 2 Spaces，即使设置了：

"editor.tabSize": 4

也可能被自动检测结果覆盖。

关闭自动检测后，MDX 文件会稳定使用配置的 4 Spaces。

最终关系

.prettierrc
    ↓
tabWidth: 4
    ↓
控制 Prettier 格式化结果
 
.vscode/settings.json
    ↓
editor.tabSize: 4
editor.detectIndentation: false
    ↓
控制 Cursor 编辑器缩进
 
最终
    ↓
编辑器：Spaces: 4
格式化：4 Spaces

这样可以保证 Cursor 编辑与 Prettier 格式化统一使用 4 Spaces。