VS Code 지저분한 Tab 깨끗하게 자동 정렬해주는 단축키

HTML, CSS, Javascript 또는 파이썬 코딩할 때 코드가 길어지면서 의외로 탭 정렬하는데 시간이 많이 들어갈때가 많다. 또 이걸 자동으로 하려고 세팅에 들어가서 이것저것 해봤는데도 잘 안된다. 이제는 세팅 들어갈 필요없이 이 단축키 하나면 깔끔하게 정리가 된다. 특히, 원하는 범위만 정렬되게 선택할 수 있어서 너무 편리해졌다. 왜 이제 알았지? ㅠㅠ

 

1. 지저분한 코드가 아래와 같이 있다고 해보자.

    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
                        <div class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
<div class="mx-auto max-w-xs px-8">
<p class="text-base font-semibold text-gray-600">Pay once, own it forever</p>
                          <p class="mt-6 flex items-baseline justify-center gap-x-2">
<span class="text-5xl font-bold tracking-tight text-gray-900">$349</span>
<span class="text-sm font-semibold leading-6 tracking-wide text-gray-600">USD</span>
  </p>
                                      <a href="#"
      class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
                     access</a>
  <p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
</div>
                      </div>
          </div>

 

2. 정렬을 하고 싶은 부분을 마우스로 긁는다.

 

 

3. 순서데로 단축키를 눌러준다.

Ctrl + K  →  F

 

Ctrl + F를 먼저하게 되면 찾기 기능이 되기 때문에 순서를 지켜야 한다. 이것말고는 아무 세팅할 필요도 없고 너무너무 편하게 쓸 수 있다. 참고로, autopep8 같은 Extentions가 없는데 설치할까? 라는 메세지가 나오면 다 Yes 해주면 된다.

 

아래는 Tab이 자동 정렬된 결과다. 정말 완벽하다!

    <div class="-mt-2 p-2 lg:mt-0 lg:w-full lg:max-w-md lg:flex-shrink-0">
      <div
        class="rounded-2xl bg-gray-50 py-10 text-center ring-1 ring-inset ring-gray-900/5 lg:flex lg:flex-col lg:justify-center lg:py-16">
        <div class="mx-auto max-w-xs px-8">
          <p class="text-base font-semibold text-gray-600">Pay once, own it forever</p>
          <p class="mt-6 flex items-baseline justify-center gap-x-2">
            <span class="text-5xl font-bold tracking-tight text-gray-900">$349</span>
            <span class="text-sm font-semibold leading-6 tracking-wide text-gray-600">USD</span>
          </p>
          <a href="#"
            class="mt-10 block w-full rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Get
            access</a>
          <p class="mt-6 text-xs leading-5 text-gray-600">Invoices and receipts available for easy company reimbursement</p>
        </div>
      </div>
    </div>