javascript - Prettier vscode json file indentation spacing issue

Question

On save of any file, it is indenting with two tabs i.e 4 space in the beginning. Which rule is conflicting with prettier and .vscode settings?

Editor config settings are below:

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

Trying to indent with 2 space, this is happening only
with json files and other scripts.

vscode settings

{
  "[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
}

question from:https://stackoverflow.com/questions/65949447/prettier-vscode-json-file-indentation-spacing-issue

Answer 1

You can add this rules for json files in your settings.json:

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

And to be explicit, you can also add this one outside of the [json] block:

{
  "prettier.tabWidth": 2
}