VSCode의 스니펫이란 무엇입니까?

Code snippets are templates that make it easier to enter repeating code patterns, such as loops or conditional-statements. (Visual Studio Code)

예를 들어 JavaScript에서는 삽입console.log(’Hello World…’) 대신 VSCode 내장 스니펫log을 삽입한 다음 탭 버튼을 눌러 편집기에 전체를 표시할 수 있습니다. VSCode에는 사용할 수 있는 다른 많은 내장 스니펫이 있습니다.

Mac에서는 shift+cmd+p를, Windows에서는 shift+ctrl+p를 눌러 명령 팔레트를 엽니다.

명령 팔레트에 Insert Snippet 명령을 삽입하여 현재 파일의 언어에 대한 스니펫 목록을 가져온 다음 Enter 버튼을 눌러 확인하십시오.

Many extensions on the VS Code Marketplace include snippets. You can search for extensions that contain snippets in the Extensions view (shift+cmd+x in Mac or shift+ctrl+x in Windows) using the @category:"snippets" filter. (Visual Studio Code)

나만의 스니펫을 만드는 방법은 무엇입니까?

저는 React로 작업하고 있고 VS Code Marketplace에 인기 있는 React용 스니펫 확장이 있지만 대부분의 스니펫은 저에게 쓸모가 없습니다. 그래서 저는 대신 저만의 스니펫을 만드는 것을 선호합니다.

파일 이름에서 이름을 가져오는 React TypeScript 구성 요소 스니펫을 만들고 싶습니다.

Mac에서는 shift+cmd+p를, Windows에서는 shift+ctrl+p를 눌러 명령 팔레트를 엽니다.

인서트 configure user snippets

스니펫이 표시되는 언어를 선택하십시오.
나타나야 합니다.

예를 들어 React에 대한 스니펫을 만들려면
TypeScript 파일에서 typescriptreact를 선택한 다음 Enter 버튼을 누릅니다.

VSCode는 ***.json(이전 선택 항목의 경우 typescriptreact.json)을 엽니다.

***.json ( typescriptreact.json ) 개체에 아래 특성을 삽입합니다.

"React Arrow Function Component": {
  "prefix": "trafc",
  "body": [
    "type Props = {};\n",
    "const $TM_FILENAME_BASE = ({}: Props) => {",
    "  return <></>;",
    "};\n",
    "export default $TM_FILENAME_BASE;\n"
  ],
  "description": "Create TypeScript React arrow function component"
}

React TypeScript 파일에 대해 trafc 스니펫을 사용할 수 있습니다.

이제 위의 코드가 말하는 내용을 설명하고 싶습니다.

"React Arrow Function Component"는 스니펫 이름입니다. nodescription가 제공되면 IntelliSense를 통해 표시됩니다.

prefix는 VSCode에서 body를 표시하는 데 사용할 수 있는 스니펫입니다.

body는 prefix 스니펫을 통해 표시하려는 코드로 구성된 문자열 배열입니다. 코드의 모든 줄은 문자열에 배치되어야 합니다. Enter 문자 유형을 사용해야 하는 경우\n .

description는 이름에서 알 수 있듯이 스니펫에 대한 설명입니다.

또 다른 예는 console.log 와 같은 설명이 포함된 ‍‍ console.log("status:", status)를 생성하는 것입니다. 스니펫 구성은 아래 섹션에 표시됩니다.

"console.log with description": {
  "prefix": "lg",
  "body": ["console.log('${1:desc}:', ${1:desc})"],
  "description": "Insert a console.log() with description as the           same as the variable."
}

새로운 것은 ${1:desc} 입니다. 1는 스니펫을 삽입한 후 커서가 해당 위치에 놓이게 됨을 의미합니다.

desc는 VSCode에서 동시에 입력하려면 이 두 부분이 동일해야 함을 의미합니다. 자세한 내용은 check this link .
더 많은 기사를 게시하도록 동기를 부여합니다.