typescript - Prettier 没有按规定缩进

Question

Prettier 继续错误地格式化我的代码。我希望制表符有 4 个空格(第二张图片)，但它忽略了编辑器设置并执行 2 个(第一张图片)。

我知道它更漂亮，因为当我禁用它时，代码会为我正确缩进。不幸的是，prettier 的其他功能丢失了。我已经尝试卸载并重新安装。

那么，我缺少哪些设置更改？我肯定错过了什么。任何建议都会很棒。谢谢。

这是我更改过的所有 prettier 设置。

"prettier.singleQuote": true,
"prettier.eslintIntegration": true,
"prettier.tabWidth": 4,
"prettier.useTabs": true

Answer 1

您可以尝试以下方法来更改缩进/制表符宽度:

1. 在您的编辑器窗口底部，检查“空格:2”(以防您的代码缩进了 2 个空格)。单击它并选择 Indent using Tab 并根据需要选择值。

<强>2。更改 Visual Studio Code 设置中的 Prettier 选项: 通过 File > Preferences > Settings 或按 Ctrl + 转到 Visual Studio Code 设置,。键入“Prettier”以显示与 Prettier 相关的所有设置并查找 Prettier:Tab Width。根据需要更改值。

<强>3。 settings.json/用户设置文件:将以下行添加到 settings.json 文件，该文件包含与 VS Code 关联的所有配置。

"prettier.tabWidth": 4,
"prettier.useTabs": true,

根据您的平台，用户设置文件/settings.json 位于此处:

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

访问https://code.visualstudio.com/docs/getstarted/settings有关用户设置文件/settings.json 的更多信息

<强>4。如果您有 .editorconfig 文件: 检查您的项目目录的根目录中是否有名为 .editorconfig 的文件。如果您有该文件，请打开它并确保根据需要更改文件中的值。下面给出的代码用于设置 indent_style Tab 和 indent_size 4:

indent_style = tabs
indent_size = 4

<强>5。如果您没有 .editorconfig 文件: 如果您的项目根目录中没有 .editorconfig 文件，您可以创建一个名为 .prettierrc 的文件并将以下内容添加到文件中

{
    "singleQuote": true,
    "printWidth": 80,
    "editor.formatOnSave": true,
    "proseWrap": "always",
    "tabWidth": 4,
    "requireConfig": false,
    "useTabs": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "semi": true
}

你可以根据自己的需要修改