Visual Studio Code 에 템 플 릿 만 들 기 (코드 세 션)

1. 전역 템 플 릿 새로 만 들 기

File - > Preferences - > User Snippets (macOS 에서 코드 - > Preferences - > User Snippets)

열기

새로운 글로벌 스 니 펫 파일 옵션 을 선택 하 십시오. 그림: 클릭 하여 선택

팝 업 창 에 원 하 는 이름 을 입력 하고 저장

코드 편집 란 에서 방금 만 든 파일 보기

이 템 플 릿 은 이미 만 들 어 졌 습 니 다. 다음은 필요 한 파일 만 쓰 면 됩 니 다. 이것 은 만 든 JSON 파일 이기 때문에 {...} 에 필요 한 코드 만 쓸 수 있 습 니 다

2. 필드 정의 해석

{
	"React-Native Class":{
		"scope": "javascript,typescript",
		"prefix": "rnc",
		"body": [
			"import React, { Component } from 'react'",
			"import { StyleSheet, View, Text ,Image } from 'react-native'",
			"",
			"/**",
			"*",
			"* @ author: ",
			"* @ email: ",
			"* @ data: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE",
			"*/",
			"class ${1:className} extends Component {",
			"",
			"\trender() {",
			"\t\treturn (",
			"\t\t\t",
			"\t\t\t",
			"\t\t)",
			"\t}",
			"}",
			"",
			"const styles = StyleSheet.create({",
			"\tcontainer: {",
			"\t\tflex: 1",
			"\t}",
			"})",
			"",
			"export default ${1:className}"
		],
		"description": "    React-Native "
	}
}

여 기 는 React - Native 류 파일 로 예 를 들 어 설명 합 니 다. 자주 사용 하 는 필드 도 이 몇 개 밖 에 없습니다 (scope, prefix, body, description).

코드 와 같은 React - Native Class 필드: 템 플 릿 에 지 을 이름 (이것 은 자신 이 좋아 하 는 이름 에 따라 지 을 수 있 습 니 다)

scope (고정 필드): 파일 생 성 속성, 예 를 들 어 javascript, typescript, 쓰 지 않 아 도 되 지만 낙서 하면 안 됩 니 다

prefix (고정 필드): 스마트 알림 옵션, 예 를 들 어 rnc 라 는 이름 을 지 었 습 니 다. 파일 을 만 든 후에 rnc 를 입력 하면 스마트 옵션

이 나타 납 니 다.

body (고정 필드): 문자열 배열, 코드 세 션 을 배치 하고 코드 한 마디 가 요 소 를 차지 합 니 다.

 ：     "\t" ，

description (고정 필드): 말 그대로 이 템 플 릿 의 설명 은 스마트 큐 카드 에 표시 할 수 있 습 니 다 (따라서 간단명료 해 야 합 니 다)

3. 문법 해석

$1, $2, $3... $0: 탭 비트 는 코드 세 션 이 만들어 진 후 커서 가 표시 되 는 위 치 를 표시 합 니 다. $1 은 커서 의 초기 위 치 를 표시 합 니 다. $2 는 사용자 가 키보드 의 Tab 키 커서 를 누 르 고 이동 하 는 다음 위 치 를 표시 합 니 다. 순서대로 유추 합 니 다. $3 은 Tab 키 의 다음 위 치 를 다시 누 르 는 것 을 표시 합 니 다. 숫자 는 Tab 이 표시 되 는 위 치 를 몇 번 누 르 는 지, $0 은 커서 가 끝 난 위 치 를 표시 합 니 다

  ：        ，        ，     ，

${1: className}: 테이블 위 치 를 미리 차지 합 니 다. 위 와 마찬가지 로 위 에 만 공백 을 표시 합 니 다. 이것 은 커서 에 미리 차지 하 는 className 을 표시 합 니 다. 이 className 은 원 하 는 것 을 쓸 수 있 습 니 다. Tab 선택 시 수정 할 수 있 습 니 다. 예 를 들 어 ${1: params 1}, ${2: params 2}

 ：          ，  ${1:another ${2:placeholder}}

${1 | one, two, three |}: 자리 표시 자 는 선택 한 값 이 있 습 니 다. 사용자 Tab 이 선택 한 값 을 표시 할 때 사용자 가 제시 한 값 중 선택 합 니 다.문법: | (쌍 세로 선) 에 예선 매개 변 수 를 쓰 고 여러 매개 변 수 는 "," 분리, 필요 에 따라 숫자 1 도 가 변 적 입 니 다

$name 또는 ${name: default}: 가 변 적 인 값 을 삽입 합 니 다. 변 수 를 설정 하지 않 으 면 기본 값 이나 빈 문자열 이 삽 입 됩 니 다. 변 수 는 알 수 없 는 (즉, 이름 은 아래 에 정 의 된 변수 가 아 닙 니 다) 변수의 이름 입 니 다. 삽입 하면 자리 표시 자

로 변 환 됩 니 다.
사용 가능 한 기본 변수

    TM_SELECTED_TEXT             
    TM_CURRENT_LINE        （        ，     ）
    TM_CURRENT_WORD              
    TM_LINE_INDEX   zero-index   （                 1）
    TM_LINE_NUMBER          （               ）
    TM_FILENAME         
    TM_FILENAME_BASE         （     ）
    TM_DIRECTORY        
    TM_FILEPATH             
    CLIPBOARD

삽입 가능 한 날짜 와 시간 변수

    CURRENT_YEAR       (example '2019')
    CURRENT_YEAR_SHORT        (example '19')
    CURRENT_MONTH          (example '02')
    CURRENT_MONTH_NAME       (example 'March')
    CURRENT_MONTH_NAME_SHORT       (example 'Mar')
    CURRENT_DATE         (example '06')
    CURRENT_DAY_NAME    (example 'Monday')
    CURRENT_DAY_NAME_SHORT      (example 'Mon')
    CURRENT_HOUR 24   ，  
    CURRENT_MINUTE  
    CURRENT_SECOND

예 를 들 면:

{
    "hello": {
        "scope": "javascript,html",
        "prefix": "hello",
        "body": "$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE"
    }
}

출력: 현재 년 월 일 (예: 2019 - 03 - 06 11: 03)
삽입 가능 한 블록 문법

    BLOCK_COMMENT_START    PHP   /*  HTML   
    LINE_COMMENT    PHP   //  HTML

예 를 들 면:

{
    "hello": {
        "scope": "javascript,html",
        "prefix": "hello",
        "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
    }
}

출력:

코드 세 션 을 만 드 는 데 는 기본적으로 이런 것들 이 사 용 됩 니 다. 다른 명령 들 은 사용 이 적 기 때문에 일일이 설명 하지 않 습 니 다!관심 있 는 것 은 Visual Studio Code 공식 문 서 를 볼 수 있 습 니 다.
다음으로 전송:https://juejin.im/post/5c887bb5f265da2dba0262b0

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

Visual Studio Code 에 템 플 릿 만 들 기 (코드 세 션)

좋은 웹페이지 즐겨찾기