Prettier 没有按规定缩进

Question

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

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

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

以下是我更改的所有 prettier 设置。

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

Answer 1

您在使用 .editorconfig 吗？您可能需要更改（或设置）为

"editor.tabSize" : 4

还有。

Answer 2

我没有 .editorconfig 文件，但我正在使用 VS Code 并且需要将 "editor.tabSize": 4 添加到我的用户 settings.json 文件。

Answer 3

您可以尝试以下操作来更改 indentation/tab 宽度：

1. 在编辑器 window 的底部，检查 'Spaces: 2'（以防代码缩进 2 个空格）。单击它并选择 Indent using Tab 并根据需要选择值。

2。在 Visual Studio 代码设置中更改 Prettier 选项： 通过 File > Preferences > Settings 或按 转到 Visual Studio 代码设置Ctrl + ,。键入“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
}

您可以根据您的要求进行更改

Answer 4

只需在项目的根目录下创建 .prettierrc 命名文件并粘贴下面的代码

在.prettierrc

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

您可以在此处找到 git 问题：https://github.com/prettier/prettier-vscode/issues/344#issuecomment-360430551

Answer 5

我刚刚删除了 .prettierrc 文件，因为 prettier 的日志说，“

Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used"

我想你要么使用本地配置文件，要么使用 VS Code 的配置，但目前还不能同时使用两者。

Answer 6

对于更漂亮的扩展：转到扩展 - 卸载按钮后的齿轮图标 - 选择扩展设置，然后选择更漂亮：标签宽度。更改值，大功告成！

Answer 7

就我而言，我使用 .prettierrc.js 设置 module.export。切换到 .prettierrc.yaml 并将其转换为 YAML 配置解决了我的问题。

Prettier 没有按规定缩进

Prettier is not indenting as specified

typescript

visual-studio-code

prettier