web-dev-qa-db-ja.com

VS Codeで保存時にコードをどここのようにフォーマットしますか

Visual Studioコードでファイルを保存するときに、組み込みフォーマッタを使用してTypeScriptコードを自動的にフォーマットしたいと思います。

私は以下の選択肢を知っていますが、どれも十分ではありません。

  • 手動でフォーマットするShift + Alt + F
  • タイプ"editor.formatOnType": true でフォーマット
    • Enterキーを押すと行がフォーマットされます。残念ながら、別の行をマウスでクリックしたり上下の矢印を押したりすると、フォーマットされないままになります。
  • 既存の拡張子を使用する
  • きれいにする"beautify.onSave": true
    • TypeScriptでは機能しません
  • カスタム拡張子を書く
    • 自動保存を処理して正しく構築する場合は、注意が必要です。
visual-studio-codevscode-settingscode-formatting
112
Tomas Nikodym

2016年9月（VSCode 1.6）現在、これは正式にサポートされています。

以下をsettings.jsonファイルに追加します。

"editor.formatOnSave": true
169
Tomas Nikodym

保存時にコードを自動的にフォーマットするには：

  • 押す Ctrl, ユーザー設定を開く

  • 開いた設定ファイルに次のコードを入力してください

    {
    "editor.formatOnSave": true
}

  • ファイルを保存

出典

35
student

Javascriptソースだけを使って保存時に自動フォーマットしたい場合は、これをUsers Settingに追加してください（ Cmd, または Ctrl,）：

"[javascript]": { "editor.formatOnSave": true }
20
Long Nguyen

コマンドを追加する必要はもうありません。 Visual Studio Codeに不慣れで、保存時に簡単にコードをフォーマットする方法を探している方は、以下の手順に従ってください。

  1. Macの場合は[Cmd+,]を押すか、下のスクリーンショットを使用して設定を開きます。

VS Code - Open Settings Command Image

  1. 検索ボックスに「format」と入力し、オプション「保存時にフォーマット」を有効にします。

enter image description here

これで終わりです。ありがとうございました。

11
Balasubramani M

MACユーザーの場合は、この行をデフォルト設定に追加してください。

ファイルパスは/ Users/USER_NAME/Library/Application Support/Code/User/settings.jsonです。

"tslint.autoFixOnSave"：true

ファイルのサンプルは次のようになります。

{
    "window.zoomLevel": 0,
    "workbench.iconTheme": "vscode-icons",
    "TypeScript.check.tscVersion": false,
    "vsicons.projectDetection.disableDetect": true,
    "TypeScript.updateImportsOnFileMove.enabled": "always",
    "eslint.autoFixOnSave": true,
    "tslint.autoFixOnSave": true
}
0
Richard