Sublime Text는 새로운 .vue 템플릿을 생성하고 이를 강조 표시합니다(그래픽 튜토리얼)_vue.js

이 글은 Sublime Text의 새로운 .vue 템플릿과 하이라이팅(그림 및 텍스트 튜토리얼)을 주로 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

준비

1. 새 파일 템플릿 플러그인 SublimeTmpl을 다운로드하고 설치합니다. SublimeTmpl

2. vue 구문 강조 플러그인 Vue 구문 강조를 다운로드하고 설치합니다. Vue 구문 강조

플러그를 설치하는 방법에는 두 가지가 있습니다. -Sublime Text의 경우:

1, Sublime Text의 자체 설치 라이브러리 Package Control을 사용하여 설치

메뉴 표시줄에서 Preferences -> Package Control을 클릭하거나 단축키 CTRL+SHIFT+P를 사용하여 터미널 창을 엽니다. , Install을 입력하고 Package Control: Install Package를 선택하여 install

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.

플러그인 패키지 폴더 직접 열기Preferences -> Browse Packages

Preferences-> 패키지 찾아보기

패키지 폴더

템플릿이 저장된 폴더를 열고 원하는 항목을 복사하세요. vue.tmpl

vue.tmpl vue.tmpl 콘텐츠를 생성하고 원하는 템플릿으로 변경하세요

vue.tmpl 콘텐츠

2. 새로운 vue 옵션

SublimeTmpl 새 메뉴에는 그림과 같이 기본적으로 vue가 없습니다.

New -> 새 파일(SublimeTmpl)

위 그림에서 메뉴 옵션을 클릭하거나 환경 설정을 엽니다. -> 패키지 설정 -> SublimeTmpl -> 설정 - 메뉴, 그림과 같이

메뉴 구성 항목을 엽니다.

항목을 복사한 다음 붙여넣고 vue 항목으로 변경합니다. 사진에 표시

새 vue 항목 추가

수정 사항을 저장하면 새 메뉴에 표시됩니다. 그림과 같이 vue 항목이 나타납니다

vue 항목이 나타납니다

위 사진에서 vue new 항목을 클릭하면 이전에 설정한 템플릿 내용이 나오긴 하지만, 사진과 같이 구문 강조가 없고 일반 텍스트 형식으로 되어 있습니다

새 vue 파일을 생성합니다

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

기본 설정 열기 -> SublimeTmpl -> 설정 - 그림과 같이 기본값

기본 설정 항목 열기 항목을 vue로 수정하면 경로는 다음과 같습니다

Bind vue 구문

Bind 구문 관련 파일 경로입니다. Sublime Text3DataCache 디렉터리를 확인하고 플러그인 이름이 강조 표시된 vue 구문을 찾아서 엽니다. , 그림

등

Sublime Text3DataCache 디렉토리

Sublime Text3DataCachevue-syntax-highlight

메뉴에서 새 vue를 다시 생성하면 그림과 같이 구문이 강조 표시됩니다

새로운 뷰

4. 새로운 vue 파일을 생성하기 위한 단축키 정의

Open Preferences -> SublimeTmpl -> Key Bindings - 그림과 같이 기본값

설정 단축키 파일을 엽니다

한 항목을 복사하여 붙여넣어 새 항목을 만듭니다. vue 단축키는 그림과 같이 ctrl+alt+v입니다.

단축키

를 만든 후 메뉴 그림과 같이 새 메뉴에도 생성됩니다

새 파일 메뉴

사용해 보세요, 완벽합니다!

Perfect

드디어

파일은 명령어 설정용인거같고 설정방법은 위와 같으니 그냥 고양이랑 호랑이만 복사하세요~

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands

마지막

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

관련 권장 사항:

GBK 형식을 열 때 Sublime Text에서 중국어 깨짐 문자를 해결하는 방법에 대한 세부 정보

사용하기 쉬운 프런트 엔드 편집기-Sublime Text

예제에 대한 자세한 설명 숭고한 텍스트 바인딩 Eclipse 단축키

위 내용은 Sublime Text는 새로운 .vue 템플릿을 생성하고 이를 강조 표시합니다(그래픽 튜토리얼)_vue.js의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!