스니펫은 편집기에 마법을 더할 수 있습니다. 주문과 같습니다. 짧은 문구를 입력하고 (접두사 입력), 지팡이를 흔들고 (Enter 또는 Tab 누르기), presto! 멋진 이벤트가 눈앞에서 펼쳐집니다. ✨
대부분의 코드 편집기는 즉시 스니펫을 지원합니다. 스니펫을 소개하는 데 사용할 코드 편집기는 그날 가장 인기 있는 편집기인 Visual Studio Code (VS Code)입니다.
또한 스니펫을 전 세계적으로 (모든 앱에서) 사용할 수 있는 일부 "텍스트 확장기"앱이 있습니다. 스니펫에서 더 많은 것을 얻기 위해 이러한 앱을 활용하는 방법을 간략하게 설명하겠습니다.
https://www.freecodecamp.org/news/definitive-guide-to-snippets-visual-studio-code/
정의
스니펫은 문서에 삽입 할 수 있는 템플릿입니다. 명령 또는 일부 트리거 텍스트를 통해 삽입됩니다.
스니펫을 사용하면 상용구 파일을 만들고 일반적으로 사용되는 텍스트 블록을 삽입 할 수 있습니다. 일반적인 아이디어는 동일한 것을 완전히 반복해서 입력하는 것을 저장하는 것입니다. ?
스니펫을 사용해야 하는 이유는 무엇입니까?
나는 이 진술로 당신을 놀라게 하지 않을 것입니다 : 인터넷은 많은 상반되는 의견의 본거지입니다! 스니펫은 이 무지에서 벗어나지 못하지만, 사람들의 혈압을 높이는 주제는 아닌 것 같습니다!
균형을 위해 여기에서 이러한 의견의 단면을 제시하겠습니다.
당신은 캠프를 선택하고 모두를 위해 또는 모두에 대해 스니펫이 될 필요가 없습니다. 나는 당신에게 가장 잘 맞는 정도까지 그들을 채택 할 것을 제안합니다.
Yay Camp ?
Nay Camp ?
스니펫은 언제 사용해야 합니까?
컴퓨터 과학의 거장 인 Donald Knuth는 "[코드의] 조기 최적화가 모든 악의 근원"이라고 말했습니다.
나는 이것이 스니펫과도 관련이 있다고 생각합니다. 스니펫은 코드 생성의 최적화입니다. 언어 나 프레임 워크를 잘 모르는 경우 해당 언어 또는 프레임 워크에 대한 많은 스니펫을 구현하는 것은 시기상조 일 수 있습니다.
편안하다면 시도해보십시오!
스니펫을 사용하는 용도
개인적으로 저는 스니펫을 자주 사용하지만 신중하게 사용합니다. 저는 Markdown과 제가 사용하는 대부분의 언어에 대해 스니펫 세트를 사용합니다.
프레임 워크에 스니펫을 많이 사용하지 않았습니다. 최근 Vue 용 스니펫을 사용하기 시작했지만 상용구 스니펫만 사용합니다. Vue IQ가 상승하면 아마 더 많이 채택 할 것입니다.
알고리즘에 스니펫을 사용하지 않았습니다.
스니펫 유형
스니펫은 스니펫과 편집기 간의 상호 작용 범위에 따라 분류 할 수 있습니다.
정적 스니펫
일부 소스 텍스트를 단일 명령으로 복사하여 붙여 넣는 것으로 생각할 수 있습니다.
동적 스니펫
스니펫 완성을 위해 마법사와 같은 경험을 제공하도록 동적 스니펫을 사용자 정의 할 수 있습니다.
다음을 포함 할 수 있습니다.
다음은 2 개의 작업이 있는 작업 목록을 추가하는 마크 다운 스니펫의 예입니다. 작업 확인을 위해 탭 정지, 자리 표시 자 및 선택 사항을 사용합니다.
매크로 스니펫
마법의 최고 수준은 입력을 변환하는 능력을 갖는 것입니다. 변환을 사용하면 변수가 삽입되기 전에 변수 값을 변경하거나 편집 한 후 자리 표시자를 변경할 수 있습니다.
예를 들어 클래스 이름을 입력 한 후 대문자로 표시 할 수 있습니다.
정규식으로 할 수 있는 모든 작업은 일반적으로 가능합니다. 일부 편집기는 보다 고급 스크립팅 가능성을 제공합니다.
Visual Studio Code의 조각
VS Code에서 코드 조각은 IntelliSense (Ctrl + Space에서 제안 목록 제공)에 나타나며 다른 제안과 혼합됩니다.
'Insert Snippet'명령을 사용하여 전용 스니펫 선택기에서 액세스 할 수도 있습니다. 이는 해당 언어에 대한 모든 사용자, 확장 및 내장 스니펫을 단일 목록으로 결합합니다.
Emmet은 VS Code에 통합되어 있으며 HTML 및 CSS 스니펫을 삽입하기 위한 자체 CSS 선택기에서 영감을 받은 구문을 가지고 있습니다.
Emmet은 실제로 자체적인 것이지만 메커니즘은 동일합니다. Visual Studio Code 가이드에서 Emmet을 사용하여 Emmet에 대해 배울 수 있습니다.
관련 사용자 설정
작업 중인 언어에 대해 editor.quickSuggestions 설정이 true로 설정된 경우 스니펫이 빠른 제안으로 표시됩니다. 빠른 제안은 마크 다운을 제외한 대부분의 언어에서 기본적으로 활성화됩니다.
스니펫은 탭 완성을 지원합니다. 스니펫 접두어 (트리거 텍스트)를 입력하고 Tab 키를 눌러 스니펫을 삽입 할 수 있습니다. 설정 editor.tabCompletion으로 활성화 할 수 있습니다.
값은 다음과 같습니다.
"editor.tabCompletion": "onlySnippets",스니펫 제안이 표시되는 방식을 제어하려면 editor.snippetSuggestions 설정을 편집 할 수 있습니다.
값은 다음과 같습니다.
"editor.snippetSuggestions": "top",스니펫에 대한 가장 중요한 설정이지만 몇 가지 더 있습니다. 이 기본 설정 목록을 확인하여 자세히 알아 보거나 설정 UI에서 검색 할 수 있습니다.
내장 스니펫이 있습니까?
예!
그러나 VS Code 문서에는 문서화 되어 있지 않습니다. 그리고 VS Code 내부에는 검색 할 중심점이 없습니다. 따라서 그들이 무엇인지 모를 수도 있습니다.
그렇다면 어떤 언어에 기본 제공 스니펫이 있는지 어떻게 알 수 있습니까?
간단히 말해서 이 시나리오에 실망했기 때문에 스니펫을 쉽게 탐색 할 수 있는 멋진 UI를 제공하기 위해 Snippets Ranger라는 확장 프로그램을 작성했습니다. 스니펫을위한 약탈자의 지도라고 생각하세요!
하지만 나 자신을 위한 스니펫을 찾고 싶습니까?
조금 더 노력하면 됩니다.
앞서 언급 했듯이 'Insert Snippet'명령은 활성 문서의 언어에 대한 모든 스니펫을 표시합니다.
그러나 이것은 모든 사용자, 확장 프로그램 및 기본 제공 스니펫의 집계입니다. 따라서 특정 언어에 기본 제공 코드 조각이 있는지 확인하려면 해당 언어에 대한 파일을 열고 명령을 실행하여 목록을 확인해야 합니다.
해당 언어에 대해 스니펫 확장 프로그램이 설치되어있어 어느 것이 어느 것인지 식별하기가 너무 어려운 경우, 기본 제공 스니펫 만 표시되도록 비활성화 할 수 있습니다. ?
소스 파일을 직접 추적하려는 경우 기본 제공 스니펫이 각 개별 언어 확장 디렉토리 내에 있습니다. 이 파일은 Windows의«app root»\ resources \ app \ extensions \«language»\ snippets \«language».code-snippets에 있습니다. 위치는 Mac과 Linux에서 비슷합니다.
스니펫 확장
Visual Studio Marketplace에는 거의 모든 항목에 대한 조각을 찾을 수 있는 조각 범주가 있습니다.
많은 프로그래밍 언어 팩 확장에는 스니펫도 포함됩니다 (Python, C #, Go, Java 및 C / C ++).
직접 작성하려면 어떻게 해야 합니까?
스니펫 파일은 JSON으로 작성됩니다. 원하는 경우 C 스타일 주석을 추가 할 수도 있습니다 (기술적으로는 Microsoft의 "JSONC"형식).
글로벌, 작업 공간 및 특정 언어에 대한 다양한 범위에 대한 스니펫을 작성할 수 있습니다.
스니펫 파일을 생성하려면 'Preferences : Configure User Snippets'명령을 실행하면 아래와 같은 빠른 선택 대화 상자가 열립니다. 선택하면 편집 할 파일이 열립니다.
GUI에서 스니펫을 작성하려는 경우 스니펫 생성기 웹 앱을 사용할 수 있습니다.
구문에 익숙해지는 예를 살펴 보겠습니다.
예
다음은 VS Code와 함께 제공되는 마크 다운 스니펫입니다.
{
"Insert heading level 1": {
"prefix": "heading1",
"body": ["# ${1:${TM_SELECTED_TEXT}}$0"],
"description" : "Insert heading level 1"
}
}이 스니펫은 현재 선택 (있는 경우) 주위에 마크 다운을 래핑하는 레벨 1 제목을 삽입합니다.
스니펫에는 다음과 같은 속성이 있습니다.
이 스니펫의 본문에는 2 개의 탭 정지가 있으며 $ {TM_SELECTED_TEXT} 변수를 사용합니다.
이를 완전히 이해하기 위해 구문을 살펴 보겠습니다.
스니펫 구문
VS Code의 조각 구문은 TextMate 조각 구문과 동일합니다. 그러나 '보간 된 쉘 코드'및 \ u 변환 사용을 지원하지 않습니다.
스니펫 본문은 다음 기능을 지원합니다.
1. Tab Stops
탭 정지는 달러 기호와 서수로 지정됩니다. $1. $1은 첫 번째 위치가 되고 $2는 두 번째 위치가 됩니다. $0은 스니펫 모드를 종료하는 최종 커서 위치입니다.
예를 들어 HTML div 스니펫을 만들고 첫 번째 탭 정지가 여는 태그와 닫는 태그 사이에 있어야 한다고 가정 해 보겠습니다. 또한 사용자가 태그 외부를 탭하여 스니펫을 완료 할 수 있도록 허용하고자 합니다.
그런 다음 다음과 같은 스니펫을 만들 수 있습니다.
{
"Insert div": {
prefix: "div",
body: ["<div>","$1","</div>", "$0"]
}
}2. 미러링 된 탭 중지
삽입 된 텍스트의 여러 위치에 동일한 값을 제공해야 하는 경우가 있습니다. 이러한 상황에서 탭 정지에 대해 동일한 서수를 재사용 하여 미러링을 원한다는 신호를 보낼 수 있습니다. 그런 다음 편집 내용이 동기화 됩니다.
일반적인 예는 인덱스 변수를 여러 번 사용하는 for 루프입니다. 다음은 for 루프의 JavaScript 예제입니다.
{
"For Loop": {
"prefix": "for",
"body": [
"for (let ${1:index} = 0; ${1:index} < ${2:array}.length; ${1:index}++) {",
"\tconst ${3:element} = ${2:array}[${1:index}];",
"\t$0",
"}"
]
}
}3. Placeholders
자리 표시자는 기본값이 있는 탭 정지입니다. 중괄호로 묶여 있습니다 (예 : $ {1 : default}). 자리 표시 자 텍스트는 쉽게 편집 할 수 있도록 초점이 맞춰져 선택됩니다. 자리 표시자는 다음과 같이 중첩 될 수 있습니다. $ {1 : first $ {2 : second}}.
4. Choices
선택 사항은 탭 정지에서 값 목록을 사용자에게 제공합니다. 파이프 문자로 묶인 쉼표로 구분 된 값 목록으로 작성됩니다. $ {1 | 예, 아니요 |}.
이것은 작업 목록을 삽입하기 위해 이전에 표시된 마크 다운 예제의 코드입니다. 선택 사항은 'x'또는 공백입니다.
{
"Insert task list": {
"prefix": "task",
"body": ["- [${1| ,x|}] ${2:text}", "${0}"]
}5. Variables
사용할 수 있는 다양한 변수가 있습니다. 이름 앞에 달러 기호를 붙이면 됩니다 (예 : $TM_SELECTED_TEXT).
예를 들어,이 스 니펫은 오늘 날짜로 모든 언어에 대한 블록 주석을 생성합니다.
{
"Insert block comment with date": {
prefix: "date comment",
body: ["${BLOCK_COMMENT_START}",
"${CURRENT_YEAR}/${CURRENT_MONTH}/${CURRENT_DATE} ${1}",
"${BLOCK_COMMENT_END}"]
}
}원하는 경우 ${TM_SELECTED_TEXT : default}와 같이 변수의 기본값을 지정할 수 있습니다. 변수에 값이 할당되지 않은 경우 기본값 또는 빈 문자열이 삽입됩니다.
실수로 정의되지 않은 변수 이름을 포함하면 변수 이름이 자리 표시 자로 변환됩니다.
다음 작업 공간 변수를 사용할 수 있습니다.
다음과 같은 시간 관련 변수를 사용할 수 있습니다.
다음 주석 변수를 사용할 수 있습니다. 문서의 언어 구문을 따릅니다.
6. 변환
변수 또는 자리 표시 자에 변환을 적용 할 수 있습니다. 정규식 (정규식)에 익숙하다면 대부분 익숙할 것입니다.
변환 형식은 ${«변수 또는 자리 표시 자»/«regex»/«대체 문자열»/«flags»}입니다. JavaScript의 String.protoype.replace()와 유사합니다. "매개 변수"는 다음을 수행합니다.
캡처 그룹을 참조하려면 $ n을 사용하십시오. 여기서 n은 캡처 그룹 번호입니다. $ 0 사용은 전체 일치를 의미합니다.
탭 정지가 동일한 구문을 갖기 때문에 이것은 약간 혼란스러울 수 있습니다. 슬래시 안에 포함되어 있으면 캡처 그룹을 참조하는 것입니다.
구문을 완전히 이해하는 가장 쉬운 방법은 몇 가지 예를 확인하는 것입니다.
-------------
등록된 댓글이 없습니다.
