Wcięcia i formatowanie kodu CSS w Visual Studio

102

Chciałbym wiedzieć, czy istnieje sposób na aktywację automatycznego wcięcia pliku CSS w kodzie Visual Studio za pomocą skrótu ALT+ SHIFT+F ?

Działa dobrze z JavaScript, ale dziwnie nie z CSS.

css visual-studio-code A. DC
źródło
próbowałeś tego rozszerzenia? marketplace.visualstudio.com/…
motorower

Odpowiedzi:

105

Tak, spróbuj zainstalować rozszerzenie vscode-css-formatter .
Po prostu dodaje funkcję formatowania .cssplików, a skrót pozostaje ten sam Alt+ Shift+ F.

NValchev
źródło
Ten doskonale wykonuje swoją pracę. Wypróbowałem inny sugerowany przez motorower, ale za każdym razem, gdy zapisywałem plik, musiałem zapisywać dwa razy ...
A. DC
1
Jak korzystać z tego rozszerzenia w systemie Windows? Alt + shift + f nie działa i nie ma opcji „Formatuj kod” po kliknięciu prawym przyciskiem myszy.
kyw
1
Czy po zainstalowaniu rozszerzenia ponownie uruchomiłeś vs-code? Ponadto w jakich plikach próbujesz wykonać to polecenie?
NValchev
13
Nie działa dla mnie. Alt+Shift+Fnadal daje: Przepraszamy, ale nie ma zainstalowanego programu formatującego dla plików 'css'. po przeładowaniu. Upiększ css / sass / scss / mniej działał.
Leo
Działa świetnie na komputerach Mac (Cmd + K, Cmd + F) i nie wpływa na formatowanie innych typów plików przy użyciu tego samego skrótu klawiaturowego. Dzięki
mojave
44

Upiększ css / sass / scss / less

aby to uruchomić

wchodzić alt+shift+f

lub

naciśnij F1lub, ctrl+shift+p a następnie wprowadź upiększanie.

wprowadź opis obrazu tutaj

kolejny - JS-CSS-HTML Formatter

myślę, że używa obu tym rozszerzeniem js-upiększyć wewnętrznie

bhv
źródło
Alt + shift + f nic nie zrobił, ale wpisanie upiększania ... zadziałało.
rtaft
Innym sposobem użycia JS-CSS-HTML Formatter jest -> otwórz menu kontekstowe i wybierz Formatuj kod
Chanaka Fernando
23

Zmarnowałem godzinę na szukanie najlepszej opcji.

Po prostu złożenie go razem, aby łatwo przeczytać i wybrać jedną z nich.

Uwagi:

  • CSS i SASS / SCSS / LESS są ze sobą powiązane
  • HTML, Javascript, Typescript, JSON - VS kod jest już formatowany
  • CSS i powiązane - kod VS nie jest obecnie formatowany

Opcje:

  • Aby sformatować css / sass / scss / less:
    • Ładniejsze
      • Obsługiwane wszystkie związane z CSS, a nie inne, wybieram to, działa świetnie.
  • Aby sformatować JavaScript / TypeScript / CSS:
  • Aby sformatować plik JS, CSS, HTML, JSON (zawija js-beautify)
  • Aby sformatować CSS
    • CSS Formatter
      • ale tylko obsługiwane CSS, nie wszystkie powiązane - nieobsługiwane 6+ miesięcy

Formatować:

Naciśnij Alt+ Shift+ Fw VS Code, po zainstalowaniu Prettier.

Manohar Reddy Poreddy
źródło
Ładniejsze listy scss, ale nie sass. Beautify twierdzi, że wspiera Sass, ale z mojego doświadczenia rozbija wszystko do jednej linii. (wyraźnie mówiąc Sass, nie Scss)
Frank Nocke
5

Po otwarciu lokalnego pliku bootstrap.min.css w kodzie studia wizualnego wyglądał na pozbawionego wcięć. Wypróbowałem komendę ALT + Shift + F. ale na próżno.

Następnie zainstalowany

Rozszerzenie CSS Formatter .

Załadowałem go ponownie i ALT + Shift + F dodały uroku mojemu plikowi CSS.

Bingo !!!

Shahbaaz Khan
źródło
4

W galerii jest kilka do wyboru, ale ten, którego używam, który oferuje znaczny poziom konfigurowalności, nadal pozostając dyskretny dla pozostałych ustawień, to Beautify autorstwa Michele Melluso . Działa zarówno na CSS, jak i SCSS i pozwala na wcięcie 3 spacji, utrzymując resztę kodu na 2 spacjach, co jest miłe.

Możesz go pobrać z GitHub i dostosować samodzielnie, jeśli też masz na to ochotę.

Konrad Viltersten
źródło
4

Polecam korzystanie z Prettier, ponieważ jest bardzo rozszerzalny, ale nadal działa idealnie po wyjęciu z pudełka:

1. CMD + Shift + P -> Format Document

lub

1. Select the text you want to Prettify
2. CMD + Shift + P -> Format Selection
feihcsim
źródło
3

Przejdź do menu Pliki -> Preferencje -> Rozszerzenia Następnie wpisz CSS Formatter, poczekaj, aż się załaduje i kliknij Zainstaluj

Ahmed Adewale
źródło
1

Zainstaluj rozszerzenie HookyQR.beautify. Upiększy twój javascript, JSON, CSS, Sass i HTML w Visual Studio Code. Są to najczęściej używane rozszerzenia do tego celu

William Dekou
źródło
-8

Aby sformatować kod w programie Visual Studio, kiedy chcesz, naciśnij: (Ctrl + K) & (Ctrl + F)

Zasady automatycznego formatowania można znaleźć i zmienić w: Narzędzia / Opcje -> (Lewy pasek boczny): Edytor tekstu / CSS (lub jakikolwiek inny język, który chcesz zmienić)

W przypadku języka CSS opcje są niestety bardzo ograniczone. Możesz także wprowadzić pewne zmiany w: ... / Edytor tekstu / Wszystkie języki

Sion
źródło
6
Pytanie dotyczy programu Visual Studio Code (VSCode), a nie programu Visual Studio
Pierre