VSCodeでコピーした際にタブ空白がおかしくなる

Question

よろしくお願いします。
VSCodeでHTMLなどコーディングする中、前のコードを繰り返し書き込む場合にコピーを用いますが
複数行コピー（CTRL+C)をして複数行ペースト（CTRL+V)すると必ずペースト下側がズレてしまいます。

    <div class="container">
      <div class="row">
        <div class="col-10 bg-primary">1</div>
        <div class="col-2 bg-secondary">2</div>
      </div>
    </div>

    <div class="container">
      <div class="row">
        <div class="col-10 bg-primary">1</div>
        <div class="col-2 bg-secondary">2</div>
      </div>
      <div class="row">
          <div class="col-10 bg-primary">1</div>
          <div class="col-2 bg-secondary">2</div>
        </div>
      </div>

なるべくショートカットキーを使って行いたいのですが、何かいい方法はないのでしょうか？
また皆さんはどのように操作をされてコードのレイアウト崩れを防いでおられるのか
お聞かせいただけないでしょうか。

とても初歩中の初歩な質問で恐縮ですが、よろしくお願いします。

Answer 1

こんにちは。

おそらく、VSCode のインデント幅が間違った値に設定されています。そのため、formatOnPaste がフォーマットを実行した結果レイアウトが崩れます。

質問のドキュメントではインデント幅は2なので、Indent Using Spaces コマンドで明示的に2を設定してください。
または、設定から TabSize の値を変更することで永続的にインデント幅を変更できます。Language specific editor settings で HTML だけに設定しても良いでしょう。

他、根本的な解決にならないので推奨しませんが、formatOnPaste を false に設定することでコピペ時にフォーマッタを動作させないこともできます。

Comments

[退会済みユーザー]

editor.formatOnPasteはデフォルトでfalseで、falseの状態でも発生しますね。

[wkbiz]

>Indent Using Spaces 　→　２選択　で、期待通りになりました。

仰っておられる通り上記コマンド実行直後、４が選択されていました。
タブスペースと設定側が違ったことによるもの、ということで合っていますでしょうか。

ともあれ期待通りになって良かったです。有難うございました。

[tamoto]

確かに formatOnPaste を false にしていてもフォーマットされますね……確認不足でした。でもどうしてこうなるんだろう。

Answer 2

一応何度か発生させることは出来たものの正確な再現方法はわかりませんが、
おそらくタブ(スペース幅)が不揃いなのが原因かな？

貼り付けた後、1回元に戻すで意図したレイアウトに戻り2回目で消えるので
貼り付け後に誤動作で意図しない自動整形処理が入ってるっぽい？

____<div class="container"> ← タブ幅が4
    __<div class="row">     ← タブ幅が2

皆さんはどのように操作をされてコードのレイアウト崩れを防いでおられるのか

HTMLは書いてないですけど、
ドキュメントのフォーマット(Shift+Alt+F)にお任せですね。
崩れてもこれで治る

Comments

[wkbiz]

ご回答ありがとうございます