Js-beautify: Formatage CSS sur une seule ligne

Duplicata du #330. Mais étant donné l'ancienneté de cette demande, je garde celle-ci ouverte.

visual studio a une fonctionnalité compacte pour les fichiers *.css, tout comme @Alex360hd le souhaitait.

le code de studio visuel avec les plugins d'extension de js-beauty n'a pas encore cette fonctionnalité.

la fonctionnalité compacte rend votre code de 1000 lignes (compact) contre 5000 lignes (ancien formatage), vous pouvez contrôler votre fichier *.css avec God Perspective.

de sass/haineur de code moins long.

Oui, +1 pour ça. J'aime beaucoup le formatage CSS sur une seule ligne, chaque sélecteur est côte à côte et cela donne une très bonne vue en perspective.

Je m'attendrais à utiliser un minificateur pour transformer les styles multilignes en une seule ligne, et un embellisseur pour transformer une seule ligne en plusieurs lignes.

Suite à l' avis #330 de @evocateur ("Le travail d'un embellisseur n'est pas de minifier le code, mais de le reformater pour plus de cohérence et de lisibilité") : le cssmin qui y est mentionné a été déprécié au profit de clean-css (voir aussi How to use clean-css with build tools? ). Le "formatage sur une seule ligne" est facile à obtenir avec clean-css - les paramètres les plus simples sont

level: 0, // no optimizations
format: {
    breaks: {
        afterRuleEnds: true // put a line break after every rule
    }
}

Cela tourne

.btn-primary {
  background:#fff;
  color:#000;
  border:1px solid #000;
}
.btn-primary:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

dans

.btn-primary{background:#fff;color:#000;border:1px solid #000}
.btn-primary:hover{background:#000;color:#fff;border:1px solid #fff}

À partir de là, ajustez les options spaces

chaque jeune développeur de mes collègues écrit chaque ligne avec long long long less/sass, et se conforme partout.

pardonnez mon code de piscine -_- !!.

let CSSIOStream=`.model-a {
  background:#fff;
  color:  #aaa;
  border:  1px solid #aaa;
  border-radius  : 5px;
}
.model-a:hover {
  background:#000;
  color:#fff;
  border:1px solid #fff;
}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/



`;


let CSSIOStreamOutput=CSSIOStream
.replace(/\ +/g, ' ')
.replace(/;\n/g,';')
.replace(/{\n/g,'{')

console.log(CSSIOStreamOutput);

sortir:

.model-a { background:#fff; color: #aaa; border: 1px solid #aaa; border-radius : 5px;}
.model-a:hover { background:#000; color:#fff; border:1px solid #fff;}

/*seperate page section style, normally, i will left one blank rows or a note*/

.model-b{margin-right:10px;}
.model-b-list{margin-right:10px;}

/*seperate page section style, normally, i will left one blank rows or a note*/

il suffit de compacter le code entre {}, le fichier .scss&.less est exclu.
je veux savoir s'il y a une option.css. compact pour formater le *.css . :)

@évocateur

Le travail d'un embellisseur n'est pas de minifier le code, mais de le reformater pour plus de cohérence et de lisibilité

Ce n'est pas une minification, le formatage sur une seule ligne conserve des espaces et des retours de ligne pour plusieurs règles de sélecteur.

Pour moi, et pour beaucoup de développeurs web, ceci :

.btn { border:1px solid black; background:#fff; border-radius:5px color:#000; }
.btn:hover,
.btn:focus { background:#000; color:#fff; }

Est bien plus lisible que ceci :

.btn {
  border:1px solid black;
  background:#fff;
  border-radius:5px;
  color:#000;
}

.btn:hover,
.btn:focus {
  background:#000;
  color:#fff;
}

Non.

Le 22 mars 2017, à 01h08, Alex360hd [email protected] a écrit :

@évocateur

Le travail d'un embellisseur n'est pas de minifier le code, mais de le reformater pour plus de cohérence et de lisibilité

Pour moi, et pour beaucoup de développeurs web, ceci :

.btn { border:1px noir solide ; arrière-plan :#fff ; border -radius:5px color:#000 ; }
. btn:hover { background:#000; couleur :#fff ; }
Est bien plus lisible que ceci :

.btn {
bordure : 1 pixel noir uni ;
arrière-plan :#fff ;
bordure - rayon : 5 px ;
couleur : #000 ;
}

. btn: survolez {
arrière-plan :#000 ;
couleur :#fff ;
}
—
Vous recevez ceci parce que vous avez été mentionné.
Répondez directement à cet e-mail, consultez-le sur GitHub ou désactivez le fil de discussion.

Belle argumentation...

Personnellement, j'aime avoir une bonne vue d'ensemble de mon sélecteur CSS et en utilisant la syntaxe "normale", je ne vois guère plus de 3 ou 4 sélecteurs dans ma fenêtre.

En utilisant le formatage sur une seule ligne, je peux voir 20 ou 30 sélecteurs (au moins) et je peux facilement avoir une vue d'ensemble sur un groupe d'éléments.

Et quand on connaît bien le CSS, utiliser l'héritage et le sélecteur intelligemment, on a rarement plus de 5 ou 6 règles pour un sélecteur, et avec l'écran qu'on a aujourd'hui, (très grand), je peux voir toutes mes règles sans scrollbar horizontal. (et si c'est le cas, mon IDE dispose de nombreuses options pour le retour automatique à la ligne).

Si vous recherchez un formateur css en ligne, vous pouvez voir que beaucoup d'entre eux ont des options sur une seule ligne, c'est probablement parce que cela intéresse certaines personnes...

@evocateur - 🌟 Étoile d'or sur votre impression Grumpy Cat. 🌟 😃

@Alex360hd @jsonchou - vos points sont bien pris. Cela se situe quelque part entre la minification et l'embellissement et c'est pourquoi ce problème reste ouvert et répertorié comme une amélioration.

C'est une demande raisonnable mais c'est une priorité moindre pour moi et les autres contributeurs majeurs à ce projet (comme @evocateur). Si quelqu'un choisissait de soumettre un PR avec à la fois les implémentations javascript et python et une gamme suffisante de tests, il serait accepté. Mais nous avons d'autres tâches qui nous semblent prioritaires pour le projet dans son ensemble.

@olets
Merci d'avoir signalé la solution de contournement et l'outil css alternatif !

@jsonchou -
Désolé, il y a toujours une expression régulière qui fonctionnera pour la plupart des entrées, ou du moins toutes les entrées que vous ou moi essaierions. Cependant, ils ne fonctionnent jamais vraiment pour toutes les entrées et, en fin de compte, ils ne peuvent pas être maintenus et sont sujets aux erreurs - c'est ainsi que le code css-beautifier est devenu aussi difficile à maintenir qu'il l'est aujourd'hui. Merci d'avoir fourni une solution de contournement que les gens peuvent pirater s'ils choisissent de le risquer, mais j'espère qu'ils utiliseront plutôt la solution @olets . 😄

@jsonchou attention à //inline comments en MOINS et Sass

@Alex360hd @Zmove

J'ai écrit un plugin css compact pour VSCode.

https://marketplace.visualstudio.com/items?itemName=jsonchou.css-compact

Excellent, je vais essayer ça.

Hey @jsonchou - Je pense que si vous emmeniez votre plugin dans le monde sass/scss, une tonne de personnes l'utiliseraient. Je suis époustouflé de penser à la raison pour laquelle à notre époque avec des moniteurs de 3000 pixels de large, les gens se sont tournés vers l'utilisation de 5% de l'espace de l'écran en CSS !

Je prendrais même votre plugin jusqu'à laisser les gens spécifier l'ORDRE dans lequel les propriétés doivent aller. Des éléments tels que la position et l'affichage doivent figurer au début de la liste, puis la marge, le remplissage, etc., puis les couleurs, les polices, etc.

Pour moi, cela s'est avéré extrêmement puissant dans une équipe avec de nombreuses personnes qui écrivent SCSS.

Désolé les gens, quelqu'un me donne une bonne raison d'avoir des clés de propriété sur des lignes séparées ? Écrire du CSS sur un appareil mobile ?

Steven

@ tateman74 Peut-être que je vais essayer de créer un fichier .scss sur une seule ligne, mais je pense que les propriétés ORDER devraient être effectuées par une 3ème solution telle que csscomb.

Ah intéressant. CSSComb est certainement ce que je rechercherais pour commander. Je dois créer une extension VSCode pour cela, je suppose.

SCSS peut être un peu difficile car les nouvelles lignes signifient quelque chose. Pour une meilleure lisibilité, voici toujours comment je formate les choses :

• toujours une nouvelle ligne avant une règle imbriquée ou non
• toujours des boucles sur leurs propres lignes

Il y a bien longtemps (dans mes jours d'emploi sur MySpace :)), quelques copains CSS et moi avons pensé que les préfixes des fournisseurs devraient commencer sur une nouvelle ligne car ce sont essentiellement des propriétés (ignorées). Autrement dit, ils signifient quelque chose, mais ne sont là que pour la compatibilité. Je suppose qu'à notre époque, nous devrions de toute façon utiliser PostCSS afin que ces préfixes de fournisseur ne devraient jamais exister.

Merci encore et faites-moi savoir si je peux vous aider. Voici un fichier SCSS assez typique que je préfère.
Quelqu'un me dit que ce n'est pas lisible ! :)

Steven

Est-ce que l'un d'entre vous qui trouve cette fonctionnalité utile serait prêt à implémenter la fonctionnalité pour l'embellisseur CSS ? Ce ne serait probablement pas si difficile.

Cela nécessitera au moins une tokenisation CSS pour que cela fonctionne (# 545). Même une fois que cela sera fait, il faudra du travail pour y arriver.