개발

[TIP] 웹스톰 라이브 템플릿(스니펫) 표현식 모음

2023년 10월 19일 발행읽는 시간 3분

생각날 때마다 추가하고 있습니다.

#라이브 템플릿

#부모 폴더의 이름을 컴포넌트명으로 하고 싶을 때

이름: $PARENT_DIR$
표현식: capitalize(camelCase(groovyScript("new File(_1).parentFile.name", filePath())))

폴더이름을 Button 으로 하고 파일이름은 index.tsx로 할때 폴더 명을 함수 명으로 해준다.

템플릿 텍스트

export default function $PARENT_DIR$(){
  return (
    $1$
  );
}

템플릿 텍스트

export default function $PARENT_DIR$(){
  return (
    $1$
  );
}

#파일 이름으로 컴포넌트를 생성 하고 싶을 때

이름: $FILENAME_BASE$
표현식: capitalize(camelCase(fileNameWithoutExtension()))

파일이름이 button.tsx 혹은 Button.tsx라면 첫 글자를 대문자로 해서 함수명으로 해준다.

export default function $FILENAME_BASE$(){
  return (
    $1$
  );
}

export default function $FILENAME_BASE$(){
  return (
    $1$
  );
}

#파일 및 코드 템플릿

#MDX 파일 기본 구조를 잡아서 생성하기

에디터 > 코드 스타일 > 파일 및 코드 템플릿 에서 위 이미지 처럼 설정해주자. 처음에 mdx파일을 위한 코드 템플릿은 없기 때문에 + 버튼을 눌러서 추가해줘야한다.

나는 제목과, 설명, 그리고 현재 시간을 파일 생성 시간으로 하고, 썸네일을 미리 넣어주고싶었다.

웹스톰-설정

  ---
  title: '${TITLE}'
  description: ${DESCRIPTION}
  category: DEV
  createdAt: ${YEAR}-${MONTH}-${DAY}
  tags:
  - title: "JavaScript"
  thumbnail: /assets/images/${THUMBNAIL}
  ---

  <Box borderRadius={"lg"} style={{ overflow: 'hidden' }}>
    <img src="/assets/images/${THUMBNAIL}"
         style={{ width: '100%', height: '45vh', borderRadius: '20px', margin: '0 auto' }}
         alt="${TITLE} 글의 썸네일"
         fetchPriority={"high"} />
  </Box>

  <Divider/>

  # ${TITLE}

웹스톰-설정

  ---
  title: '${TITLE}'
  description: ${DESCRIPTION}
  category: DEV
  createdAt: ${YEAR}-${MONTH}-${DAY}
  tags:
  - title: "JavaScript"
  thumbnail: /assets/images/${THUMBNAIL}
  ---

  <Box borderRadius={"lg"} style={{ overflow: 'hidden' }}>
    <img src="/assets/images/${THUMBNAIL}"
         style={{ width: '100%', height: '45vh', borderRadius: '20px', margin: '0 auto' }}
         alt="${TITLE} 글의 썸네일"
         fetchPriority={"high"} />
  </Box>

  <Divider/>

  # ${TITLE}