web-dev-qa-db-ja.com

ビジュアルスタジオコードCSSのインデントとフォーマット

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

JavaScriptではうまく機能しますが、CSSではうまくいきません。

cssvisual-studio-code
82
A. DC

はい、 vscode-css-formatter extension をインストールしてみてください。 .cssファイルをフォーマットする機能を追加するだけで、ショートカットはAlt+Shift+Fのままです。

87
NValchev

css/sass/scss/lessを美しくする

これを実行する

alt+shift+fを入力

または

F1またはctrl+shift+pを押してから、beautifyと入力してください。

enter image description here

もう一つ - JS-CSS-HTML Formatter

私はこの両方の拡張が js-beautify を内部的に使っていると思います

38
bhv

最善の選択肢を見つけるのに1時間浪費した。

読みやすく、それらを1つ選択するために、まとめてください。

注：

  • CSSとSASS/SCSS/LESSはすべて関連しています
  • HTML、Javascript、TypeScript、JSON - VSコードはすでにフォーマットされています
  • CSSと関連 - VSコードは今日のようにnotフォーマットです

オプション：

フォーマットするには：

VSコードでAlt + Shift + Fを押す
たとえば、Prettierをインストールした後

それが役立つことを願っています。

12
Manohar Reddy Poreddy

ビジュアルスタジオコードでローカルbootstrap.min.cssを開いた後、それはインデントされていないように見えました。コマンドを試してみましたALT + Shift + Fしかし無駄。

その後インストール

CSSフォーマッタ拡張子。

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

ビンゴ！

5
Shahbaaz Khan

ギャラリーには、選ぶべきものがいくつかありますが、私が使用しているものは、かなりのレベルの設定可能性を提供し、残りの設定を邪魔にならないようにしています Michele MellusoによるBeautify 。これはCSSとSCSSの両方で機能し、コードの残りの部分を2スペースに保ちながら3スペースをインデントすることができます。これは素晴らしいことです。

あなたは GitHub からそれを奪い取って自分でそれを適応させることができます。

4
Konrad Viltersten

非常に拡張性があるので Prettier を使用することをお勧めしますが、それでも箱から出して完全に機能します。

1. CMD + Shift + P -> Format Document

または

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

「ファイル」メニュー - >「設定」 - >「拡張」の順に選択し、CSS Formatterと入力してロードされるのを待ち、「インストール」をクリックします。

2
lilhamad

HookyQR.beautify拡張機能をインストールしてください。それはあなたのジャバスクリプト、JSON、CSS、Sass、そしてVisual StudioコードのHTMLを美しくするでしょう。それはこの目的のための最も使用拡張です

1
William Dekou