VSCode에서 사용자 지정 코드 조각을 추가하는 방법은 무엇입니까?

98

Visual Studio Code에서 사용자 지정 코드 조각을 추가 할 수 있습니까? 그렇다면 어떻게? VSCode는 Atom을 기반으로하므로 가능해야합니다.

code-snippets  visual-studio-code 
— BeastCode
소스
2
환경 설정> 사용자 스 니펫으로 이동 한 다음 스 니펫을 만들 언어를 선택할 수도 있습니다.
— Amituuush
둘 다 Electron을 후드 아래에서 사용한다는 사실 외에 VS Code와 Atom 사이에 실제로 관계가 있습니까?
— skelliam
이를 위해 codessnippet 서비스를 사용하십시오 . 사용자 정의 스 니펫을 생성하고, 코드 스 니펫 cli 모든 스 니펫을 서버에서 가져 오기만하면 한 번에 편집 및 동기화 할 수 있습니다!
— user13428826
설명에 웹 페이지 링크를 추가하고 싶습니다. 누구든지 방법을 알고 있습니까?
— 1

답변:

116
  1. > shift+ command+를 p누르고 스 니펫 입력
  2. 환경 설정 선택 : 사용자 스 니펫 열기
  3. 사용자 정의 스 니펫을 추가 할 언어 유형을 선택하십시오.
  4. vscode에는 :> vsdoc 에 설명 된대로 스 니펫을 추가하는 방법에 대한 설명이 있습니다.

GO 언어에 대한 사용자 정의 스 니펫을 열고 싶다고 가정 해 보겠습니다. 그러면 다음을 수행 할 수 있습니다.

  1. 히트> command+p
  2. 유형 : go.json + enter그리고 사용자 정의 스 니펫 페이지로 이동합니다.

스 니펫은 JSON 형식으로 정의되고 사용자 별 (languageId) .json 파일에 저장됩니다. 예를 들어, Markdown 스 니펫은 markdown.json 파일에 들어갑니다.

새 도구 업데이트 : 스
니펫 생성기 사이트 : https://snippet-generator.app/

— 찬단 나약
소스
3
조각 생성기는 많은 도움이 될 것입니다
— rainversion_3
66

옵션-1 VsCode 플러그인이 있습니다 : snippet creator ..

설치 후해야 할 일은 다음과 같습니다.

  1. 스 니펫으로 만들 코드를 선택하십시오.
  2. 마우스 오른쪽 버튼으로 클릭하고 "명령 팔레트"(또는 Ctrl+ Shift+ P)를 선택합니다.
  3. "Create Snippet"을 작성합니다.
  4. 스 니펫 바로 가기를 트리거하기 위해 감시해야하는 파일 유형을 선택합니다.
  5. 스 니펫 단축키를 선택하십시오.
  6. 스 니펫 이름을 선택하십시오.

옵션 -2이 웹 사이트를 확인하십시오 . 대 코드, 숭고한 텍스트 및 원자에 대한 스 니펫을 생성 할 수 있습니다.

이 사이트에서 스 니펫이 생성되면. 각 IDE의 스 니펫 파일로 이동하여 동일하게 붙여 넣으십시오. 예를 들어 VS 코드의 JS 스 니펫의 경우 File-> preference-> user 스 니펫으로 이동 한 다음 javascript.json 파일을 연 다음 위 사이트의 스 니펫 코드를이 안에 붙여 넣으면됩니다.

— 프라 나이 쿠마르
소스
8
이것은 정말 멋진 도구입니다! 각 줄을 인용하고 이스케이프해야하는 사용자 지정 html 상용구 스 니펫을 작성할 수 없었기 때문에 이것이 제가 찾고 있던 답입니다.
— nabrown
3
진지하게, 여기 생명의 은인.
— JeremyW 19
와우 이것은 완벽하게 작동하는 훌륭한 도구입니다. 정답을 표시해야
— StefanBob
스 니펫 생성기 링크가 끊어졌습니다. 다음 링크를 따르십시오 : snippet-generator.app
— Sandip
1
왜 1 단계와 2 단계를 작성 했습니까? 이것은 option1과 option2처럼 느껴지거나 관련이 있습니까?
— Xsmael
26

현재 버전 0.10.6 사용자 정의 조각을 추가 할 수 있습니다. 자신 만의 스 니펫 만들기 에 대한 문서를 읽어 보세요 . .js 파일에 json 파일을 배치하여 사용자 정의 스 니펫을 찾거나 만들 수 있습니다 C:\Users\<yourUserName>\AppData\Roaming\Code\User\snippets. 예를 들어 사용자 지정 자바 스크립트 스 니펫은\snippets\javascript.json

또한 정말 멋진 기능인 스 니펫을 게시 할 수도 있습니다. John Papa는 마켓 플레이스 에서 확장으로 다운로드 할 수있는 멋진 앵귤러 + 타이프 스크립트 스 니펫을 만들었습니다 .

다음은 javascript for 루프에 대한 문서에서 가져온 예제 스 니펫입니다.

"For Loop": {
    "prefix": "for",
    "body": [
        "for (var ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "\tvar ${element} = ${array}[${index}];",
        "\t$0",
        "}"
    ],
    "description": "For Loop"
},

어디

  • For Loop 스 니펫 이름입니다.
  • prefixIntelliSense 드롭 다운에 사용되는 접두사를 정의합니다. 이 경우에.
  • body스 니펫 콘텐츠입니다. 가능한 변수는 다음과 같습니다.
    • 탭 정지의 경우 $ 1, $ 2
    • 변수의 경우 $ {id} 및 $ {id : label} 및 $ {1 : label}
    • 동일한 ID를 가진 변수가 연결됩니다.
  • description IntelliSense 드롭 다운에 사용 된 설명입니다.
— 프랜 서
소스
6
그들은 정말 일종의 여러 줄 문자열 리터럴 구문이나 본문을 별도의 파일로 가져 오는 방법이 필요합니다. 모든 단일 라인을 인용하고 이스케이프하는 것은 미친 짓입니다.
— Mark Wilbur
이 답변에 대한 반대 투표에 대해 죄송합니다. 불량 클릭이었습니다 🙄
— Giles Butler
16

이 비디오에서 짧은 튜토리얼을 확인할 수 있습니다.

https://youtu.be/g1ouTcFxQSU

이동 파일 -> 환경 설정 -> 사용자 조각 . 선호하는 언어를 선택하십시오.
이제 다음 코드를 입력하여 for 루프 스 니펫을 만듭니다.

  "Create for loop":{
    "prefix": "for",
    "body":[
      "for(int i = 0; i < 10; i++)",
      "{",
      "   //code goes here",
      "}"
    ],
   "description": "Creates a for loop"
  }

완료되었습니다.
편집기에 "for"를 입력하고 첫 번째 예측을 사용합니다.

지름길--

  1. Snippet-creator 확장을 설치 합니다.
  2. 스 니펫을 만드는 데 필요한 코드를 강조 표시하십시오.
  3. ctrl+ shift+를 누르고 P명령 팔레트에 "조각 만들기"를 입력 한 다음 Enter 키를 누릅니다.
  4. 스 니펫을 만들 언어 (예 : -CPP)를 선택한 다음
    스 니펫 이름을 입력하고 스 니펫 바로 가기를 입력 한 다음 스 니펫 설명을 입력합니다.
    이제 갈 수 있습니다.
    4 단계에서 입력 한 편집기에 스 니펫 단축키를 입력하고 먼저
    오는 예측을 선택하십시오 (예측이 없으면 Ctrl + 스페이스를 누르십시오).

도움이 되었기를 바랍니다 :)

참고 : File-> Preferences-> User Snippets로 이동합니다. 그런 다음
스 니펫 을 만든 언어를 선택합니다 . 거기에서 스 니펫을 찾을 수 있습니다.

— 비 노드
소스
9

VsCode 플러그인이 있습니다 : snippet creator ..

설치 후해야 할 일은 다음과 같습니다.

  1. 스 니펫으로 만들 코드를 선택하십시오.
  2. 마우스 오른쪽 버튼으로 클릭하고 "명령 팔레트"(또는 Ctrl+ Shift+ P)를 선택합니다.
  3. "Create Snippet"을 작성합니다.
  4. 스 니펫 바로 가기를 트리거하기 위해 감시해야하는 파일 유형을 선택합니다.
  5. 스 니펫 단축키를 선택하십시오.
  6. 스 니펫 이름을 선택하십시오.

그게 다야 ..

참고 : 스 니펫을 편집하려면 [fileType] .json에서 찾을 수 있습니다.
예 : Ctrl+ P, "javascript.json"을 선택합니다.

— 피터 셰이커
소스
5

사용자 지정 스크립트를 추가 할 수 있습니다 File --> Preferences --> User Snippets. 선호하는 언어를 선택하십시오.

Javascript를 선택하면 다음 console.log(' ');과 같은 기본 사용자 정의 스크립트를 볼 수 있습니다 .

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},
— Madhankumar
소스
5

javascriptreact.json에 스 니펫을 추가하여 시도했지만 작동하지 않았습니다.

스 니펫을 전역 범위에 추가해 보았는데 매력적으로 작동합니다. 

FILE --> Preferences --> User snippets

여기에서 선택 New Global Snippets File하고 이름을 javas로 지정하십시오 criptreact.code-snippets.

다른 언어의 경우 [your_longuage] .code-snippets와 같이 이름을 지정할 수 있습니다.

여기에 이미지 설명 입력

— Lakkanna Walikar
소스
4

이것은 현재 문서화되지 않은 기능이지만 곧 제공 될 예정입니다. 추가 할 수있는 폴더가 있으며 표시되지만 변경 될 수 있습니다 (이유로 인해 문서화되지 않음).

가장 좋은 조언은 이것을 uservoice 사이트에 추가하고 마지막까지 기다리는 것입니다. 그러나오고있다.

— 존 파파
소스
0

JSON으로 스 니펫을 작성하지 않으려면 Snipster를 확인하세요 . 코드 자체를 작성하는 것처럼 스 니펫을 작성할 수 있습니다. 각 줄을 따옴표로 묶거나, 이스케이프 문자를 사용하거나, 메타 정보를 추가 할 필요가 없습니다.

또한 한 번 작성하고 어디서나 게시 할 수 있습니다 . 따라서 VS Code, Atom 및 Sublime에서 코드 조각을 사용할 수 있으며 앞으로 더 많은 편집기를 사용할 수 있습니다. 여기에 더 많은 정보가 있습니다 .

— 잔 스트라
소스
0

이것은 실제 대답이 아닐 수도 있지만 (일부는 위에서 대답했듯이) 다른 사람들을위한 사용자 지정 코드 스 니펫을 만드는 데 관심이 있다면 yeoman 및 npm (기본적으로 NodeJS와 함께 제공됨)을 사용하여 확장을 만들 수 있습니다. 참고 : 이것은 다른 시스템에 대한 스 니펫을 만들기위한 것입니다. 그러나 그것은 또한 당신에게도 효과가 있습니다! 모든 것을 위해 JS 코드가 필요합니다.

— airax86
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.