“：”之后的预期换行符，多行声明更漂亮答案

【问题标题】：Expected newline after ":" with a multi-line declaration prettier“：”之后的预期换行符，多行声明更漂亮
【发布时间】：2021-12-29 20:57:22
【问题描述】：

Prettier 正在将这部分代码格式化为一个 scss 文件：

@font-face {
font-family: 'Encode Sans Condensed';
src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') 
format('truetype');
font-weight: 200;
font-style: normal;
}

我收到此错误““：”之后的预期换行符，带有多行声明” 我可以在 .prettierrc.json 文件中做什么来解决这个问题？

【问题讨论】：

标签： css sass prettier

【解决方案1】：

多行声明位于src 属性上。看起来 prettier 想要这个：

@font-face {
    font-family: 'Encode Sans Condensed';
    src:
      url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') 
      format('truetype');
    font-weight: 200;
    font-style: normal;
}

但你可以这样做：

    @font-face {
    font-family: 'Encode Sans Condensed';
    src: url('/pf/resources/fonts/EncodeSansCondensed/EncodeSansCondensed-Thin.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

可能是您的 linter 正在创建格式不兼容的 prettier 配置。例如：如果使用 stylelint：

npm install --save-dev stylelint-config-prettier

然后，将stylelint-config-prettier 附加到.stylelintrc.* file 中的"extends" 数组。确保把它放在最后，这样它会覆盖其他配置。

{
  "extends": [
    // other configs ...
    "stylelint-config-prettier"
  ]
}

来源：https://github.com/prettier/stylelint-config-prettier

【讨论】：

我在一个 react 项目中，我正在使用 prettier、stylelint 和 eslint。要检查我正在使用的警告： webpack --watch --config ./config/webpack.base.js --env dev --progress 我尝试使用 stylelint-config-prettier 但我仍然收到警告
您可以简单地编辑 scss 文件并按照更漂亮的建议添加换行符吗？