Solution:

In order to allow single-line blocks in VSCode using Prettier - Code formatter extension, please take the following steps:

  1. Enable stylelint integration by adding this in the VSCode Settings (JSON): "prettier.stylelintIntegration": true
  2. Install stylelint and stylelint-prettier npm modules in your project directory. npm install stylelint stylelint-prettier --save-dev
  3. Add a .stylelintrc.json file at the root of your project directory with the following code:
    {
        "plugins": ["stylelint-prettier"],
        "rules": {
            "block-closing-brace-newline-after": "always-multi-line",
            "block-closing-brace-empty-line-before": "never",
            "block-closing-brace-space-before": "always",
            "block-opening-brace-space-after": "always",
            "block-opening-brace-space-before": "always",
            "block-closing-brace-newline-before": "always-multi-line",
            "block-opening-brace-newline-after": "always-multi-line",
            "indentation": 4
        }
    }

You can add/customize more stylelint rules, see the entire list of rules here.

Took me a while to understand how to configure these options, if you're starting out with stylelint, I highly recommend you read its guidelines first.

Answer from Arslan Akram on Stack Overflow
🌐
Prettier
prettier.io
Prettier · Opinionated Code Formatter · Prettier
Try It OnlineInstall Prettier · Limited edition tshirts are now available to buy! $10 per tshirt goes to maintain the project. An opinionated code formatter · Supports many languages · Integrates with most editors · Has few options » · Your code is formatted on save · No need to discuss style in code review · Saves you time and energy · And more » · JavaScript · JSX · Flow · TypeScript · JSON · CSS ·
Blog
We're excited to announce that Prettier now fully supports the fresh features landing in Angular v21.1 (released today 🎉) · This update brings cleaner, more expressive templates with:
Options · Prettier
For example, the following will use the CSS parser: ... This option is only useful in the CLI and API. It doesn’t make sense to use it in a configuration file. ... Prettier can restrict itself to only format files that contain a special comment, called a pragma, at the top of the file.
Configuration File
Otherwise you effectively disable Prettier’s automatic file extension based parser inference. This forces Prettier to use the parser you specified for all types of files – even when it doesn’t make sense, such as trying to parse a CSS file as JavaScript.
🌐
Reddit
reddit.com › r/vscode › prettier not formatting css
r/vscode on Reddit: Prettier not formatting css
September 24, 2024 -

Hey everyone, for the life of me I can't figure out why prettier won't format css. I have gone over all of my setting, format on save, setting prettier as the default format, and checked the setting.json file. Still can't figure out what is going on. Any help would be appreciated!

People also ask

What is CSS Prettify?
CSS coding can be messy because the coder cannot give the code's appearance his full attention while focusing on the technical tasks. CSS Prettify beauties your CSS code using this CSS Prettify online tool. Enter your CSS code to beautify, format, prettify and make it more readable.
🌐
testmu.ai
testmu.ai › home › free tools › css prettify online
CSS Prettify Online Tool | TestMu AI
What can you do with a CSS Prettify?
A CSS Prettify is a tool or script that is used to make the formatting of CSS code more readable and consistent. It can automatically organize and format CSS code according to a set of predefined rules or guidelines, such as indentation, spacing, and line breaks. This can make it easier for developers to read and understand the code, and can also help to reduce errors and inconsistencies.It is beneficial to format your Cascading Style Sheets.This tool allows you to load the CSS code to be prettied up.Users can format CSS files by uploading them.Prettify CSS Online is compatible with Windows, M
🌐
testmu.ai
testmu.ai › home › free tools › css prettify online
CSS Prettify Online Tool | TestMu AI
How does CSS Prettify work?
When writing CSS Style Sheets, indentation, spacing, and other formatting can become a bit disorganized. Multiple developers working on the same project can use different formatting styles. This tool helps keep indentation consistent, and also minifies or obfuscates CSS Style Sheets to make them easier to read for humans. The tool finds all the indentations, line breaks, and extra spaces and removes them or corrects them.
🌐
testmu.ai
testmu.ai › home › free tools › css prettify online
CSS Prettify Online Tool | TestMu AI
🌐
FreeFormatter
freeformatter.com › css-beautifier.html
Free Online CSS Beautifier / Formatter - FreeFormatter.com
This free online tool lets you beautify/format your CSS code with no side effects
🌐
GitHub
github.com › prettier › prettier
GitHub - prettier/prettier: Prettier is an opinionated code formatter. · GitHub
JavaScript · TypeScript · Flow · JSX · JSON CSS · SCSS · Less HTML · Vue · Angular GraphQL · Markdown · YAML Your favorite language? Prettier is an opinionated code formatter.
Starred by 51.7K users
Forked by 4.7K users
Languages   JavaScript 83.3% | TypeScript 6.2% | CSS 3.0% | HTML 3.0% | SCSS 1.5% | Less 1.0%
🌐
Prettier
prettier.io › docs
What is Prettier? · Prettier
Prettier is an opinionated code formatter with support for: JavaScript (including experimental features) JSX · Angular · Vue · Flow · TypeScript · CSS, Less, and SCSS · HTML · Ember/Handlebars · JSON · GraphQL · Markdown, including ...
Find elsewhere
🌐
JetBrains
jetbrains.com › help › webstorm › prettier.html
Prettier | WebStorm Documentation
Prettier is a tool to format files in various languages, like TypeScript, JavaScript, CSS, HTML, JSON, and others. With WebStorm, you can format selected code fragments as well as entire files or directories using the Reformat with Prettier action.
🌐
CleanCSS
cleancss.com › css-beautify
CSS Formatter
Enter your messy, minified, or obfuscated CSS Style Sheets into the field above to have it cleaned up and made pretty. The editor above also contains helpful line numbers and syntax highlighting.
🌐
GitHub
github.com › tailwindlabs › prettier-plugin-tailwindcss
GitHub - tailwindlabs/prettier-plugin-tailwindcss: A Prettier plugin for Tailwind CSS that automatically sorts classes based on our recommended class order. · GitHub
A Prettier v3+ plugin for Tailwind CSS v3.0+ that automatically sorts classes based on our recommended class order.
Starred by 7K users
Forked by 175 users
Languages   TypeScript 97.6% | JavaScript 2.4%
🌐
Testmu
testmu.ai › home › free tools › css prettify online
CSS Prettify Online Tool | TestMu AI
A CSS Prettify is a tool or script that is used to make the formatting of CSS code more readable and consistent. It can automatically organize and format CSS code according to a set of predefined rules or guidelines, such as indentation, spacing, ...
🌐
Ghost Forum
forum.ghost.org › developer help
How to format/prettier css handlebars file - Developer help - Ghost Forum
October 6, 2021 - Editor: VS Code Theme: 3rd party I open a file called bundle-css.hbs and it looks like a jumbled mess. I’d like to format/prettier it so it’s easier on the eyes to edit. Things I’ve tried: –installed handlebars formatter extension in VS Code – VS Code | Preferences | files association ...
🌐
Code Beautify
codebeautify.org › css-beautify-minify
CSS Formatter, CSS Beautifier and CSS Minifier Online tool
Best Online CSS Formatter, CSS Beautifier, CSS Minifier, Save and Share CSS. Simple Quick and Fast!
🌐
npm
npmjs.com › package › prettier-plugin-css-order
prettier-plugin-css-order - npm
April 1, 2024 - A Prettier plugin to sort CSS, SCSS or Less declarations based on their property names.
      » npm install prettier-plugin-css-order
    
Published   Jan 02, 2026
Version   2.2.0
Author   Selwyn
🌐
Prettier
prettier.io › blog › 2017 › 06 › 03 › 1.4.0.html
Prettier 1.4: TypeScript and CSS support · Prettier
June 3, 2017 - This release introduces support for TypeScript, CSS, Less, and SCSS languages to Prettier!
🌐
YouTube
youtube.com › watch
Formatting your code is a waste of time - use Prettier instead - YouTube
Prettier helps format our code, and also should help take the argument away from how our code is formatted in the first place so that we don't have to debate...
Published   January 20, 2022
🌐
CSS-Tricks
css-tricks.com › prettier-beautify
Prettier & Beautify | CSS-Tricks
November 20, 2018 - Prettier is an “opinionated code formatter.” I highly suggest using it.