Prettier vscode json文件缩进间距问题

Question

保存任何文件时，它会在开头缩进两个制表符，即 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.tabSize": 2
  },
  "editor.tokenColorCustomizations": null
}

Answer 1

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

Answer 2

您可以在 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 3

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

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

这都是民间的！

Answer 4

就我而言，它是一个 .prettierrc.js 文件，所以我删除了 js 并将其更改为

.prettierrc

文件，并且工作正常。