Auto newline in css selector with prettier

user_13916769 0
Viewed 1038

When I Use any CSS selector and use prettier in vscode to format...... It automatically puts each selector (separated by comma) into next line which is not then not detected by CSS...

What I wrote :

td,th,table {
  border: 5px solid greenyellow;
}

After formatting (through prettier) :

td,
th,
table {
  border: 5px solid greenyellow;
}

My Prettier settings in vscode:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 100,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "c:\\Users\\coder\\Desktop\\a.css",
  "parser": "css"
}

Please Help !!

prettier visual-studio-code css html
1 Answers

There is no way to fix this in the config file, it's a feature built into Prettier.

You need to add /* prettier-ignore */ to the top of your CSS selector block to stop prettier from formatting that section of selectors.

Here's an example with it applied to the first section of the meyer-reset.


/* prettier-ignore */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
user_85614700
Related