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

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

只需在 your.prettierrc 文件中添加這一行，這里用 yaml 樣式編寫

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

這都是民間的！