Prettier 没有按规定缩进

Posted

技术标签:

【中文标题】Prettier 没有按规定缩进【英文标题】:Prettier is not indenting as specified 【发布时间】:2018-07-23 15:04:33 【问题描述】:

Prettier 继续错误地格式化我的代码。我需要 4 个空格作为选项卡(第二张图片),但它忽略了编辑器设置并执行 2 个(第一张图片)。

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

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

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

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

【问题讨论】:

【参考方案1】:

对于更漂亮的扩展: 转到扩展 - 卸载按钮后的齿轮图标 - 选择扩展设置,然后选择更漂亮:标签宽度。更改值,就完成了!

【讨论】:

【参考方案2】:

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

检测到的本地配置(即 .prettierrc 或 .editorconfig),VS 不会使用代码配置”

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

【讨论】:

对于单独编程或只是测试一些东西,这种方法是可以的。但是,如果您在团队中工作,建议使用 .prettierrc 文件,因为您可以使用 git 跟踪它,它为您的整个团队设置了一致的格式标准。自动检查还可以使用 prettier 对代码库进行 lint,但需要 .prettierrc 文件才能知道如何格式化。【参考方案3】:

只需在项目的根目录下创建 .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

【讨论】:

【参考方案4】:

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

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

2。在 Visual Studio Code 设置中更改 Prettier 选项: 通过 File > Preferences > Settings 或按 Ctrl + , 转到 Visual Studio Code Setting。输入“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 Tabindent_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

您可以根据自己的要求更改此设置

【讨论】:

已经有了其中的每一个,但仍然无法正常工作......不过,这是一个很好的答案,我以前遇到过这个问题,通常是其中之一。【参考方案5】:

您使用的是 .editorconfig 吗?您可能需要更改(或设置)为

"editor.tabSize" : 4

也是。

【讨论】:

感谢您的建议,我解决了删除.editorconfig 谢谢 - 这对我有帮助!【参考方案6】:

我没有.editorconfig 文件,但我使用的是VS Code,需要将"editor.tabSize": 4 添加到我的用户settings.json 文件中。

【讨论】:

以上是关于Prettier 没有按规定缩进的主要内容,如果未能解决你的问题,请参考以下文章

如何在浏览器中配置 prettier 以缩进 html

Airbnb、ESLint、Prettier 在 Switch 和 Case 缩进上的冲突

React-Native 应用程序中的 ESLint / Prettier / Husky 缩进问题

prettier怎么设置

我为什么推荐Prettier来统一代码风格

VSCode Prettier 扩展 vs 命令行 Prettier