Search code examples
visual-studio-codeprettierastrojs

prettier change multi line into single line despite not crossing print width


VS Code 1.92.1 Ubuntu 24.04 Astro based project

Prettier extension installed and set formatter for code-snippets extension as below

.prettierrc file content

printWidth: 140,
  semi: true,
  singleQuote: false,
  tabWidth: 2,
  useTabs: false,
  plugins: ["prettier-plugin-astro", "prettier-plugin-tailwindcss" /* Must come last */],
  overrides: [
    {
      files: "*.astro",
      options: {
        parser: "astro",
      },
      rules: {
        quotes: ["error", "double", { avoidEscape: true }],
      },
    },
  ],

Note: this is working for Astro and normal file also so please do not suggest that the config is wrong

.editorconfig

root = true

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

and below is the snippet file from vs code

log.code-snippets


{
  "blog front matter": {
    "scope": "astro, javascript, javascriptreact, typescript, typescriptreact",
    "prefix": "bfm",
    "body": [
      "---",
      "\ntitle: \"\"",
      "\ndescription: ",
      "\npublishDate: ",
      "\ntags: [\"blog\"]",
      "\ndraft: true",
      "\n---",
    ],
    "description": "Creates an element using document.createDocumentFragment"
  }
}

and when save ( Ctrl + S ) this file,

it changed body content in one line as below

like

 "body": ["---", "\ntitle: \"\"", "\ndescription: ", "\npublishDate: ", "\ntags: [\"blog\"]", "\ndraft: true", "\n---"],

How do we prevent to do it, is there any settings in prettier or what?

Note: if I change default formatter to vsode one then it works as desired;

project.code-workspace

"[snippets]": {
            "editor.defaultFormatter": "vscode.json-language-features"
        }

but what is missing here?


Solution

  • The issue you’re facing occurs because Prettier formats JSON files according to its default behavior, which attempts to compress arrays when it sees the opportunity, even though you don’t cross the printWidth limit.