vscodeでvueファイルをフォーマットする方法を詳しく解説

この記事では、vscode で vue ファイルを整形する方法を、ショートカット キーのカスタマイズ方法も含めて紹介します。一定の参考値があるので、困っている友達が参考になれば幸いです。

vscode で beautify プラグインを使用して vue ファイルをフォーマットする

1. まず、プラグイン beautify をインストールします

[推奨学習: "vscode チュートリアル "]

2. 設定を開く => beautify. language を検索

3. json を設定するだけです

"beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "html",
            "vue"//在这里加上vue
        ]
    }

特定の用途 (設定せずに無視できます)

1. 作業ディレクトリに .jsbeautifyrc ファイルを作成します。

 {
   "brace_style": "none,preserve-inline",
   "indent_size": 2,
   "indent_char": " ",
   "jslint_happy": true,
   "unformatted": [""],
   "css": {
     "indent_size": 2
   }
 }

ファイルの内容は上記の通りで、いくつかのパラメータが強調表示されているはずです。

• brace_style、フォーマット スタイル、詳細については公式の説明を参照してください (eslint のデフォルト チェックとの競合を避けるために、この属性を none に設定することをお勧めします) prepare-inline)
• indent_size、インデントの長さ (eslint のデフォルト チェックとの競合を避けるため、このプロパティを 2 に設定することをお勧めします)
• indent_char, 塗りつぶされた内容をインデントします (♂でいっぱい)
• jslint_happy:true, jslint で使用したい場合はオンにしてくださいこのオプション
• #unformatted: ["a","pre"]、書式設定する必要のないタグ タイプは次のとおりです。 template もデフォルトでは整形されていないので、.vue のテンプレートタグを整形する必要がある場合は、.jsbeautifyrc のテンプレートなしで宣言属性を再定義してください。

.jsbeautifyrc 設定の公式ドキュメントのアドレス: ここをクリック

2. 保存時に VSCode 設定ファイルに # を自動で追加します。 ##editor.formatOnSave:true保存時に自動フォーマットを実現できます

ps: 操作を容易にするためにショートカット キーをカスタマイズできます 1. ショートカット キーの設定手順

2. カスタム ショートカット キー

 {
  "key": "ctrl+b",//自己定键位
  "command": "HookyQR.beautify",
  "when": "editorFocus"
}

ps:エディター 定義されたショートカット キーについては、ここをクリックしてキーを直接入力してください。

プログラミング関連の知識の詳細については、

プログラミング ビデオ を参照してください。 ！

以上がvscodeでvueファイルをフォーマットする方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。