css选择器中的自动换行更漂亮

Question

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 !!

Answer 1

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;
}