Prettier-vscode: Prettier doesn't format *.css and *.scss files.

Created on 5 Jun 2017  路  11Comments  路  Source: prettier/prettier-vscode

Here are my settings:

"prettier.eslintIntegration": true,
"prettier.singleQuote": true,
"prettier.printWidth": 80,
"prettier.trailingComma": "all",
"prettier.cssEnable": [
    "css",
    "less",
    "sass"
],

But there is no "Format document" option in the content menu in vscode for *.css and *.scss files.

Prettier version: [0.19.0]

What I am doing wrong? Prettier formats .js files fine.

Most helpful comment

I opened a PR to fix this issue in #121.

If you want to fix this locally before next release, it is simple:

  1. Edit: ~/.vscode/extensions/esbenp.prettier-vscode-0.19.0/package.json
  2. Replace all occurances (2) of "sass" with "scss".
  3. Save & restart Code.

All 11 comments

On a phone right now. Won't be able to help much (and for 2 weeks).
Have you any other extension which overrides language id for your css files?
Postcss, ...

I think that I don't have any extensions which do it.

I've attached screenshot files with list of all install extensions and my settings.
s1
s2

I've checked Developer Tools console:

extensionHost.ts:285[Extension Host] Activating extension `esbenp.prettier-vscode` failed:  Cannot find module '/Users/serge/.vscode/extensions/esbenp.prettier-vscode-0.19.0/out/src/extension'
d.logExtensionHostMessage @ extensionHost.ts:285
extensionHost.ts:285[Extension Host] Here is the error stack:  Error: Cannot find module '/Users/serge/.vscode/extensions/esbenp.prettier-vscode-0.19.0/out/src/extension'
    at Function.Module._resolveFilename (module.js:470:15)
    at Function.Module._load (module.js:418:25)

So I think that problem with installation of the latest version.

Well it works with JavaScript...
Try reinstalling. I can't do anything for 2 weeks sorry.

I've tried, but it still works with JS only. But it's not a problem, I will use till 'Beautify css/sass/scss/less' extension for css. Thank you for your work, your extension is great!

Confirming that I see same thing. No option comes up to "Format Document" when editing CSS (but everything still works fine when editing JS files)

I opened a PR to fix this issue in #121.

If you want to fix this locally before next release, it is simple:

  1. Edit: ~/.vscode/extensions/esbenp.prettier-vscode-0.19.0/package.json
  2. Replace all occurances (2) of "sass" with "scss".
  3. Save & restart Code.

It changes cssEnable option.
Changing it in settings should be enough.

@CiGit I wasn't sure if it accepted any string since it has the enum specified, if it does then that's a valid work-around.

@mafredri Yes, your workaround works for me. Thanks!

@mafredi it is anyOf string / enum

Was this page helpful?
0 / 5 - 0 ratings