A collection of React snippets for TypeScript and JavaScript, including functional components and more.
TypeScript 및 JavaScript를 위한 React 스니펫 모음으로, 함수형 컴포넌트와 기타 유용한 스니펫을 포함하고 있습니다.
- React Arrow Function Component: Use the shortcut
rato generate a React arrow function component. - React Function Component: Use the shortcut
rfto generate a regular React function component. - Stateless Implicit Return Component: Use the shortcut
rsito generate a React stateless implicit return component. - Dynamic Component Naming: Automatically sets the component name based on the file name.
- React 화살표 함수 컴포넌트: 단축키
ra를 사용하여 React 화살표 함수 컴포넌트를 생성합니다. - React 함수 컴포넌트: 단축키
rf를 사용하여 일반 React 함수 컴포넌트를 생성합니다. - 상태 없는 암시적 반환 컴포넌트: 단축키
rsi를 사용하여 React 상태 없는 암시적 반환 컴포넌트를 생성합니다. - 동적 컴포넌트 이름 설정: 파일 이름을 기반으로 자동으로 컴포넌트 이름을 설정합니다.
- Open Visual Studio Code.
- Go to the Extensions view (
Ctrl+Shift+X). - Search for
pjw-snippets. - Click
Installto install the extension.
- Visual Studio Code를 엽니다.
- 확장 프로그램 뷰로 이동합니다 (
Ctrl+Shift+X). pjw-snippets를 검색합니다.- 설치를 클릭하여 확장 프로그램을 설치합니다.
-
Create a new
.tsxor.jsxfile. -
Use the following shortcuts:
- Type
raand pressTabto insert a React arrow function component. - Type
rfand pressTabto insert a React function component. - Type
rsiand pressTabto insert a React stateless implicit return component. - Type
siand pressTabto import a CSS module. - Type
cnand pressTabto add a className with styles.
- Type
- 새
.tsx또는.jsx파일을 생성합니다. - 다음 단축키를 사용합니다:
ra를 입력하고Tab을 눌러 React 화살표 함수 컴포넌트를 삽입합니다.rf를 입력하고Tab을 눌러 React 함수 컴포넌트를 삽입합니다.rsi를 입력하고Tab을 눌러 React 상태 없는 암시적 반환 컴포넌트를 삽입합니다.si를 입력하고Tab을 눌러 CSS 모듈을 가져옵니다.cn을 입력하고Tab을 눌러 스타일이 적용된 className을 추가합니다.
If you would like to contribute to this extension, feel free to submit a pull request or open an issue.
이 확장 프로그램에 기여하고 싶으시면, 언제든지 풀 리퀘스트를 제출하거나 이슈를 열어주세요.
This project is licensed under the MIT License - see the LICENSE file for details.
이 프로젝트는 MIT 라이센스에 따라 라이센스가 부여됩니다 - 자세한 내용은 LICENSE 파일을 참조하세요.