Код Visual Studio Отступы и форматирование CSS

Я хотел бы знать, есть ли способ активировать автоматический отступ файла CSS в коде Visual Studio с помощью ярлыка ALT+ SHIFT+ F?

Он отлично работает с JavaScript, но, как ни странно, не с CSS.

Да, попробуйте установить расширение vscode-css-formatter .
Он просто добавляет функции для форматирования .cssфайлов, а ярлык остается прежним Alt+ Shift+ F.

Украсить css / sass / scss / less

запустить это

войти alt+shift+f

или

нажмите F1или ctrl+shift+p и затем введите украсить ..

еще один - JS-CSS-HTML Formatter

Я думаю, что оба этого расширения используют js-beautify внутри

Потратил час на поиск лучшего варианта.

Просто сложите их, чтобы было легко прочитать и выбрать один из них.

Ноты:

• CSS и SASS / SCSS / LESS связаны между собой
• HTML, Javascript, Typescript, JSON - код VS уже форматируется
• CSS и связанные с ним - код VS не форматируется на сегодняшний день

Параметры:

• Чтобы отформатировать css / sass / scss / less:
  • Красивее
    • Поддерживаются все связанные css, а не другие, я выбираю это, он отлично работает.
• Чтобы отформатировать JavaScript / TypeScript / CSS:
  • Украсить css / sass / scss / less
    • но уже JS, TS поддерживаются кодом VS
• Для форматирования файла JS, CSS, HTML, JSON (обертывание js-beautify)
  • Программа форматирования JS-CSS-HTML
    • но уже JS, HTML, JSON поддерживаются кодом VS
• Чтобы отформатировать CSS
  • Средство форматирования CSS
    • но поддерживается только CSS, не все связанное - не поддерживается 6+ месяцев

Для форматирования:

После установки Prettier нажмите Alt+ Shift+ Fв VS Code.

После открытия локального bootstrap.min.css в коде Visual Studio он выглядел без отступов. Пробовал команду ALT + Shift + F но тщетно.

Затем установил

Расширение CSS Formatter .

Reloaded это и ALT + Shift + F придал моему CSS-файлу очарование.

Бинго !!!

В галерее есть несколько на выбор, но я использую тот, который предлагает значительный уровень настраиваемости, но при этом остается ненавязчивым для остальных настроек, - это Beautify от Michele Melluso . Он работает как с CSS, так и с SCSS и позволяет делать отступ в 3 пробела, оставляя остальной код на 2 пробела, что хорошо.

Вы можете взять его с GitHub и адаптировать самостоятельно, если захотите.

Я рекомендую использовать Prettier, так как он очень расширяемый, но при этом отлично работает сразу после установки:

1. CMD + Shift + P -> Format Document

или

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection

Перейдите в меню «Файлы» -> «Настройки» -> «Расширения». Затем введите CSS Formatter, дождитесь его загрузки и нажмите «Установить».

Установите расширение HookyQR.beautify. Это украсит ваш javascript, JSON, CSS, Sass и HTML в Visual Studio Code. Это наиболее часто используемые расширения для этой цели.

Beautify ( Github ) и Prettier ( Github ) - лучший плагин для веб-разработки в Visual Studio Code.

Чтобы отформатировать код в Visual Studio, когда хотите, нажмите: (Ctrl + K) & (Ctrl + F)

Правила автоматического форматирования можно найти и изменить в: Инструменты / Параметры -> (Левая боковая панель): Текстовый редактор / CSS (или любой другой язык, который вы хотите изменить).

К сожалению, для языка CSS возможности очень ограничены. Вы также можете внести некоторые изменения в: ... / Текстовый редактор / Все языки