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"는 스니펫 이름입니다. description가 제공되지 않으면 IntelliSense를 통해 표시됩니다.

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

body는 prefix 스니펫을 통해 표시하려는 코드로 구성된 문자열 배열입니다. 코드의 모든 줄은 문자열에 배치되어야 합니다. 문자 유형을 입력해야 하는 경우\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 .
더 많은 기사를 게시하도록 동기를 부여합니다.