Js-beautify: CSS単一行フォーマット

＃330の複製。 しかし、その要求の時代を考えると、私はこれを開いたままにしています。

Visual Studioには、 @ Alex360hdが望んでいたように、*。cssファイル用のコンパクトな機能があります。

js-beautyのextension-pluginsを使用したビジュアルスタジオコードには、まだこの機能がありません。

コンパクトな機能により、コードは1000行（コンパクト）と5000行（古いフォーマット）になり、GodPerspectiveを使用して* .cssファイルを制御できます。

sass / lesslongコード嫌いから。

うん、そのために+1。 私はcssの単一行フォーマットが本当に好きです。各セレクターは隣り合っており、非常に優れたパースビューを提供します。

ミニファイアを使用して複数行のスタイルを単一行に変換し、ビューティファイアを使用して単一行を複数行に変換することを期待します。

@evocateurの＃330の意見のフォローアップ（「美化の仕事はコードを縮小することではなく、一貫性と読みやすさのためにコードを再フォーマットすることです」）：そこに記載されているcssminは廃止され、 clean-css （ビルドツールでclean-cssを使用する方法も参照してください）。 「1行フォーマット」はclean-cssで簡単に取得できます-最も簡単な設定は次のとおりです

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

それは変わります

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

の中へ

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

そこから、 spacesオプションを微調整します

私の同僚のすべての若い開発者は、すべての行をlong long long less / sassで記述し、どこでも準拠しています。

私のプールコードを許してください-_- !!。

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);

出力：

.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*/

{}の間のコードを圧縮するだけで、.scss＆.lessファイルは除外されます。
option.cssがあるかどうか知りたいです。 * .cssをフォーマットするためのコンパクト。 :)

@evocateur

美化の仕事はコードを縮小することではなく、一貫性と読みやすさのためにコードを再フォーマットすることです

これは縮小ではありません。単一行のフォーマットでは、複数のセレクタールールに対していくつかのスペースといくつかの行が返されます。

私にとって、そして多くのWeb開発者にとって、これは：

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

これよりはるかに読みやすいです：

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

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

いいえ。

2017年3月22日01：08、 Alex360hdnotifications @ github.comは次のように書いています。

@evocateur

美化の仕事はコードを縮小することではなく、一貫性と読みやすさのためにコードを再フォーマットすることです

私にとって、そして多くのWeb開発者にとって、これは：

.btn { border：1px solid black; 背景：#fff; border- radius：5px color：＃000; }
。 btn：hover {背景：＃000; 色：#fff; }
これよりはるかに読みやすいです：

.btn {
border：1px solid black;
背景：#fff;
border- radius：5px;
色：＃000;
}

。 btn：hover {
背景：＃000;
色：#fff;
}
—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

美しい議論...

個人的には、CSSセレクターの概要を把握したいのですが、「通常の」構文を使用すると、ビューポートに3つまたは4つを超えるセレクターが表示されることはほとんどありません。

1行の書式設定を使用すると、（少なくとも）20個または30個のセレクターが表示され、要素のグループの概要を簡単に把握できます。

そして、CSSをよく知っていて、遺産とセレクターをインテリジェントに使用している場合、セレクターに5つまたは6つを超えるルールがあることはめったにありません。現在の画面（非常に大きい）では、水平スクロールバーなしですべてのルールを表示できます。 （その場合、私のIDEには自動回線復帰のためのオプションがたくさんあります）。

オンラインのcssフォーマッターを検索すると、それらの多くに1行のオプションがあることがわかります。これは、おそらく一部の人々が興味を持っているためです...

@evocateur -🌟グランピーキャットの印象に金色の星。 🌟😃

@ Alex360hd @ jsonchou-あなたのポイントはよく理解されています。 これは、縮小化と美化の中間に位置するため、この問題は未解決のままであり、拡張機能としてリストされています。

これは合理的な要求ですが、私自身やこのプロジェクトの他の主要な貢献者（@evocateurなど）にとっては優先度が低くなっています。 誰かがjavascriptとpythonの両方の実装と十分な範囲のテストを含むPRを提出することを選択した場合、それは受け入れられます。 しかし、プロジェクト全体の優先度が高いと思われるタスクが他にもあります。

@olets
回避策と代替のcssツールを指摘していただきありがとうございます。

@ jsonchou-
申し訳ありませんが、ほとんどの入力、または少なくともあなたまたは私が試みるすべての入力に対して機能する正規表現が常にあります。 ただし、これらはすべての入力に対して実際に機能することはなく、最終的には保守が不可能でエラーが発生しやすくなります。これが、css-beautifierコードの保守が現在のように困難になった理由です。 リスクを冒すことを選択した場合にハッキングできる回避策を提供していただきありがとうございますが、代わりに@oletsソリューションを使用することを望みます。 😄

@jsonchouはLESSとSassで//inline commentsに気をつけてください

@ Alex360hd @Zmove

VSCode用のcssコンパクトプラグインを作成しました。

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

素晴らしい、私はそれを試してみます。

ねえ@ jsonchou-プラグインをsass / scssの世界に持っていったら、たくさんの人がそれを使うだろうと思います。 3000ピクセル幅のモニターを使用するこの時代に、人々がCSSで画面領域の5％を使用することに惹かれている理由を考えると、私は驚かされます。

私はあなたのプラグインを、プロパティが行く必要のある順序を人々に指定させるところまで持っていきます。 位置や表示などは、リストの早い段階で、次に余白、パディングなど、次に色、フォントなどを配置する必要があります。

私にとって、これは、SCSSを作成する多くの人々がいるチームで非常に強力であることが証明されています。

申し訳ありませんが、誰かが私にプロパティキーの値を別々の行に置く理由を1つ教えてくれますか？ モバイルデバイスでCSSを作成しますか？

スティーブン

@ tateman74 .scssファイルを1行にしようとするかもしれませんが、ORDERプロパティはcsscombなどの3番目のソリューションで実行する必要があると思います。

ああ面白い。 CSSCombは確かに私が注文のために探しているものです。 VSCode拡張機能を作成する必要があると思います。

改行は実際には何かを意味するため、SCSSは少し難しいかもしれません。 最高の読みやすさのために、これは常に私がものをフォーマットする方法です：

• ネストされているかどうかに関係なく、ルールの前には常に改行があります
• 常に自分のラインでカーリー

さかのぼると（私のMySpaceの雇用時代:)）、いくつかのcssの仲間と私は、ベンダーのプレフィックスは基本的に（無視された）プロパティのようなものなので、改行で開始する必要があると考えました。 つまり、それらは何かを意味しますが、互換性のためだけにあります。 この時代では、とにかくPostCSSを使用する必要があるので、これらのベンダープレフィックスは存在しないはずです。

再度感謝し、私が助けることができるかどうか私に知らせてください。 これが私が好むかなり典型的なSCSSファイルです。
誰かがそれは読めないと私に言います！ :)

スティーブン

この機能が便利だと思う人は、cssビューティファイアの機能を喜んで実装しますか？ おそらくそれほど難しいことではないでしょう。

これを機能させるには、少なくともcssトークン化が必要です（＃545）。 それが行われたとしても、それを実現するためにいくつかの作業が必要になります。