Prettier vscode json 文件缩进间距问题

Question

在保存任何文件时，它会在开头缩进两个制表符，即 4 space。哪个规则与 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 space，仅出现这种情况
使用 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.tabSize": 2
  },
  "editor.tokenColorCustomizations": null
}

Answer 1

您可以为 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
}

Answer 2

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

Answer 3

只需将这一行添加到您的 .prettierrc 文件中，此处以 yaml 样式编写

overrides:
- files: '*.json'
  options:
    semi: true
    parser: 'json'

这就是大家的！

Prettier vscode json 文件缩进间距问题

Prettier vscode json file indentation spacing issue

javascript

visual-studio-code

eslint

indentation

prettier