vscode에서 사용자 정의 코드 템플릿을 만드는 방법-VSCode-php.cn

집

개발 도구

VSCode

vscode에서 사용자 정의 코드 템플릿을 만드는 방법

王林

Dec 16, 2019 pm 04:06 PM

vscode 코드 템플릿 만들다 사용자 정의

vscode에서 사용자 정의 코드 템플릿을 만드는 방법

本文以Vue的创建为例，不过这个Vue是在HTML中创建的。

初学Vue，我们一般都是在.html文件中引入vue包，然后编写自己的vue代码。

因为我们创建的模板是在.html文件下，所以我们的模板也得是在html.json中来进行编写。

具体方法如下：

1、在Vscode中找到设置 -> 用户代码片段，在输入框内输入html，并点击第一个html.json：

vscode에서 사용자 정의 코드 템플릿을 만드는 방법

初次输入的话，第一个html.json可能会不带.json后缀，不用管，直接点击html进入即可。

2、进入到html.json页面，这里就是我们编写自己模板的地方

vscode에서 사용자 정의 코드 템플릿을 만드는 방법

接下里就是编写我们的模板了，我们的模板需要的大致有以下几项：

1、基本的HTML架构。

2、引入Vue包的script路径。

3、一些基本的Vue代码结构。

模板我已经备好了，模板如下：

"Html5-Vue": {
"prefix": "vue",
"body": [
"<!DOCTYPE html>",
"<html lang=\"zh-CN\">\n",
"<head>",
"\t<meta charset=\"UTF-8\">",
"\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
"\t<title>Document</title>",
"\t<script src=\"../lib/vue-2.5.17/vue.js\"></script>",
"</head>\n",
"<body>",
"\t<div id=\"app\">$1</div>\n",
"\t<script>",
"\t\tvar vm = new Vue({",
"\t\t\tel: &#39;#app&#39;,",
"\t\t\tdata: {},",
"\t\t\tmethods: {}",
"\t\t});",
"\t</script>",
"</body>\n",
"</html>"
],
"description": "快速创建在html5编写的vue模板"
}

로그인 후 복사

4、把上面的这个模板拷贝到html.json中即可，当然路径要变成自己的本机路径，其余的地方如果看着不舒服也可以自行更改。

5、保存之后，我们创建一个.html文件，输入vue，回车即可自动生成我们需要的模板了。模板示例图：

vscode에서 사용자 정의 코드 템플릿을 만드는 방법

必要的说明：

为了防止大家更改模板时出现不必要的错误，我给大家简单说一下模板中的东西：

不要纠结一开头写的："Html5-Vue"，这只是一个模板名字而已。

"prefix": ""这里规定的是触发模板的关键词，我这里规定触发词为vue。

我们的模板都是在"body":[]中编写的。

每一行模板代码都要用双引号""来包括。

如果双引号包括的代码中间也出现了双引号，那么需要用转义字符\转义。

\n意味着换行，\t是制表符，这两个用于生成时模板的缩进，让生成出来的模板便于阅读。

模板中出现的$1代表着光标，它的位置即光标的默认位置，可以有多个光标：$2,$3,$4等。

"description":""双引号包括的是对模板描述，同时也是你在.html页面输入触发词后，智能提示中出现的对触发词的解释。

千万别把Vscode中html.json文件自带的{}覆盖了，只需覆盖注释部分，或直接写到注释下面即可。

핫 AI 도구

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7696

자바 튜토리얼

1640

Cakephp 튜토리얼

1393

라라벨 튜토리얼

1287

PHP 튜토리얼

1229

Related knowledge

VSCODE 용 헤더 파일을 정의하는 방법 Apr 15, 2025 pm 09:09 PM

Visual Studio 코드를 사용하여 헤더 파일을 정의하는 방법은 무엇입니까? .h 또는 .hpp 접미사 이름 (예 : 클래스, 함수, 변수)을 사용하여 헤더 파일을 만들고 기호를 선언합니다. 소스 파일에 헤더 파일을 포함시키기 위해 #include 지시문을 사용하여 프로그램을 컴파일합니다. 헤더 파일이 포함되어 있고 선언 된 기호를 사용할 수 있습니다.

VSCODE에 필요한 컴퓨터 구성 Apr 15, 2025 pm 09:48 PM

대 코드 시스템 요구 사항 : 운영 체제 : Windows 10 이상, MacOS 10.12 이상, Linux 배포 프로세서 : 최소 1.6GHz, 권장 2.0GHz 이상의 메모리 : 최소 512MB, 권장 4GB 이상의 저장 공간 : 최소 250MB, 권장 1GB 및 기타 요구 사항 : 안정 네트워크 연결, Xorg/Wayland (LINUX)

vscode 중국 주석의 문제를 해결하는 방법 물음표가되는 방법 Apr 15, 2025 pm 11:36 PM

Visual Studio Code에서 중국어 의견이 물음표가되는 문제를 해결하는 방법 : 파일 인코딩을 확인하고 "BOM이없는 UTF-8"인지 확인하십시오. 글꼴을 "노래 스타일"또는 "Microsoft Yahei"와 같은 한자를 지원하는 글꼴로 변경하십시오. 글꼴을 다시 설치하십시오. 유니 코드 지원을 활성화합니다. vscode를 업그레이드하고 컴퓨터를 다시 시작하고 소스 파일을 재현하십시오.

vscode를 사용하는 방법 Apr 15, 2025 pm 11:21 PM

Visual Studio Code (VSCODE)는 Microsoft가 개발 한 크로스 플랫폼, 오픈 소스 및 무료 코드 편집기입니다. 광범위한 프로그래밍 언어에 대한 가볍고 확장 성 및 지원으로 유명합니다. VSCODE를 설치하려면 공식 웹 사이트를 방문하여 설치 프로그램을 다운로드하고 실행하십시오. VScode를 사용하는 경우 새 프로젝트를 만들고 코드 편집, 디버그 코드, 프로젝트 탐색, VSCODE 확장 및 설정을 관리 할 수 있습니다. VSCODE는 Windows, MacOS 및 Linux에서 사용할 수 있으며 여러 프로그래밍 언어를 지원하며 Marketplace를 통해 다양한 확장을 제공합니다. 이점은 경량, 확장 성, 광범위한 언어 지원, 풍부한 기능 및 버전이 포함됩니다.

VSCODE 터미널의 공통 명령 Apr 15, 2025 pm 10:06 PM

VS 코드 터미널에 대한 공통 명령은 다음과 같습니다. 터미널 화면 (Clear) 지우기 (CLEAR), 현재 디렉토리 파일 (LS)을 나열하고 현재 작업 디렉토리 (CD) 변경, 현재 작업 디렉토리 경로 (MKDIR) 작성, 빈 디렉토리 (RMDIR) 삭제, 새 파일 (터치), 파일 삭제 또는 디렉토리 또는 디렉토리 (CP) (MV) 파일 콘텐츠 표시 (CAT) 파일 콘텐츠보기 및 스크롤 (적음) 파일 컨텐츠보기 아래로 스크롤 (more) 파일의 처음 몇 줄 (헤드)을 표시합니다.

VSCODE 터미널 사용 튜토리얼 Apr 15, 2025 pm 10:09 PM

VSCODE 내장 터미널은 편집기 내에서 명령 및 스크립트를 실행하여 개발 프로세스를 단순화 할 수있는 개발 도구입니다. VSCODE 터미널 사용 방법 : 바로 가기 키 (CTRL/CMD)로 터미널을 엽니 다. 명령을 입력하거나 스크립트를 실행하십시오. 핫키 (예 : ctrl l)를 사용하여 터미널을 지우십시오). 작업 디렉토리 (예 : CD 명령)를 변경하십시오. 고급 기능에는 디버그 모드, 자동 코드 스 니펫 완료 및 대화식 명령 기록이 포함됩니다.