css選擇器中的自動換行更漂亮

Question

當我使用任何 CSS 選擇器並在 vscode 中使用 prettier 進行格式化時......它會自動將每個選擇器（以逗號分隔）放入下一行，然后 CSS 不會檢測到......

我寫的：

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

格式化后（通過更漂亮）：

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

我在 vscode 中的 Prettier 設置：

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

請幫忙 ！！

Answer 1

沒有辦法在配置文件中解決這個問題，它是 Prettier 內置的一個功能。

您需要將/* prettier-ignore */到 CSS 選擇器塊的頂部，以阻止 prettier 格式化該部分選擇器。

這是一個示例，它應用於 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;
}