[VSCODE] 태그를 감싸는 감싸기(wrap) Emmet

퍼블리싱을 하다보면 <p> 태그 중간에 <span>, <u>, <i>, <strong>, <a> 등 특정 태그를 감싸야하는 경우가 있다. 처음부터 태그를 입력하면 좋겠지만 대부분 내용을 자료에서 복사해서 사용하기 때문에 나중에 감싸는 편이 효율이 좋다.

 

처음엔 일일히 타자로 작성했었으나 wrap emmet이 있다는 걸 알곤 해당 기능을 사용하고 있다.

 

사용법

1. 위 HTML에서 'everything'과 'random'에 <a> 태그를 추가하고 싶기 때문에 우선 해당 단어를 선택한다. (alt를 눌러 두 단어 동시 선택도 가능하다)

2. 그리고 F1을 눌러 나오는 검색창에 wrap이라고 검색하면 emmet 항목이 뜨는데 클릭, 혹은 엔터를 눌러 활성화 시켜준다.

3. a를 입력해주면 완료. 참고로 emmet이기 때문에 해당 규칙을 지켜 작성하면 이런식으로도 감싸는 것이 가능하다.

결과물

 

단축키 설정

1. 사용법의 2번 순서에서 '톱니바퀴 아이콘'을 클릭한다.

2. 키 바인딩을 더블클릭해 단축키를 입력해준다.

나는 prettier의 단축키는 shift+alt+f로 되어 있어서 shift+alt+w으로 결정했다. 언젠가 바뀔지도.