webdevqa.jp.net

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

同等のものは何ですか Ctrl + K + F そして Ctrl + K + D フォーマット、またはVisual Studioのコードエディタでコードを "美化"するためのVisual StudioのWindows上で?

990
Brandon Clapp

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

  • Windowsの場合 Shift + Alt + F
  • Macの場合 Shift + Option + F
  • Ubuntuについて Ctrl + Shift + I

代わりに、あなたは他のショートカットと同様にショートカットをエディタで提供される検索機能を通して見つけることができます。 Ctrl +ShiftP (または Command + Shift + P Macの場合は、フォーマットのドキュメントを検索します。

2974
Brandon Clapp

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

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ファイルを自動フォーマットできます。私のアップデートをチェックしてください。

412

あなたはメニューにキーバインドを追加することができます ファイル 設定 キーボード ショートカット。

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

または Visual Studio のように:

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

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

112
César
  1. ファイルを右クリック
  2. フォーマット文書を選択Alt + Shift + Fメニューボックスから).

Enter image description here

80
Siddarth Kanted

また、今日の時点でこれらの言語でフォーマットが利用可能であることにも注意してください。

69
Johannes Rieken

Linuxではそれは Ctrl + Shift + I

Windowsでは Alt + Shift + F。 HTML/CSS/JavaScriptとVisual Studio Code 1.18.0でテスト済み。

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

59

Fedora用

  1. File - > Preferences - > Keyboard shortcutsをクリックします。
  2. Default Keyboard Shortcutsの下で、(Ctrl + Feditor.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


EDIT

ビジュアルコードのバージョン1.28.2に従って、これは私が見つけたものです。

editor.action.formatはもう存在しません。現在はeditor.action.formatDocumenteditor.action.formatSelectionに置き換えられています。

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

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

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

Visual Studioのコード1.6.1保存時のフォーマット」をサポートしています。保存ごとに文書化します。

設定で "保存時にフォーマット"を有効にする

"editor.formatOnSave": true

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

文書全体をフォーマットする: Shift + Alt + F

フォーマット選択のみ: Ctrl + K、 Ctrl + F

55
Dariusz

Ubuntuでは Ctrl + Shift + I

41
ranbuch

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

Visual Studio Codeは内部でjs-beautifyを使用しますが、使用したいスタイルを変更する機能はありません。拡張子 "beautify"を使うと設定を追加できます。

27
Gerfried

何らかの理由で Alt + Shift + F 私はMac Visual Studio Code 1.3.1では動作しませんでした、そして実際には "Format Document"コマンドはまったく動作しませんでした。しかし、commandFormatterはとてもうまくいきました。

だからあなたは使用することができます Command + Shift + P そして、Formatterとタイプするか、メニューに独自のショートカットを作成しますFile設定キーボードショートカット→ Command + KCommand + S 次に、Formatterと入力してショートカットを追加します。

例を見てください。

Enter image description here

24

Shift + Alt + F 1.17.2以降ではうまく機能します。

22
Piotrek Hryciuk

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

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

17
Jo Smo

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

17
Burk

Macでは、 Shift + Alt + F 私のために働きます。

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

メニューファイル設定キーボードショートカットそしてキーワード 'format'でフィルタリングします。

14

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

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

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

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

    Enter image description here

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

    Shift + Alt + F

    Enter image description here

14
afeef

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

ワークスペースレベル

メリット

  • 拡張子を必要としません
  • チーム間で共有できます

結果

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

どうする?

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

  2. "editor.formatOnType": trueをsettings.jsonに追加して保存します(これは、作業するプロジェクトのデフォルトの動作(.vscode/settings.jsonファイルを作成することによってオーバーライドされます))。

    How it looks

ユーザー環境レベル

メリット

  • 延長は不要
  • すべてを統制するための個人用開発環境の調整(設定:)

結果

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

どうする?

  1. Menu ファイル設定ユーザー設定

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

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

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

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

詳細は here をご覧ください。

11

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

検索した後、私は人気のあるプラグイン JS-CSS-HTML Formatter with133,796をインストールしました

インストールが完了したら、ウィンドウをリロードしてヒットしてください。 Ctrl + Shift + F、そしてそれはうまくいった!

8
mumair

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

"editor.formatOnType": true

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

7
M Fatih Koca

テキストを選択し、選択部分を右クリックして、オプション "コマンドパレット"を選択します。

Enter image description here

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

6
Akhil Ghatiki

Macでは、 +K その後 +F

6
Gopal Devra

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

6
Rudy

Format-documentのスタイルをカスタマイズしたい場合は、 Beautify extensionを使用してください。

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

img

5
Jerry Ni

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

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

4
杨恩锋

あなたは最初に適切なプラグインをインストールしなければなりません(すなわち、XML、C#など)。

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

4
Nigel Feasey

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

マウスでフォーマットしたいテキストを選択します。

右クリックして "Format selection" を選択します。

4
Ashutosh Jha

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

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

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

3
Rick

Linux上のVisual Studioコード:

Ctrl + [ 思わずコードブロックに

Ctrl + ] 大量の字下げをする

1
Hvitis

拡張子を使用...

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

Visual Studioのコードを起動し、クイックオープンCtrl + P)、次のコマンドを貼り付けて、 Enter

extインストール保存形式

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

0
Gyuha Shin