VSCode에서 정규식 검색으로 같은 패턴 일괄 바꾸기

업데이트 - 서브라임 텍스트에서도 된다. 역시 서브라임을 버릴 수가 없어… ㅠ

주 에디터는 서브라임 텍스트인데 일부 기능을 위해 최근 대세인 VSCode를 사용한다. VSCode로 넘어가려고 몇번을 시도해봤는데 서브라임에 너무 손에 익어서 뭔가 꼭 불편하고, 플러그인을 통해서 해결을 하고 나면 다른 불편함이 또 생겨서 서브라임으로 안되는 상황에서만 사용중이다.

여튼 최근 Sass 컬러 코드 연산에서 디프리케이션된 내용을 일괄적으로 수정해야될 내용이 있었다.

a.example {
    &:active {
        background: #fff - 10%;
    }
}

이런식으로 표현한 부분인데 컬러코드에 연산을 넣는 것이 팀에서 사용중인 UI프레임워크에서 디프리케이션 되면서 일괄적으로 바꿔줘야했고 서브라임을 주로 써서 몰랐는데 팀장님이 알려주셔서 VSCode에서는 정규식으로 검출해내고 일괄 바꿀 수 있는게 가능했다. 단축키는 commmand + shift + h

팀장님이 제시해주셨던 정규식은

Search : :\s(\#.+)\s(\-)?\+?\s(\d+)%?;$
Replace : : adjust-color($1, $red: $2$3, $green: $2$3, $blue: $2$3);

그런데 나중에 확인해보니 컬러값을 변수에 담아 쓴 경우도 있었다.

Search : :\s((\#|\$).+)\s(\-)?\+?\s(\d+)%?;$

그래서 위처럼 수정했는데… $n: $i + 1; 이런 것도 함께 검출되는 문제가 있었고, 이건 딱히 해결 방법을 찾지 못해 컬러값의 변수를 한글자만 썼을리 없다는 불완전한 가정하에

Search : :\s((\#|\$)..+)\s(\-)?\+?\s(\d+)%?;$

로 검출 결과를 확인하고 바꾸는건 일일이 확인하면서 처리 ㅠ_ㅠ

참고로 위처럼 할 경우 교체내용은

Replace : : adjust-color($1, $red: $3$4, $green: $3$4, $blue: $3$4);

위는 사실 몇주 지난 일로 기록하지 않으려다 쓸일이 생긴 김에 쓴거고, 팀내 구 프레임워크를 신규 프레임워크로 변경해야될 일이 생기면서 관련하여 필터 사용방식이 일부 변경된 사항이 있어서 또 일괄적으로 변경해야되는 사항이 생겼다. 이게 자꾸 쓸일이 생기니 기록하는게 좋겠다 싶었다.

이번 내용은 예를 들면,

<span class="sale">
  <em><%=: p.price.sale | numberWithComma %></em>
  <span class="currency">원</span>
</span>

가격의 세자리수 콤마를 numberWithComma 라고 정의하여 쓰면서 저런식으로 표현했어야 하는데 새 프레임워크에서는

<span class="sale">
  <em><%= $.withCommas(p.price.sale) %></em>
  <span class="currency">원</span>
</span>

처럼 바꿔야했다.

그래서 정규식 사용하여 검색

Search : (<%-?=?)(:)\s(.+)\s(\| numberWithComma %>)
Replace : $1 $.withCommas($3) %>

정규식 쓸일이 많지 않으니 작정하고 공부해도 매번 까먹는데 이렇게 라도 최대한 써먹으려고 하고, 썼으면 기록해야겠다고 생각이 든다. 항상 모르겠는 정규식…. 급한데로 쓴거라 세련되지 않은 느낌인데 문제가 있거나 더 세련된 방법으로 바꿔 쓸 수 있으면 업데이트 예정.

toice's note