4

Prettier is formating this part of the code in a scss file:

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

I am getting this error "Expected newline after ":" with a multi-line declaration" What can I do in the .prettierrc.json file to fix this?

1 Answer 1

0

The multiline declaration is on the src property. Looks like prettier wants this:

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

But you could do this instead:

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

It may be that your linter is creating formatting incompatible prettier's configuration. Eg: if using stylelint:

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

Then, append stylelint-config-prettier to the "extends" array in your .stylelintrc.* file. Make sure to put it last, so it will override other configs.

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

Source: https://github.com/prettier/stylelint-config-prettier

2
  • I am in a react project, I am using prettier, stylelint and eslint. To check the warnings I am using: webpack --watch --config ./config/webpack.base.js --env dev --progress I tried with stylelint-config-prettier but I am still getting the warnings
    – alfredjmg
    Commented Dec 30, 2021 at 13:45
  • Can you simply edit the scss file add the newline as prettier suggests?
    – slynagh
    Commented Dec 31, 2021 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.