안녕하세요 여러분 저는일주일의 그릇, 취하기 싫은 프론트엔드(연루). 운이 좋으면 기사를 쓸 수 있는 행운아~
앞에 쓰다
코드 스니펫은 템플릿으로 이해할 수 있으며, 명칭 입력 시 [탭] 또는 [엔터] 키를 누르면 해당 템플릿이 표시됩니다.
코드 스니펫만 잘 쓰면 승진과 급여 인상은 필수~
코드 조각의 장단점
coder는 코드 조각에 대해 엇갈린 리뷰를 가지고 있습니다. 다음 그림은 코드 조각의 장점과 단점을 설명합니다.
코드 조각을 사용하는 경우
코드 스니펫을 언제 사용해야 하는지에 대해 제 조언은 다음과 같습니다.
- 예를 들어
console.log(), 사물에 익숙 하면 이때 코드 조각 을 설정할 수 있습니다. - Vue 단일 파일의 예비 정의와 같이 일부 항목은 특히 번거롭고 매번 작성해야 합니다.
물론 위의 내용은 어디까지나 제 제안일 뿐입니다.
코드 조각을 설정하는 방법
먼저 VSCode를 준비하고 운영 체제를 결정한 다음 작업을 시작합니다.
- Windows 시스템: [파일]→[기본 설정]→[사용자 조각]
- Mac 시스템: 【Code】→【Preferences】→【User Fragment】
그러면 다음 내용을 볼 수 있습니다
그런 다음 기존 코드 조각을 수정하거나 새 코드 조각을 만들 수 있습니다. 여기 test-snippets에서 데모용 으로 명명된 전역 코드 조각을 만듭니다 .
코드 조각 구문
생성 후 JSON과 유사한 문법이 다음 내용과 함께 나타납니다.
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}
复制代码다음으로 VSCode에서 코드 조각의 구문을 배웁니다.
첫 번째 콘텐츠는 개체에 의해 래핑됩니다. 개체의 각 속성은 코드 조각을 나타냅니다. 속성 이름은 코드 조각의 이름입니다. 코드 조각이 트리거되면 일치하는 코드 조각 이름이 표시됩니다. 속성 이름의 예를 들어 Print to console.
다음으로 코드 조각의 각 속성이 하는 일을 배웁니다.
scope: 코드 조각이 작동하는 언어를 나타냅니다. 다른 언어로,구분하십시오.javascript, typescript,html,css,vue등 이 일반적으로 사용됩니다 . 로 설정하면""모든 장소가 유효함을 의미합니다.prefix: 코드 조각을 트리거하는 문자에 해당합니다.description: 코드 조각에 대한 설명입니다.body: 일반적으로 배열인 개체 코드 조각의 내용은 배열의 한 줄에 생성된 코드 조각 뒤의 줄에 해당합니다.
코드 조각 생성을 위한 웹사이트를 추천합니다. 링크는 다음과 같습니다.
$ 자리 표시자
위의 예 log에서 [tab] 키를 입력하고 누르면 다음 코드가 표시됩니다.
console.log();
复制代码이 본 내용의 커서의 출현 후 ()내부하고 [탭] 키를 누르면, 커서가 다음 인 라인으로 전달 될 수있다 $2위치 동일한 방식으로, 우리는 설정할 수 $3, $4등등
주목할 가치가 $0있습니다. 최종 커서 위치를 설정하는 데 사용됩니다.
기본 및 선택 사항
플레이스홀더에 기본값을 갖고 싶다면 ${1:defalt}의 형태로 쓸 수 있습니다 .
행이 몇 가지 옵션을 제공하는 경우 ${1|one,two,three|}예를 들어 다음과 같은 형식으로 작성할 수 있습니다.
{
"import": {
"scope": "javascript,typescript",
"prefix": "import",
"body": [
"import { $2 } from \"${1|axios,lodash,day|}\"",
"$3"
],
"description": "导入模块"
}
}
复制代码테스트는 다음과 같습니다.
그런 다음 아래와 같이 [탭]을 누릅니다.
일정한
코드 조각에서 VSCode는 몇 가지 상수를 제공하며 사용법은 비교적 간단합니다(예: $TM_FILENAME.
TM_SELECTED_TEXT 当前选定的文本或空字符串
TM_CURRENT_LINE 当前行的内容
TM_CURRENT_WORD 光标下的单词的内容或空字符串
TM_LINE_INDEX 基于零索引的行号
TM_LINE_NUMBER 基于一索引的行号
TM_FILENAME 当前文档的文件名
TM_FILENAME_BASE 当前文档的文件名（不含后缀名)
TM_DIRECTORY 当前文档的目录
TM_FILEPATH 当前文档的完整文件路径
CLIPBOARD 剪切板里的内容
WORKSPACE_NAME 已打开的工作空间或文件夹的名称
CURRENT_YEAR 当前年(四位数)
CURRENT_MONTH 当前月
CURRENT_DATE 当前日
CURRENT_DAY_NAME_SHORT 当天的短名称（’Mon’）
CURRENT_HOUR 当前小时
CURRENT_MINUTE 当前分钟
CURRENT_SECOND 当前秒
BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML <!--
BLOCK_COMMENT_END 块注释结束标识,如 PHP */ 或 HTML -->
LINE_COMMENT 行注释，如： PHP // 或 HTML <!-- -->
复制代码프로젝트에 대한 코드 조각 만들기
때때로 우리는 특정 프로젝트에 대한 몇 가지 코드 조각을 생성해야 합니다. 사실, 그것은 비교적 간단합니다. 우리는 현재 프로젝트의 루트 디렉토리에 .vscode폴더를 생성 한 다음 로 .code-snippets끝나는 파일을 생성하기만 하면 됩니다 . 작성 방법은 동일합니다. 위와 같이.
마지막에 쓰세요
여기에서 GitHub 리포지토리를 만들고 VSCode에 일부 코드 조각을 넣었습니다.리포지토리 주소는 다음과 같습니다.
이거 봤는데 응원하기 싫어요~