코드 스니펫을 공유합니다

2021. 03. 13

VSCode에서 제가 사용하는 코드 스니펫을 공유해 볼까 합니다. 이전 블로그에서도 다룬 적이 있습니다.

만드는 법

VSCode - Code - 기본 설정 - 사용자 코드 조각

Prettier

저장 시 자동으로 포맷팅을 해주는 유용한 도구입니다.

{
  "singleQuote": true,
  "semi": false,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 90
}

Typescript JSX

// 콘솔로그
"console.log": {
	"prefix": "clg",
	"body": [
		"console.log('$1', $1)"
	],
	"description": "console.log"
}
// 기본 컴포넌트 생성
"react tsx": {
	"prefix": "tsx",
	"body": [
		"import  { FunctionComponent } from 'react'",
		"",
		"export interface Props {}",
		"interface State {}",
		"",
		"const $1: FunctionComponent<Props> = () => {",
		"  return <>$1</>",
		"} ",
		"",
		"export default $1"
	],
	"description": "react tsx"
}
// 페이지 생성기
"page generator": {
	"prefix": "page",
    "body": [
      "interface State {}",
      "",
      "const $1 = () => {",
      "  return <>$1</>",
      "}",
      "",
      "export default $1"
    ],
    "description": "page generator"
}
// Jest 파일 생성기
"typescript react test": {
    "prefix": "tsxtest",
    "body": [
      "import React from 'react'",
      "import { render } from '@testing-library/react'",
      "",
      "describe('$1', () => {",
      "    it('$2', () => {",
      "        $3",
      "    })",
      "})"
    ],
    "description": "typescript react test"
  },
  "typescript it": {
    "prefix": "tsxit",
    "body": ["it('$1', () => {", "    $2", "})"],
    "description": "typescript it"
  },
// 컴포넌트 내보낼 때
"export default": {
    "prefix": "exp",
    "body": ["export { default as Re$1 } from './$1'"]
},
// 리액트네이티브 컴포넌트 생성
"typescript native": {
	"prefix": "tsxnative",
	"body": [
		"import * as React from 'react'",
		"import { View, Text } from 'react-native'",
		"import styled from '@emotion/native'",
		"",
		"export interface Props {",
		"  $2",
		"}",
		"",
		"const $1 = ({}: Props) => {",
		"  return (",
		"    <View>",
		"      <Text>$1</Text>",
		"    </View>",
		"  )",
		"}",
		"",
		"export default $1",
		""
	],
	"description": "typescript native"
}

Typescript TypeORM

// Entity 생성
"TypeORM Entity": {
	"prefix": "entity",
	"body": [
		"import { Entity, PrimaryGeneratedColumn, BaseEntity } from 'typeorm'",
		"",
		"@Entity({ name: '$2' })",
		"export default class $1 extends BaseEntity {",
		"  @PrimaryGeneratedColumn()",
		"  id: number",
		"}",
		""
	],
	"description": "TypeORM Entity"
}
// Subscriber 생성
"TypeORM subscriber": {
	"prefix": "subscriber",
	"body": [
		"import { EventSubscriber, EntitySubscriberInterface } from 'typeorm'",
		"",
		"@EventSubscriber()",
		"export class $1 implements EntitySubscriberInterface<any> {",
		"    $2",
		"}"
	],
	"description": "TypeORM subscriber"
}
// Factory 생성
"TypeORM factory": {
	"prefix": "factory",
	"body": [
		"import { define } from 'typeorm-seeding'",
		"import * as Faker from 'faker/locale/ko'",
		"import $1 from 'entities/$1'",
		"",
		"define($1, (faker: typeof Faker) => {",
		"    $2",
		"})",
		""
	],
	"description": "TypeORM factory"
}
// Seeder 생성
"TypeORM seeder": {
	"prefix": "seeder",
	"body": [
		"import { Seeder, Factory } from 'typeorm-seeding'",
		"import { Connection } from 'typeorm'",
		"",
		"export default class $1 implements Seeder {",
		"  async run(factory: Factory, connection: Connection): Promise<any> {",
		"    $2",
		"  }",
		"}",
		""
	],
	"description": "TypeORM seeder"
}
// Controller 생성
"TypeORM Controller": {
	"prefix": "controller",
	"body": [
		"import { JsonController, Get } from 'routing-controllers'",
		"",
		"@JsonController($2)",
		"export default class $1 {",
		"",
		"  @Get()",
		"  getAll() {",
		"    return '$2'",
		"  }",
		"}",
		""
	],
	"description": "TypeORM Controller"
}

개발 블로그

김동욱

wcgo2ling@gmail.com

© 2021 kidow. All right reserved.