読者です 読者をやめる 読者になる 読者になる

vimコマンドでコードを貼り付けした際に起こるズレ

Terminalでvimコマンドを使ってテキストエディタ上のソースコードをそのままコピペをした際にインデントが右にズレてしまった。
そこで解決策を書きました!

まず普通にコードをコピペした場合

input[type="text"]
{
          width: 30%;
            border: 1px solid #ccc;
              border-radius: 4px;
                padding: 6px 12px;
                  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                      font-size: 14px;
                        line-height: 1.428571429;
                          color: #555;
}

input[type="submit"]
{
          margin-top: 30px;
            width: 30%;
              border: 1px solid #5cb85c;
                border-radius: 4px;
                  padding: 12px;
                    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                      font-size: 14px;
                        line-height: 1.428571429;
                          color: white;
                            background-color: #5cb85c;
}

select
{
          display: block;
            width: 30%;
              height: 34px;
                padding: 6px 12px;
                  font-size: 14px;
                    line-height: 1.428571429;
                      color: #555;
                        background-color: #fff;
                          border: 1px solid #ccc;
                            border-radius: 4px;
}

↑こんな風になってしまう

その対処法として
:set paste
を貼り付ける!


:set pasteした場合

input[type="text"]
{
  width: 30%;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
}

input[type="submit"]
{
  margin-top: 30px;
  width: 30%;
  border: 1px solid #5cb85c;
  border-radius: 4px;
  padding: 12px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  font-size: 14px;
  line-height: 1.428571429;
  color: white;
  background-color: #5cb85c;
}

select
{
  display: block;
  width: 30%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.428571429;
  color: #555;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
}

↑綺麗に貼り付けしてくれる


作業手順

  1. テキストエディタでコードをコピペする。
  2. terminalで貼り付けたいファイルを編集するためにvimで開く
  3. はじめに閲覧モードで:set pasteを打ち込む
  4. 通常通りcommand + vでファイル上にコピペする


これで綺麗に貼り付けできたと思います\(^o^)/
参考にしたサイト→http://cameong.hatenablog.com/entry/20120805/1344146992