Sublime Text의 새 템플릿에서 .vue를 강조 표시

이번에는 새로운 Sublime Text 템플릿에서 .vue를 강조 표시하는 주의 사항을 함께 살펴보겠습니다.

이 글에서는 Sublime Text의 새로운 .vue 템플릿과 강조 표시(그림 및 텍스트 튜토리얼)를 소개하고, 모든 사람과 공유하고, 직접 메모를 남길 수 있습니다.

준비

1. Install새 파일 템플릿 플러그인 SublimeTmpl 다운로드

2. vue 구문 강조 플러그인 Vue 구문 강조

다운로드 및 설치 Sublime Text용 플러그인을 설치하는 방법에는 두 가지가 있습니다.

1. 서브라임텍스트 자체 설치 라이브러리인 Package Control을 이용해 설치

메뉴 표시줄에서 기본 설정 -> 패키지 제어를 클릭하거나 단축키 CTRL+SHIFT+P를 사용하여 터미널 창을 열고 설치를 입력한 후 패키지 제어: 패키지 설치를 선택하여 설치하세요

2. 다운로드하여 패키지 디렉터리(Preferences / Browse Packages) 중국어: (Preferences / Package Browser) 폴더

1. 에 직접 넣습니다. SublimeTmpl

2. Vue 구문 강조

.vue 템플릿 생성 및 구문 강조 표시

Vue 구문 강조 표시를 설치한 후 이미 .vue 형식의 파일을 열 때 강조 표시할 수 있습니다. 이제 바로 가기 키를 설정하여 .vue 형식의 파일을 직접 생성해 보겠습니다.

SublimeTmpl에는 기본적으로 6개의 구문 템플릿만 있습니다:

1. html ctrl+alt+h

2. javascript ctrl+alt+j

3. css ctrl+alt+c

4. php ctrl+alt+p

5. ruby ctrl+alt+r

6. python ctrl+alt+shift+p

이제 vue 형식을 생성하기 위한 새 템플릿을 추가합니다

1. Vue 파일 템플릿 만들기

플러그인 패키지 폴더를 직접 엽니다 Preferences -> Browse Packages

기본 설정 -> 패키지 찾아보기

패키지 폴더

템플릿이 저장된 폴더 템플릿을 열고 항목을 복사한 후 이름을 vue.tmpl

로 바꿉니다. vue.tmplvue.tmpl을 생성하고 콘텐츠를 원하는 템플릿으로 변경하세요

vue.tmpl 콘텐츠

2. 새 메뉴를 수정하고 새 뷰 옵션을 추가하세요

SublimeTmpl의 새 메뉴에는 기본적으로 vue가 없습니다.

새 -> 새 파일(SublimeTmpl)

메뉴 옵션을 클릭하거나 환경 설정 -> SublimeTmpl -> 메뉴 구성 항목 열기

항목을 복사한 다음 붙여넣고 vue 항목으로 변경하세요.

뷰 항목이 추가되었습니다

변경 사항을 저장하면 vue 항목이 새 메뉴에 나타납니다

Vue 항목이 나타납니다

위 사진의 new vue 항목을 클릭하면 이전에 설정한 템플릿 내용이 나오긴 하는데 구문 강조가 없고 일반 텍스트 형식입니다

새로운 vue 파일 만들기

3. 템플릿 바인딩 vue 구문 강조

환경 설정 열기 -> SublimeTmpl -> 기본 설정 열기

항목을 복사하여 vue로 수정하면 경로는 다음과 같습니다

바인딩 vue 구문

바인딩 구문 관련 파일 경로는 Sublime Text3DataCache 디렉터리를 확인하고 플러그인 이름이 강조 표시된 vue 구문을 찾아 열어보세요

Sublime Text3DataCache 디렉토리

Sublime Text3DataCachevue-syntax-highlight

새로운 vue 메뉴를 다시 생성하면 구문이 강조 표시됩니다.

새로운 vue 파일 만들기

4. 새 vue 파일을 생성하기 위한 단축키를 바인딩하세요

기본 설정 열기 -> SublimeTmpl -> 키 바인딩 - 기본값,

설정 바로가기 파일 열기

항목을 복사하여 붙여넣어 새 뷰를 만듭니다. 단축키는 ctrl+alt+v,

입니다. 단축키 만들기

저장한 후에는 새 메뉴

에서 사용할 수 있습니다. 새로운 파일 메뉴

시도해 보세요. 완벽해요!

드디어

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 파일은 명령어 구성용인거 같은데 구성방법은 위와 같으니 그냥 고양이를 복사해서 호랑이를 그려보세요~

마지막

이러한 방식으로 다른 언어 템플릿을 직접 만들 수도 있습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

위 내용은 Sublime Text의 새 템플릿에서 .vue를 강조 표시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!