programing

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

procenter 2021. 1. 17. 12:08
반응형

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


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


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


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

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

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


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


현재 버전 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 드롭 다운에 사용 된 설명입니다.

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

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

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

그게 다야 ..

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


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

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


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

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

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

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

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

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

SHORTCUT--

1. install Snippet-creator extension.
2. Highlight the code that you need to make snippet.
3. press ctrl+shift+P and type "Create snippet" on the command palette and press ENTER.
5. select language for which you want to create snippet(eg:-CPP), then type
snippet name, type snippet shortcut and then type snippet description.
You are now good to go.
Type the snippet shortcut in the editor that you entered in step 4, and select the
prediction (if no prediction comes press ctrl+space) that comes first.

Hope this helps :)

Note: goto File->Preferences->User Snippets. Then select the language in which you
created the snippet. You will find the snippet there.


I tried by adding snippets in javascriptreact.json but it didn't worked for me.

I tried adding snippets into global scope, and it's working like charm.

FILE --> Preferences --> User snippets

here select New Global Snippets File, give name javascriptreact.code-snippets.

For other languages you can name like [your_longuage].code-snippets

enter image description here


VSCode introduce this in version 0.5, see here. Snippet syntax follows the TextMate snippet syntax and can write in User Preferences.


If you'd rather not deal with writing your snippets in JSON, check out Snipster. It lets you write snippets as you would write the code itself - not having to wrap each line in quotes, escape characters, add meta information, etc.

It also lets you write once, publish anywhere. So you can use your snippet in VS Code, Atom, and Sublime, plus more editors in the future. More info here.

ReferenceURL : https://stackoverflow.com/questions/29995863/how-to-add-custom-code-snippets-in-vscode

반응형