Visual Studio Code(VSCode)でコードをフォーマットする方法


990

Visual StudioのWindowsでのCtrl+ K+ FおよびCtrl+ K+のD書式設定、またはVisual Studioコードエディターの「美化」コードに相当するものは何ですか。


47
XMLフォーマットするために必死に努力しているすべての人(現在のところ、これは現在では不可能のようです)に対して、拡張機能をインストールすることでこれを実現できます。XMLツールを見つけて、仕事をうまくやり遂げました。免責事項:私はこのプロジェクトの作者でも関連者でもありません...
informatik01

VSCodeのメニューオプションはVS(新しいトレンド?)よりもはるかに少ないですが、ヘルプメニューの下に広範な情報とチュートリアルがあり、この質問に答えている可能性があります。
ローランド

Visual Studio Codeで有効な組み合わせを試してもフォーマット作業に苦労しているすべての人にとって、適切なプログラミング言語タイプを選択することを忘れないでください。それはVisual Studioコードウィンドウの右下、その笑顔の隣にあります。そうしたら、すぐに動作し、コードをフォーマットするための追加のプラグインは必要ありません。
Mr.Hunt、2017年

回答:


3843

コードの書式設定は、次のショートカットを使用してVisual Studio Codeで利用できます。

  • Windowsの場合Shift+ Alt+F
  • Macの場合Shift+ Option+F
  • Linuxの場合Ctrl+ Shift+I

または、Ctrl+ Shift+ P(またはMacではCommand+ Shift+ P)を使用してエディターに提供されている「コマンドパレット」からショートカットやその他のショートカットを検索し、フォーマットドキュメントを検索することもできます


28
また、コード言語が正しい必要があることに注意してください。つまり、プレーンテキストが選択されている場合、フォーマットコードは使用できませんが、JSON(たとえば)に切り替えると、選択されたテキストが適切にフォーマットされます。(とにかくテキストエディターと同じくらいうれしい)
Stephen Price

4
@JoSmo:Ubuntuで、[ファイル]> [設定]> [キーボードショートカット]を開きました。{"key": "ctrl + shift + i"、 "command": "editor.action.format"、 "when": "editorTextFocus"}の項目があります。コマンド「ctrl + shift + i」は私にとってはうまくいきます。
Asheesh

18
また、どうやらファイルは最初にディスクに保存する必要があるようです。HTMLとJavascriptのかたまりがあり、JSをフォーマットできないため、一時ウィンドウに貼り付けて言語を設定しましたが、保存するまでこれは役に立ちませんでした。
ジョナス

9
Macでは機能しないと言っている人にとって、これはショートカットとアクセント付き文字のOS Xテキスト入力システムの間の競合のようです。これは、構成されたロケールとキーボード設定に依存します: github.com/Microsoft/vscode/issues / 8914#issuecomment-245947844
クリスアダムス

8
これはVS Codeの最新バージョンとwin 10では機能しません。これは、特定の拡張機能がインストールされていることを前提としていますか?
JayPex

479

コードフォーマットのショートカット:

Windows上のVisual Studioコード- Shift+ Alt+F

MacOS上のVisual Studioコード- Shift+ Option+F

UbuntuのVisual Studioコード- Ctrl+ Shift+I

必要に応じて、環境設定を使用してこのショートカットをカスタマイズすることもできます。

ファイル保存中のコードのフォーマット:

Visual Studio Codeを使用すると、ユーザーはデフォルト設定をカスタマイズできます。

保存中にコンテンツを自動フォーマットする場合は、Visual Studio Codeのワークスペース設定に以下のコードスニペットを追加します。

メニューファイル設定ワークスペース設定

{
    // Controls if the editor should automatically format the line after typing
    "beautify.onSave": true,

    "editor.formatOnSave": true,

    // You can auto format any files based on the file extensions type.
    "beautify.JSfiles": [
        "js",
        "json",
        "jsbeautifyrc",
        "jshintrc",
        "ts"
    ]
}

注:TypeScriptファイルを自動フォーマットできるようになりました。更新を確認してください。


これで別の言語でも機能します:
Beautify

3
CentOSでなぜ違うのかはShift + Alt + I
わかり

2
beautify.onSaveは、eslint拡張がインストールされている場合は無効です
Ben Petersen

ubuntu mate 17.04 Shift + Alt + Iでも
Pini Cheyni

2
@ClintEeastwoodをprettier.singleQuote: truevsコード設定で使用してみてください。
Enn、2018年

216

メニューのファイル設定キーボードショートカットでキーバインドを追加できます。

{ "key": "cmd+k cmd+d", "command": "editor.action.formatDocument" }

またはVisual Studioのように:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.formatDocument" }

23
Windowsでは、次のものに置き換えcmdてくださいctrl-私のように盲目的にコピーして貼り付けないでください!
Jens Ehrich

3
「editor.action.format」が再び機能します。何も選択されていない場合はドキュメント全体をフォーマットし、それ以外の場合は選択範囲をフォーマットします。
赤ずきん

198
  1. ファイルを右クリック
  2. メニューから[ ドキュメントのフォーマット ]を選択します。
    • ウィンドウズ: Alt Shift F
    • Linux: Alt Shift I
    • マックOS: F

ここに画像の説明を入力してください


18
Linuxの場合、キーボードショートカットはCtlr + Shift + I
Lucas

メニューボックスとは
Peter Mortensen

@PeterMortensenメニューが表示されるボックス。スクリーンショットでは、「Format Document」、「Cut」、「Copy」、「Paste」などが表示された白いボックスです
Ben Leggiero

117

正しいキーの組み合わせはShift+ Alt+ Fです。


2
クリップボードから新しいタブにコードをコピーして貼り付けるだけでは、何も起こりません。ソリューション:保存し、関連したファイルにコードファイルの拡張子(例:* .json)。その後、動作します。その理由は、美容師が拡張機能から言語を知っており、コードに基づいて自動検出を行わないためだと思います。
ビューティー

このショートカットはMACで機能します。Windowsでは、コードをフォーマットします。
C.ダモク

63

Fedoraの場合

  1. File-> Preferences->をクリックしKeyboard shortcutsます。
  2. Default Keyboard Shortcuts、(Ctrl+ F)を検索しeditor.action.formatます。

私が読んだ "key": "ctrl+shift+i"

変更することもできます。方法については、この回答を参照しください...または、上にスクロールするのが少し面倒な場合


「設定->キーボードショートカット」でキーバインドを追加できます。

{ "key": "cmd+k cmd+d", "command": "editor.action.format" }

またはVisual Studioのように:

{ "key": "ctrl+k ctrl+d", "command": "editor.action.format" }


注意:cmdキーはMac専用です。WindowsおよびFedora(Windowsキーボード)の場合Ctrl


編集

Visual Codeのバージョンに従って、1.28.2これは私が見つけたものです。

editor.action.formatもはや存在しない。それは今に置き換えられているeditor.action.formatDocumenteditor.action.formatSelection

editor.action.format検索ボックスに入力して、既存のショートカットを表示します。

キーの組み合わせを変更するには、次の手順に従います。

  1. editor.action.formatDocumentまたはをクリックしますeditor.action.formatSelection
  2. ペンのようなアイコンが左側に表示されます-クリックします。
  3. ポップアップが表示されます。目的のキーの組み合わせを押して、Enterキーを押します。

このコマンドを使用すると、私のTypeScriptファイルでは、単一引用符が二重引用符になります。それを解決するには?
DioBrando

新しい設定のガベージUIでこれを見つけることができないようです。
Oliver Dixon

63

LinuxではそれがありますCtrl+ Shift+ I

WindowsではそれがありますAlt+ Shift+ F。HTML / CSS / JavaScriptおよびVisual Studio Code 1.18.0でテスト済み。

他の言語の場合、特定の言語パッケージをインストールする必要がある場合があります。


61

Visual Studio Code 1.6.1は、「保存時にフォーマット」をサポートしています。これにより、関連するインストール済みフォーマッター拡張機能が自動的に取得され、保存ごとにドキュメント全体がフォーマットされます。

設定により「保存時にフォーマット」を有効にする

"editor.formatOnSave": true

利用可能なキーボードショートカットがあります(Visual Studio Code 1.7以上):

ドキュメント全体をフォーマットするShift+ Alt+F

形式の選択のみCtrl+ KCtrl+F


私は、VSのコードのためのEsLint延長示唆marketplace.visualstudio.com/...
ダリウス

44

UbuntuではCtrl+ Shift+ Iです。


7
言語に依存すると思います。 CTRL + SHIFT + Iたとえば、JavaScriptでは機能しますがPHPでは機能しません。
ジェイミーカール

32

テキストを右クリックして[フォーマットコード]を選択します。

Visual Studio Codeはjs-beautify内部的に使用しますが、使用するスタイルを変更する機能がありません。拡張機能「美化」を使用すると、設定を追加できます。


1
もちろん、私はWindowsを使用しており、説明どおりに機能します。VScodeのバージョン(更新してください!)とファイル拡張子に依存する場合があります。HTMLでテストしてください。
ゲルフリート


32

メニュー ファイル設定設定

"editor.formatOnType": true

セミコロンを入力すると、フォーマットされます。

または、を使用することもできます"editor.formatOnSave": true


奇妙なことに、私はこの設定の動作がshift+alt+f特定の状況とは異なる場合があることを発見しました。なぜだかわからない!
JzInqXc9Dg 2018

これを有効にしてC#で関数を作成すると、すべてを完了して先に進むことができますが、「ドキュメントのフォーマット」機能を実行するまで関数はフォーマットされません。関数を入力した後、上記の設定がフォーマットされない理由がわかりません。
ダニエルジャクソン


24

なんらかの理由で、Mac Visual Studio Code 1.3.1ではAlt+ Shift+ Fが機能せず、実際に "Format Document"コマンドがまったく機能しませんでした。しかし、コマンドフォーマッタは非常にうまく機能しました。

Command+ Shift+ Pを使用してFormatterと入力するか、メニューのファイル設定キーボードショートカットCommand+ K Command+で独自のショートカットを作成し、S次にFormatterと入力してショートカットを追加します。

例を見る:

ここに画像の説明を入力してください


23

Visual Studioでのコードのフォーマット。

Windows 8でフォーマットしようとしました。

以下のスクリーンショットに従ってください。

  1. 上部のメニューバーの[表示]をクリックし、[コマンドパレット]をクリックします。

    ここに画像の説明を入力してください

  2. 次に、フォーマットが必要な場所にテキストボックスが表示されます

    Shift+ Alt+F

    ここに画像の説明を入力してください


1
ときどき、貼り付けたxmlを新しいファイルにコピーし、ファイルを保存せずにフォーマットしたいと思います。これはそのような状況に最適です!
user3885927

19

Visual Studioのコードでは、Shift+ Alt+はF何やっているCtrl+ K+ DのVisual Studioでやっています。


18

Mono for Mac OS X、DNVM、およびDNXをインストールするまで、C#のフォーマットショートカットは機能しませんでした。

Monoをインストールする前は、自動フォーマットショートカット(Shift+ Alt+ F)は.jsonファイルに対してのみ機能していました。


C#をフォーマットするには、拡張機能をインストールする必要があります。通常、omnisharpが機能するはずです。ただし、omnisharpにはバグがあります。バグが修正されるまで、Leopotam.csharpfixformat拡張機能を使用する必要があります。omn​​isharpをオーバーライドします。C#FixFormat拡張機能をインストールした後、ドキュメントを再度フォーマットできます。
Oncel Umut TURER 2017

18

MacではShift+ Alt+でFうまくいきます。

メニューのキー割り当てはいつでも確認できます。

メニューファイル設定キーボードショートカットとキーワード「フォーマット」でフィルタリングします。


14

Visual Studio Codeのデフォルトの動作を変更するには拡張機能が必要ですが、ワークスペースレベルまたはユーザーレベルでデフォルトの動作をオーバーライドできます。サポートされているほとんどの言語で動作します(HTML、JavaScript、およびC#を保証できます)。

ワークスペースレベル

利点

  • 拡張機能は必要ありません
  • チーム間で共有できます

成果

  • .vscode/settings.json プロジェクトのルートフォルダに作成されます

方法?

  1. 移動:メニューファイル設定ワークスペース設定

  2. "editor.formatOnType": truesettings.json を追加して保存します(これは、.vscode / settings.jsonファイルを作成して、作業するプロジェクトのデフォルトの動作を上書きします)。

    外見

ユーザー環境レベル

利点

  • 延長は必要ありません
  • それらすべてを支配する個人開発環境の週(設定:))

成果

  • ユーザーのsettings.json変更(下記のオペレーティングシステム別の場所を参照)

方法?

  1. 移動:メニューファイル設定ユーザー設定

  2. ユーザーのsettings.json で"editor.formatOnType": falseto の値を追加または変更し"editor.formatOnType": trueます

Visual Studio Codeユーザー settings.json場所は次のとおりです。

プラットフォームに応じた設定ファイルの場所。ユーザー設定ファイルは次の場所にあります。

  • ウィンドウズ: %APPDATA%\Code\User\settings.json
  • マック: $HOME/Library/Application Support/Code/User/settings.json
  • Linux:$HOME/.config/Code/User/settings.jsonワークスペース設定ファイルは、プロジェクトの.vscodeフォルダーにあります。

詳細については、こちらをご覧ください


9

デフォルトでは、このキーはHTML、CSS、およびJavaScriptドキュメントでは機能しませんでした。

検索した後、インストール数133,796の人気のプラグインJS-CSS-HTML Formatter見つけました

インストール後、ウィンドウをリロードしてCtrl+ Shift+を押すだけFで動作しました!


ええ、でも星5つのうち2つだけ?マジ?
kmoser

ただ注意してください:この回答はもともと2017年に書かれていて、当時はVS Code機能はプラグインや他のハックを介してほとんど機能していましたが、他の解決策はどれも私のために機能しませんでした星がいくつあるか気にしました:-)今、2020と書式設定のサポートは、箱から出して素晴らしいです。
mumair

VS Codeは、CSSのフォーマットをそのまま使用できるとはまだ思いません。JavaScript、TypeScript、Flow、JSX、JSON、CSS、SCSS、Less、HTML、Vue、Angular、GraphQL、Markdown、YAMLを処理するPrettierプラグイン(prettier.io)をインストールしました。インストール数560万、星4つ。
kmoser

prettier:Pフォーマットのサポートはありますが、prettierほど良くありません.prettierrc。プラグインを使用するすべてのプロジェクトで、devt-dependencyとしてprettierを使用しています。ある日きれいにvs-codeにマージされると
思い

8

テキストを選択し、選択範囲を右クリックして、オプション「コマンドパレット」を選択します。

ここに画像の説明を入力してください

新しいウィンドウが開きます。「フォーマット」を検索し、要件に従ってフォーマットされているオプションを選択します。




7

フォーマットするJavaScriptファイルをカスタマイズする場合は、プロパティで任意の拡張子を使用できJSfilesます。同じことがHTMLにも当てはまります。

{
    "beautify.onSave": true,
    "beautify.JSfiles": ["js", "json", "jsbeautifyrc", "jshintrc", "ts"],
    "beautify.HTMLfiles": ["htm", "html"]
}

これにより、TypeScriptの保存時に美化が有効になり、HTMLオプションにXMLを追加できます。


1
これはどこに置くの?それはまた、美化が拡張機能であることを追加するのに役立ちます...
rotgers

あなたこのコードをどこに置くべきか述べたかもしれません。
gromit190

6

フォーマットドキュメントのスタイルをカスタマイズする場合は、Beautifyを使用する必要があります拡張。

このスクリーンショットを参照してください:

img


6

最初に適切なプラグイン(つまり、XML、C#など)をインストールする必要があります。

関連するプラグインをインストールし、適切な拡張子を付けてファイルを保存するまで、フォーマットは利用できません。


Beautifyは、使用するフォーマッターがわからない場合は、cshtmlのスタイルを設定できるかどうかを尋ねます。
Cees Timmerman、2018年

6

Visual Studio Code(Ubuntu)で使用する最も簡単な方法は次のとおりです。

書式設定するテキストをマウスで選択します。

右クリックして[ フォーマットの選択 ]を選択します。


5

これじゃない。これを使って:

メニューファイル設定ワークスペース設定"editor.formatOnType"true


3
これじゃないの?別の答えを参照していますか?はいの場合、どれですか?
Peter Mortensen


2

LinuxのVisual Studio Code:

Ctrl+ [コードのブロックをインデント解除し、

Ctrl+ ]マスインデントを作成する

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.