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

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.

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:
- Upiększ css / sass / scss / less
  - ale już JS, TS są obsługiwane przez kod VS
Aby sformatować plik JS, CSS, HTML, JSON (zawija js-beautify)
- JS-CSS-HTML Formatter
  - ale już JS, HTML, JSON są obsługiwane przez kod VS
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

0

Beautify ( Github ) i Prettier ( Github ) to najlepsza wtyczka do tworzenia aplikacji internetowych w programie Visual Studio Code.

— wiretext
ź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