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

Question

当我使用任何 CSS 选择器并在 vscode 中使用 prettier 来格式化...... 它会自动将每个选择器（以逗号分隔）放入下一行，然后 CSS...

不会检测到

我写的:

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

格式化后（通过prettier）：

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

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

Auto newline in css selector with prettier

html

css

visual-studio-code

prettier