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

해당 포스트는..

유용하게 사용하기 위해 만들어둔 사용자 코드 조각을 모아둡니다.

 

 

it : 테스트 it block

 {
      "Vitest It Block": {
        "prefix": "vit",
        "body": [
          "it('$1', () => {",
          "  $2",
          "});"
        ],
        "description": "Vitest it block"
      },
 }

 

vtest : 테스트 코드 작성을 위한 기초 셋팅

{
  "Vitest Test Suite": {
    "prefix": "vtest",
    "body": [
      "import { describe, it, expect, beforeAll, afterAll, beforeEach, afterEach } from 'vitest';",
      "",
      "// 전처리 작업",
      "beforeAll(() => {",
      "  $1",
      "});",
      "",
      "// 각 테스트 이전에 실행",
      "beforeEach(() => {",
      "  $2",
      "});",
      "",
      "describe('$3', () => {",
      "  it('$4', () => {",
      "    $5",
      "  });",
      "});",
      "",
      "// 각 테스트 이후에 실행",
      "afterEach(() => {",
      "  $6",
      "});",
      "",
      "// 후처리 작업",
      "afterAll(() => {",
      "  $7",
      "});"
    ],
    "description": "Vitest test suite with setup and teardown"
   },
  }

 

dc:  동적 컴포넌트

 하나의 컴포넌트로 다양한 형태의 컴포넌트를 동적으로 생성하는 패턴에 활용하기 위해 제작한 스니펫

{
 "Dynamic Components": {
	"prefix": "dc",
	"body": [
    	"import { HTMLAttributes } from 'react';"
		" "
		"interface PropsType extends HTMLAttributes<HTMLElement>  { "
		" className: string",
		" elementName: React.ElementType",
		" children: React.ReactNode"
    	"}"
		"  "
		"export default function ${1:${TM_FILENAME/(\\w+)\\..+/$1/g}}({className,children, elementName ...props}:PropsType) {"
		" const Container = elementName;"
		" return <Container {...props}>{children}</Container>; "
		"}"
	],
	"description": "Dynamic Components"
	},
 }

 

dc 를 입력하면 보이는 코드 조각을 선택하면 아래와 같은 컴포넌트가 생성

 

 

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 의 . 표기를 기준으로 즉시 배열 변수명을 입력할 수 있도록 되어 있다.