맞춤형 VSCode 바로가기 및 코드 스니펫 생성

키보드 단축키

Linux에서 다음으로 이동합니다.

File -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

맥에서:

Code -> Preferences -> KeyboardShortcuts -> Open Keyboard Shortcuts JSON (top-right icon)

그런 다음 다음과 같이 사용자 지정 키 바인딩을 추가합니다.
Ctrl+D 라인 복제/선택:

{
  "key": "ctrl+d",
  "command": "editor.action.duplicateSelection"
}

Ctrl+Shift+L 선택한 텍스트와 함께 console.log를 삽입하려면:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

또는 Ctrl+Shift+L 클립보드의 콘텐츠와 함께 console.log를 삽입하려면:

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${CLIPBOARD}', ${CLIPBOARD})"
  }
}

더 유용한 변수: https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables

코드 조각

일부 React 구성 요소 코드 스니펫을 추가하려면 Linux에서 다음으로 이동하십시오.

File -> Preferences -> Configure User Snippets -> search for TypescriptReact

맥에서:

Code -> Preferences -> Configure User Snippets -> search for TypescriptReact

그런 다음 이것을 json 파일에 붙여넣으십시오.

 "New React Component": {
  "prefix": ["react-component", "rc"],
  "body": ["const ${1} = () => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component"
 },
 "New React Component With Props": {
  "prefix": ["react-component-props", "rcp"],
  "body": ["interface I${1}Props {\n\t\n}\n\nconst ${1} = (props: I${1/(.*)/${1:/capitalize}/}Props) => {\n\treturn (\n\t\t<div>\n\n\t\t\n\t)\n}\n\nexport default ${1}"],
  "description": "New React Component With Props"
 }

스니펫을 사용하려면 tsx 파일을 열고 react 또는 rcp -> 자동 완성 팝업에 스니펫 이름이 표시됩니다.

코드 출력 예(컴포넌트 이름 수정 가능)

const Comp1 = () => {
  return (
    <div>

    </div>
  )
}

export default Comp1

// and

interface IComp2Props {

}

const Comp2 = (props: IComp2Props) => {
  return (
    <div>

    </div>
  )
}

export default Comp2

더보기: https://code.visualstudio.com/docs/editor/userdefinedsnippets