VSCode 사용자 정의 스니펫: 생산성을 높이는 강력한 기능(고급)

이 시리즈에서 우리는 배웠습니다.

VSCode에 포함된 스니펫과 스니펫이 필요한 이유.

간단한 조각을 만드는 방법

여러 줄과 자리 표시자가 있는 고급 스니펫을 만드는 방법.

2부에서는 자리 표시자 변환에 대해 알아보고 이를 사용하여 보다 정교한 스니펫을 만듭니다.

Table of Contents

Placeholder Transform

Variable Transform

Takeaways

자리 표시자 변환

자리 표시자를 대상 값으로 바꿀 때 코드에 삽입하기 전에 변경하고 싶을 때가 있습니다. 예를 들어 React.js에서는 다음과 같이 useState 후크를 사용하는 것이 관례입니다.

const [name, setName] = useState("");

상태 변수( name )와 해당 업데이트 함수의 명사 부분( Name )은 일반적으로 후자가 대문자로 표시된다는 점을 제외하면 동일합니다.

이전과 같이 스니펫을 생성하면 원하는 setname 대신 setName 를 얻습니다.

"My useState": {
  "prefix": "us",
  "body": "const [${1:state}, set${1:state}] = useState($0)",
  "description": "My useState snippet"
},

여기에서 자리 표시자 변환이 유용합니다. 위의 예에서 대신 다음과 같이 스니펫을 정의하면 원하는 결과를 얻을 수 있습니다.

"My useState": {
  "prefix": "us",
  "body": "const [${1:state}, set${1/(.*)/${1:/capitalize}/}] = useState($0)",
  "description": "My useState snippet"
}

여기에서 많은 일이 일어나고 있습니다.

먼저 자리 표시자 값$1을 사용하여 탭 정지state를 정의합니다.

우리는 $1 부분에서도 set가 사용되기를 원하지만 $1의 값만 대문자로 표시해야 합니다.

그래서 정규식 $1 를 사용하여 state (string (.*) ) 의 전체 문자열을 일치시켜 변환을 수행합니다.

그런 다음 첫 번째 캡처 그룹(여기서는 일치하는 전체 문자열 state )을 참조하고 ${1:/capitalize} 로 대문자를 사용합니다.

변수 변환

VScode 스니펫은 변수 변환도 지원합니다. 자리 표시자 변환과 동일하게 작동하며 자리 표시자 변환과 동일한 구문을 공유합니다. 유일한 차이점은 변환할 대상이 자리 표시자 대신 변수라는 점입니다.

사용할 수 있는 변수는 미리 정의되어 있으므로 변수의 사용 사례는 다소 제한적입니다. 그러나 개발의 특정 시점에서 사용하는 자신을 발견할 수 있습니다.

변수 변환에 대한 자세한 내용은 VSCode's official documentation을 참조하십시오.

테이크아웃

파트 2에서 우리는 배웠습니다.

자리 표시자 변형을 사용하는 시기와 방법.

자리 표시자 변환과 유사하게 사용할 수 있는 사전 정의된 변수가 제한된 변수 변환입니다.