Visual StudioコードのCSSインデントとフォーマット

ショートカットALT+ SHIFT+ F？を使用して、Visual StudioコードでCSSファイルの自動インデントを有効にする方法があるかどうか知りたいのですが。

JavaScriptでは問題なく機能しますが、奇妙なことにCSSでは機能しません。

はい、vscode-css-formatter拡張機能をインストールしてみてください。
それはちょうどフォーマットに機能を追加し.css、ファイルやショートカットは同じままですAlt+ Shift+ F。

css / sass / scss / lessの美化

これを実行する

入る alt+shift+f

または

F1またはctrl+shift+p を押して、「美化」と入力します。

別のもの-JS-CSS-HTML Formatter

この拡張機能は両方とも内部でjs-beautifyを使用すると思います

1時間を無駄にして、最適なオプションを見つけます。

一緒に置くだけで、読みやすく、選択しやすくなります。

ノート：

• CSSとSASS / SCSS / LESSはすべて関連しています
• HTML、Javascript、Typescript、JSON-VSコードはすでにフォーマットされています
• CSSおよび関連-VSコードは現在のところフォーマットされていません

オプション：

• css / sass / scss / lessをフォーマットするには：
  • きれい
    • すべてのcss関連がサポートされ、他はサポートされていません。私はこれを選択しました。
• JavaScript / TypeScript / CSSをフォーマットするには：
  • css / sass / scss / lessの美化
    • しかし、すでにJS、TSはVSコードでサポートされています
• JS、CSS、HTML、JSONファイルをフォーマットするには（js-beautifyをラップ）
  • JS-CSS-HTMLフォーマッタ
    • しかし、すでにJS、HTML、JSONはVSコードでサポートされています
• CSSをフォーマットするには
  • CSSフォーマッタ
    • ただし、CSSのみがサポートされ、関連はすべてではない-6か月以上維持されない

フォーマットするには：

Prettierをインストールした後、VS CodeでAlt+ Shift+ Fを押します。

ローカルのbootstrap.min.cssをビジュアルスタジオコードで開いたところ、字下げされていないように見えました。コンマALT + Shift + Fを試したましたが、無駄でした。

次にインストール

CSSフォーマッタ拡張。

それをリロードして、Alt + Shift + Fで CSSファイルを魅力的にインデントしました。

ビンゴ!!!

ギャラリーにはいくつかの選択肢がありますが、私が使用しているものはかなりのレベルの構成可能性を提供しますが、それでも他の設定には目立たないままですが、Michele MellusoによるBeautifyです。CSSとSCSSの両方で機能し、残りのコードを2スペースに保ったまま3スペースインデントできるので便利です。

あなたもGitHubからそれをひったくりして、あなたがそれを好きに感じたら、あなた自身でそれを適応させることができます。

Prettierは非常に拡張可能ですが、そのまま使用しても完全に機能するため、使用をお勧めします。

1. CMD + Shift + P -> Format Document

または

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

[ファイル]メニュー-> [設定]-> [拡張]に移動し、CSS Formatterと入力します。読み込まれるまで待ち、[インストール]をクリックします。

HookyQR.beautify拡張機能をインストールします。Visual Studio CodeでJavaScript、JSON、CSS、Sass、HTMLを美化します。これは、この目的で最も使用される拡張機能です

Beautify（Github）とPrettier（Github）は、Visual Studio CodeでのWeb開発に最適なプラグインです。

必要なときにVisual Studioでコードをフォーマットするには、（Ctrl + K）＆（Ctrl + F）を押します。

自動フォーマットルールは次の場所にあり、変更できます：ツール/オプション->（左側のサイドバー）：テキストエディター/ CSS（または変更したいその他の言語）

CSS言語のオプションは、残念ながら非常に制限されています。以下を変更することもできます：... /テキストエディター/すべての言語