VS Codeでの保存時にコードをフォーマットする方法

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

私は次のオプションを知っていますが、どれも十分ではありません。

• 手動でフォーマット Shift + Alt + F
• タイプのフォーマット "editor.formatOnType": true
  • Enterキーを押すと、行がフォーマットされます。不愉快なことに、別の行をマウスでクリックするか、上下矢印キーを押すと、フォーマットされません。
• 既存の拡張機能を使用
  • 私はこの試みたものを、あまりにもうまく動作するようには思えません。
• 美化を使用する "beautify.onSave": true
  • TypeScriptでは動作しません
• カスタム拡張を書く
  • 自動保存とビルドを正しく処理したい場合は注意が必要です。

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

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

"editor.formatOnSave": true

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

• 押しCtrl ,てユーザー設定を開きます

• 開いた設定ファイルに次のコードを入力します

  {
      "editor.formatOnSave": true
  }

• ファイルを保存

ソース

JavaScriptソースのみで保存時に自動フォーマットする場合は、これをUsers Setting（プレスCmd,またはCtrl,）に追加します。

"[javascript]": { "editor.formatOnSave": true }

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

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

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

完了です。ありがとうございました。

以下のための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
}