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

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

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

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

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

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

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ファイルを自動フォーマットできるようになりました。更新を確認してください。

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

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

またはVisual Studioのように：

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

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

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

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.formatDocumentとeditor.action.formatSelection。

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

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

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

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

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

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

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

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

"editor.formatOnSave": true

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

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

形式の選択のみ：Ctrl+ K、Ctrl+F

UbuntuではCtrl+ Shift+ Iです。

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

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

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

"editor.formatOnType": true

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

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

Shift+ Alt+ F1.17.2以降では問題なく機能します。

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

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

例を見る：

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

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

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

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

   

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

   Shift+ Alt+F

   

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

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

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

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

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

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

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フォルダーにあります。

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

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

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

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

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

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

MicrosoftのVisual Studio Keymapをインストールするだけです。問題が解決しました。：p

マック、使用中の⌘+ K、その後⌘+ F。

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

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

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

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

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

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

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

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

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

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

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

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

拡張機能を使用...

ファイルを保存するときに、コードの自動フォーマットを有効にします。

Visual Studio Codeとクイックオープン（Ctrl+ P）を起動し、次のコマンドを貼り付けてを押しEnterます。

ext install format-on-save

https://marketplace.visualstudio.com/items?itemName=gyuha.format-on-save

LinuxのVisual Studio Code：

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

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