Indentation et formatage CSS du code Visual Studio

102

J'aimerais savoir s'il existe un moyen d'activer l'indentation automatique d'un fichier CSS dans le code de Visual Studio avec le raccourci ALT+ SHIFT+ F?

Cela fonctionne bien avec JavaScript mais étrangement pas avec CSS.

css visual-studio-code A. DC
la source
avez-vous essayé cette extension? marketplace.visualstudio.com/…
cyclomoteur

Réponses:

105

Oui, essayez d'installer l' extension vscode-css-formatter .
Il ajoute simplement la fonctionnalité pour formater les .cssfichiers et le raccourci reste le même Alt+ Shift+ F.

NValchev
la source
Celui-ci fait parfaitement son travail. J'ai essayé l'autre proposé par un cyclomoteur mais à chaque fois que j'enregistrais un fichier, je devais sauvegarder deux fois ..
A. DC
1
Comment utiliser cette extension sur Windows? alt + shift + f ne fonctionne pas et et il n'y a pas d'option 'Format Code' lors d'un clic droit.
kyw
1
Avez-vous redémarré vs-code après l'installation de l'extension? De plus, dans quels fichiers essayez-vous d'exécuter cette commande?
NValchev
13
Cela n'a pas fonctionné pour moi. Alt+Shift+Fdonnant toujours: Désolé, mais il n'y a pas de formateur pour les fichiers 'css' installés. après rechargement. Embellissez css / sass / scss / moins travaillé.
Leo
Fonctionne très bien sur Mac (Cmd + K, Cmd + F) et n'a pas affecté le formatage des autres types de fichiers en utilisant le même raccourci clavier. Merci
mojave
44

Embellir css / sass / scss / less

pour exécuter ça

entrer alt+shift+f

ou

appuyez sur F1ou ctrl+shift+p puis entrez embellir.

entrez la description de l'image ici

un autre - JS-CSS-HTML Formatter

je pense que cette extension utilise js-beautify en interne

bhv
la source
alt + shift + f n'a rien fait, mais taper embellir ... a fonctionné.
rtaft
Une autre façon d'utiliser JS-CSS-HTML Formatter est -> ouvrez le menu contextuel et choisissez Format Code
Chanaka Fernando
23

J'ai perdu une heure à trouver la meilleure option.

Il suffit de le mettre ensemble, pour une lecture facile et en choisir un.

Remarques:

  • CSS et SASS / SCSS / LESS sont tous liés
  • HTML, Javascript, Typescript, JSON - Le code VS est déjà en cours de formatage
  • CSS et connexes - Le code VS n'est pas formaté à partir d'aujourd'hui

Options:

  • Pour formater css / sass / scss / less:
    • Plus jolie
      • Tous les css sont pris en charge, et pas les autres, je choisis ceci, cela fonctionne très bien.
  • Pour formater JavaScript / TypeScript / CSS:
  • Pour formater un fichier JS, CSS, HTML, JSON (wraps js-beautify)
  • Pour formater CSS
    • Formateur CSS
      • mais, seul CSS pris en charge, pas tous les connexes - non maintenus 6+ mois

Formater:

Appuyez sur Alt+ Shift+ Fdans VS Code, après avoir installé Prettier.

Manohar Reddy Poreddy
la source
Plus jolie liste scss, mais pas sass. Beautify prétend soutenir Sass, mais d'après mon expérience, tout écrase en une seule ligne. (parle explicitement de Sass, pas de Scss)
Frank Nocke
5

Après avoir ouvert bootstrap.min.css local dans le code de Visual Studio, cela semblait non indenté. J'ai essayé la commad ALT + Shift + F mais en vain.

Puis installé

Extension CSS Formatter .

Je l'ai rechargé et ALT + Shift + F indenté mon fichier CSS avec charme.

Bingo !!!

Shahbaaz Khan
la source
4

Il y en a plusieurs parmi lesquels choisir dans la galerie, mais celui que j'utilise, qui offre un niveau considérable de configurabilité tout en restant discret pour le reste des paramètres, est Beautify de Michele Melluso . Il fonctionne à la fois sur CSS et SCSS et vous permet d'indenter 3 espaces en gardant le reste du code à 2 espaces, ce qui est bien.

Vous pouvez l'arracher à GitHub et l'adapter vous-même, si vous en avez envie aussi.

Konrad Viltersten
la source
4

Je recommande d'utiliser Prettier car il est très extensible mais fonctionne toujours parfaitement hors de la boîte:

1. CMD + Shift + P -> Format Document

ou

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

Allez dans le menu Fichiers -> Préférences -> Extentions Puis tapez CSS Formatter attendez qu'il se charge et cliquez sur installer

Ahmed Adewale
la source
1

Installez l'extension HookyQR.beautify. Il embellira votre javascript, JSON, CSS, Sass et HTML dans Visual Studio Code. Ce sont les extensions les plus utilisées à cet effet

William Dekou
la source
-8

Pour formater le code dans Visual Studio quand vous le souhaitez, appuyez sur: (Ctrl + K) & (Ctrl + F)

Les règles de formatage automatique peuvent être trouvées et modifiées dans: Outils / Options -> (Barre latérale gauche): Éditeur de texte / CSS (ou toute autre langue que vous souhaitez modifier)

Pour le langage CSS, les options sont malheureusement très limitées. Vous pouvez également apporter des modifications dans: ... / Éditeur de texte / Toutes les langues

Sion
la source
6
La question est pour Visual Studio Code (VSCode) et non Visual Studio
Pierre