vim-swap과 Tailwind CSS를 사용하는 클래스는 쓰기 편합니다.

vim-swap 소개

매개 변수, 배열 등 구분된 요소를 정렬하기 쉬운 Vim 플러그인입니다.
https://github.com/machakann/vim-swap
예를 봅시다.

입력g>만 하면 커서 아래의 요소my-auto와 다음 요소text-sm가 바뀐다.
마찬가지로 g<에서 커서 아래와 이전의 요소가 서로 바뀐다.
예를 하나 더 봅시다.
gs를 입력하면 요소 색상과 밑줄 추가 등의 변화가 발생합니다.이것은 정렬 모드입니다.
이어서 h에서 "커서 아래와 이전 요소의 교체",l에서 커서 다음 요소 대체가 발생합니다.
마지막으로 Escape 이 모드를 종료합니다.
또 하나의 예가 있다.
gs에서 정렬 모드에 들어가 g를 입력했습니다.그래서 선택 범위(GIF에서 주황색인 곳)가 넓어졌다.이것은 조를 나누는 것이다.
그리고 h와 l를 입력하면 그룹별로 교체할 수 있습니다.
기타 상세한 동작에 관해서는 설명서(일본어 및 영어 포함)을 읽어 주십시오.
요소를 정렬하거나 문자 객체로 사용할 수 있습니다.

vim-swap 설정

매개 변수와 그룹의 교체는 기본 설정을 유지할 수 있습니다.
여기에는 위 3개의 GIF와 같은class="hoge1 hoge2 hoge3"'class="과"에 둘러싸인 공백 분할 요소'의 정렬을 실현하는 설정을 나타낸다.
vimrc에 다음과 같은 내용을 쓰면 추가 설정을 할 수 있습니다.

let g:swap#rules = deepcopy(g:swap#default_rules)
let g:swap#rules += [{
    \   'filetype': ['html', 'vue', 'md'],
    \   'delimiter': ['\s'],
    \   'surrounds': ['class="', '"', 0],
    \ },{
    \   'filetype': ['html', 'vue', 'md'],
    \   'delimiter': ['\s'],
    \   'surrounds': ["class='", "'", 0],
    \ }]

처음에 기본 설정을 복사한 다음에 자신의 설정만 추가했습니다."filetype" 동작이 필요한 파일 유형(쓰지 않아도 OK)"delimiter" 공백으로 구분"surrounds"에 울타리 문자를 지정합니다.0는 네스트가 없음(쓰지 않아도 됨)을 나타냅니다."delimiter"와 "surrounds"는 정규 표현식으로 지정한다.

최후

예에서 보여준 3개의 GIF는 Vue 파일Tailwind CSS에 쓰여 있지만 내용이 매우 적합하다.
또한, Tailwind CSS를 Vim으로 쓸 때iamcco/coc-tailwindcss.
참고로 코크-tailwindscsstailwindCSS.headwind.sortTailwindClasses 명령을 사용하면 클라스 정렬을 할 수 있다(정확히 말하면 heybourn/headwind 기능인 것 같다).
하지만 저는 종교적인 이유로vim-swap을 사용합니다.