커스텀 VSCode 스니펫

소개:

나는 최근에 가져오기 요청에 대해 동일한 코드를 반복해서 작성하고 있음을 발견했습니다.

스니펫이 VSCode에 있다는 것을 기억하고 가져오기 요청을 위해 몇 개를 만들었습니다. 그렇게 한 후에 스니펫을 만드는 방법을 설명하는 블로그를 만들어야겠다고 생각했습니다.

최종 결과는 다음과 같습니다.

맞춤 스니펫 추가:

먼저 VSCode에 들어갑니다.

파일 > 기본 설정 > 사용자 스니펫 구성


"새 글로벌 스니펫 파일..."을 클릭합니다.


파일에 적절한 이름을 지정하십시오(저는 jsFetch.code-snippets를 사용했습니다)

일부 스니펫 코드를 붙여넣습니다.

{
    "fetchAdd": {
        "scope": "javascript",
        "prefix": ["fetch-add"],
        "body": ["fetch(\"http://${1:url}\",{\n\tmethod: \"POST\",\n\theaders: {\n\t\t\"Content-Type\": \"application/json\"\n\t},\n\tbody: JSON.stringify(${2:object})\n}).then(r=>r.json()).then((data)=>{\n\t$3\n})"],
        "description": "adds a new object to a server at URL"
    },

    "fetchRemove": {
        "scope": "javascript",
        "prefix": ["fetch-remove"],
        "body": ["fetch(`http://${1:url}/${${2:id}}`,{\n\tmethod: \"DELETE\"\n}).then(r=>r.json()).then((data)=>{\n\t$3\n})"],
        "description": "removes an object from a server at URL/id"
    },

    "fetchPatch": {
        "scope": "javascript",
        "prefix": ["fetch-patch", "fetch-edit"],
        "body": ["fetch(`http://${1:url}/${${2:id}}`,{\n\tmethod: \"PATCH\",\n\theaders: {\n\t\t\"Content-Type\": \"application/json\"\n\t},\n\tbody: JSON.stringify(${3:patchObject})\n}).then(r=>r.json()).then((data)=>{\n\t$4\n})"],
        "description": "edits an object from a server at URL/id"
    }
}

구하다

맞춤 스니펫 사용:

선택하려는 스니펫의 처음 몇 자를 입력하여 시작합니다.


사용하려는 스니펫이 강조 표시될 때까지 아래쪽 화살표 키를 누릅니다.


탭 누르기:


현재 선택한 텍스트의 해당 값을 입력합니다.


다음 임시 값으로 이동하려면 탭을 다시 누르고 다음을 반복하십시오.

나만의 스니펫 이해 및 만들기:

스니펫에 사용하기 위한 서식 코드:

몇 가지 예제 변수를 사용하여 스니펫을 만들고자 하는 상용구 코드로 시작합니다.

fetch(`http://url/${id}`,{
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(patchObject)
}).then(r=>r.json()).then((data)=>{

})

그런 다음 원하는 변수를 ${TABINDEX:NAME} 로 바꿉니다. 여기서 TABINDEX는 1부터 세어 변수 사이를 탭으로 이동하는 순서를 나타냅니다.

fetch(`http://${1:url}/${${2:id}}`,{
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(${3:patchObject})
}).then(r=>r.json()).then((data)=>{

})

$TABINDEX를 사용하여 위치로 탭할 수 있도록 만들 수도 있습니다.

fetch(`http://${1:url}/${${2:id}}`,{
    method: "PATCH",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify(${3:patchObject})
}).then(r=>r.json()).then((data)=>{
    $4
})

코드를 따옴표로 묶고 필요한 경우 \ 및 "와 같은 특수 문자를 이스케이프 처리하려면 \를 사용하십시오.

"fetch(`http://${1:url}/${${2:id}}`,{
    method: \"PATCH\",
    headers: {
        \"Content-Type\": \"application/json\"
    },
    body: JSON.stringify(${3:patchObject})
}).then(r=>r.json()).then((data)=>{
    $4
})"

탭/들여쓰기를 \t로 바꿉니다.

"fetch(`http://${1:url}/${${2:id}}`,{
\tmethod: \"PATCH\",
\theaders: {
\t\t\"Content-Type\": \"application/json\"
\t},
\tbody: JSON.stringify(${3:patchObject})
}).then(r=>r.json()).then((data)=>{
\t$4
})"

새 줄을\n으로 바꿉니다.

"fetch(`http://${1:url}/${${2:id}}`,{\n\tmethod: \"PATCH\",\n\theaders: {\n\t\t\"Content-Type\": \"application/json\"\n\t},\n\tbody: JSON.stringify(${3:patchObject})\n}).then(r=>r.json()).then((data)=>{\n\t$4\n})"

스니펫 만들기

스니펫은 JSON 개체로 형식이 지정됩니다.

외부 키는 스니펫의 이름이며 VSCode의 자동 채우기 오른쪽에 표시되는 이름에 사용됩니다.

"fetchAdd" {
    ...
}

scope 키는 VSCode가 스니펫을 제안할 언어를 정의합니다. 필요한 경우 쉼표로 언어를 구분하는 단일 문자열입니다.

"fetchAdd" {
    "scope": "javascript,html",
    ...
}

prefix 키는 VSCode가 스니펫을 제안하도록 입력할 수 있는 항목과 스니펫이 VSCode의 자동 채우기 왼쪽에 표시되는 항목을 정의합니다. 다음은 문자열 배열입니다.

"fetchAdd" {
    ...
    "prefix": ["fetch-add", "example-two"],
    ...
}

body 키는 스니펫이 만드는 코드와 탭 순서를 정의합니다. 이것은 이전에 만든 형식화된 코드입니다.

"fetchAdd": {
    ...
    "body": ["fetch(\"http://${1:url}\",{\n\tmethod: \"POST\",\n\theaders: {\n\t\t\"Content-Type\": \"application/json\"\n\t},\n\tbody: JSON.stringify(${2:object})\n}).then(r=>r.json()).then((data)=>{\n\t$3\n})"],
    ...
},

마지막 키description는 VSCode의 자동 완성에 있는 스니펫에서 자세히 읽기를 클릭할 때 표시되는 텍스트를 제어합니다.

"fetchAdd": {
    ...
    "description": "Example Text!"
}

최종 스니펫은 다음과 같습니다.

"fetchAdd": {
    "scope": "javascript",
    "prefix": ["fetch-add"],
    "body": ["fetch(\"http://${1:url}\",{\n\tmethod: \"POST\",\n\theaders: {\n\t\t\"Content-Type\": \"application/json\"\n\t},\n\tbody: JSON.stringify(${2:object})\n}).then(r=>r.json()).then((data)=>{\n\t$3\n})"],
    "description": "adds a new object to a server at URL"
},