更漂亮的 vscode json 文件缩进间距问题

如何解决更漂亮的 vscode json 文件缩进间距问题

保存任何文件时，它会缩进两个制表符，即开头的 4 个空格。哪个规则与 prettier 和 .vscode 设置冲突？

编辑器配置设置如下：

root = true

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

试图缩进 2 个空格，这只会发生
使用 json 文件和其他脚本。

vscode 设置

{
  "[javascript]": {
    "editor.formatOnSave": false
  },"eslint.alwaysShowStatus": true,"files.autoSave": "onFocusChange","prettier.proseWrap": "preserve","emmet.includeLanguages": {
    "javascript": "javascriptreact","vue-html": "html","plaintext": "jade","edge": "html"
  },"emmet.syntaxProfiles": {
    "javascript": "jsx"
  },"emmet.triggerExpansionOnTab": true,"emmet.showSuggestionsAsSnippets": true,"files.associations": {
    "*.js": "javascriptreact"
  },"editor.fontSize": 14,"git.enableSmartCommit": true,"git.confirmSync": false,"search.exclude": {
    "**/__snapshots__/**": true,"**/.bin": true,"**/.git": true,"**/.next": true,"**/bower_components": true,"**/coverage/**": true,"**/node_modules": false,"**/node_modules/**": true,"**/report/**": true,"**/tmp": true
  },"javascript.updateImportsOnFileMove.enabled": "always","explorer.confirmDragAndDrop": false,"explorer.confirmDelete": false,"workbench.editor.enablePreviewFromQuickOpen": false,"files.exclude": {
    ".next": true,"*.log": true,"**/__pycache__": true,"**/o": true,"dist": true,"geckodriver.log": true,"node_modules/": true,"package-lock.json": true,"yarn.lock": true
  },"window.zoomLevel": 1,"editor.find.globalFindClipboard": true,"editor.fontLigatures": true,"jshint.enable": false,"editor.formatOnType": true,"team.showWelcomeMessage": false,"git.autofetch": true,"workbench.startupEditor": "newUntitledFile","editor.codeActionsOnSave": {
    // For ESLint
    "source.fixAll.eslint": true,// For TSLint
    "source.fixAll.tslint": true,// For Stylelint
    "source.fixAll.stylelint": true
  },"launch": {},"workbench.colorCustomizations": {},"sync.forceUpload": true,"sync.forceDownload": true,"sync.autoDownload": true,"vetur.format.defaultFormatter.html": "js-beautify-html","intelephense.diagnostics.undefinedTypes": false,"workbench.editorAssociations": [],"diffEditor.codeLens": true,"editor.formatOnSave": true,"team.showFarewellMessage": false,"eslint.validate": [],"vetur.validation.template": false,"prettier.enable": true,"editor.formatOnPaste": true,"editor.tabSize": 2,"files.insertFinalNewline": true,"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode","editor.tabSize": 2
  },"[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode","editor.tokenColorCustomizations": null
}

解决方法

您可以在 settings.json 中为 json 文件添加此规则：

{
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode","editor.tabSize": 2
    },"[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode","editor.tabSize": 2
    }
}

并且明确地说，您还可以在 [json] 块之外添加这个：

{
  "prettier.tabWidth": 2
}

,

这是由于扩展名：'lonefy.vscode-js-css-html-formatter'。