Indentation et formatage CSS du code Visual Studio

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.

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.

Embellir css / sass / scss / less

pour exécuter ça

entrer alt+shift+f

ou

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

un autre - JS-CSS-HTML Formatter

je pense que cette extension utilise js-beautify en interne

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:
  • Embellir css / sass / scss / less
    • mais, déjà JS, TS sont pris en charge par le code VS
• Pour formater un fichier JS, CSS, HTML, JSON (wraps js-beautify)
  • Formateur JS-CSS-HTML
    • mais, déjà JS, HTML, JSON sont pris en charge par le code VS
• 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.

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 !!!

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.

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

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

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

Beautify ( Github ) & Prettier ( Github ) sont le meilleur plugin pour le développement Web dans Visual Studio Code.

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