Візуальний код студії CSS відступ та форматування

Мені хотілося б знати, чи є спосіб активувати автоматичний відступ файлу CSS у візуальному коді студії за допомогою ярлика ALT+ SHIFT+ F?

Це добре працює з JavaScript, але, як не дивно, з CSS.

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

Прикрашайте css / sass / scss / менше

запустити це

увійти alt+shift+f

або

натисніть F1або, ctrl+shift+p а потім введіть прикрасити ..

ще один - формат JS-CSS-HTML

Я думаю, що обидва цього розширення використовують js-красиво внутрішньо

Витратили годину, знайшовши найкращий варіант.

Просто склавши їх разом, для легкого читання та вибору одного з них.

Примітки:

• CSS та SASS / SCSS / LESS пов'язані між собою
• HTML, Javascript, Typescript, JSON - код VS вже форматується
• CSS та пов’язане з цим - код VS на сьогодні не форматується

Параметри:

• Щоб форматувати css / sass / scss / менше:
  • Гарніша
    • Всі підтримувані css підтримуються, а не інші, я вибираю це, він чудово працює.
• Щоб форматувати JavaScript / TypeScript / CSS:
  • Прикрашайте css / sass / scss / менше
    • але, вже JS, TS підтримуються кодом VS
• Для форматування файлів JS, CSS, HTML, JSON (обгортання js-прикрасити)
  • Формат JS-CSS-HTML
    • але вже JS, HTML, JSON підтримуються кодом VS
• Відформатувати CSS
  • CSS Formatter
    • але підтримується лише CSS, не всі пов'язані з цим - не підтримуються 6+ місяців

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

Натисніть Alt+ Shift+ Fу коді VS, встановивши «Красивіше».

Після відкриття локального bootstrap.min.css у візуальному коді студії, це виглядало безперешкодно. Спробував коментований ALT + Shift + F, але даремно.

Потім встановлено

Розширення CSS Formatter .

Перезавантажив його, і ALT + Shift + F відрізав мій CSS-файл із шармом.

Бінго !!!

У галереї можна вибрати декілька, але той, який я використовую, який пропонує значний рівень конфігурації, який залишається непомітним для решти налаштувань, прикрасить 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 варіанти, на жаль, дуже обмежені. Ви також можете внести деякі зміни у: ... / Текстовий редактор / Усі мови