[나만의 모음집] VSCODE 사용자 코드 조각 아카이브

해당 포스트는..

유용하게 사용하기 위해 직접 만들어둔 사용자 코드 조각을 공유합니다. 계속해서 업데이트할 예정이고, 업데이트 되는 날을 기준으로 포스트가 갱신됩니다.

 

frc : 리액트 함수 컴포넌트 생성 

(부연설명) 리액트 함수 컴포넌트를 생성 한다. 타입스크립트 호환을 위해 interface 를 상단에 주석처리 해두었다.

생성 시 해당 파일명이 함수명으로 자동 설정 되도록 해두었으므로, 코드라인에 frc 를 입력 후 코드 조각을 클릭하면 파일명이 함수명인 컴포넌트가 생성된다.

 

{
	"Function Componets": {
			"prefix": "frc",
			"body": [
				"// interface Props { }"
				"  "
				"export default function ${1:${TM_FILENAME/(\\w+)\\..+/$1/g}}() {"
				"return ("
				"  <div>"
				" "
				"</div>"
				")}"
			],
			"description": "Log output to console"
		},
}

 

 

 

jsmap: 자바스크립트 map() 함수 생성

 {       
        "JavaScript map()": {
			"prefix": "jsmap",
			"body": [
				"const ${2:result} = $1.map((${3:item}) => {",
				"\treturn ${4:/* 변환 로직을 여기에 작성하세요 */};",
				"});"
			],
			"description": "map 함수를 생성합니다."
		}
 }

 

jsfilter : 자바스크립트 filter() 함수 생성

{		
        "JavaScript filter()": {
			"prefix": "jsfilter",
			"body": [
				"const ${2:result} = $1.filter((${3:item}) => {",
				"\treturn ${4:/* 변환 로직을 여기에 작성하세요 */};",
				"});"
			],
			"description": "filter 함수를 생성합니다."
		}
}

 

prefix 로 설정해둔 키워드를 입력하면 ㅁ jsfilter 가 뜬다. 

 

 

실제 생성 시 에는 .filter 의 . 표기를 기준으로 즉시 배열 변수명을 입력할 수 있도록 되어 있다.