Sublime text new .vue template and highlight (graphic tutorial)

This article introduces Sublime Text New .vue Template and highlight (Tutorial), share it with you, and leave a note.

  1. Download installation new file template plug-in SublimetMPL
  2. download installation Vue syntax highlink plugin Vue syntax highlight

Sublime text Installation plug-in:

1, use Sublime Text toilet package package control

Click Preferences -> Package Control in the menu bar to open the terminal window using the shortcut key Ctrl + Shift + P, enter install to select Package Control: Install Package to install

2, download direct placement package directory (Preferences / Browse Packages: (Preference / Package Browser) folder

    Vue Syntax Highlight

  1. Created .VUE Template And let the syntax highlight

After the Vue Syntax Highlight is installed, the file you open .Vue format is already high, we now set up files that use shortcuts directly to create .vue format. SublimeTMPL only 6 syntax templates by default:


JavaScript Ctrl + Alt + J CSS Ctrl + ALT + C

    PHP CTRL + Alt + P

  1. Ruby Ctrl + Alt + R

  2. Python Ctrl + Alt + Shift + P

  3. We now add a template

, creating a Vue File Template

Preferences -> Browse packages

Preferences -> Browse package

Sublime Text新建.vue模板并高亮(图文教程)

Package folder

Open the folder templates of the storage template, copy one, renamed Vue.TMPL

Sublime Text新建.vue模板并高亮(图文教程)

Create a Vue .tmplvue.tmpl content changed to the template you want

Vue.TMPL content Sublime Text新建.vue模板并高亮(图文教程)

2, modify the new menu, increase New VUE Options

SublimetMPL New Menu The default is no Vue, as shown Sublime Text新建.vue模板并高亮(图文教程)

New-> New File (SublimeTMPL)

Click on the MENU option above the figure, or open preferences -> package settings -> SUBLIMETMPL -> Settings – Menu, Figure

Sublime Text新建.vue模板并高亮(图文教程) Open menu configuration item

Copy one, then paste the modified to VUE item, as shown

Sublime Text新建.vue模板并高亮(图文教程)
New VUE Item

Save the modification, the VUE item will appear in the new menu, as shown

Sublime Text新建.vue模板并高亮(图文教程)
VUE Item

Click on the new item of the VUE above, it will appear the previously set template content, but there is no syntax highlight, and it is a plain text format, as shown in Figure

Sublime Text新建.vue模板并高亮(图文教程)
New Vue file

3, template binding Vue syntax highlight

Sublime Text新建.vue模板并高亮(图文教程) Open preferences -> package settings -> SUBLIMETMPL -> settings – DEFAULT, as shown in Figure

Open the default setting item

Copy one and modified to VUE, the path is as follows

Bind Vue Syntax Sublime Text新建.vue模板并高亮(图文教程)
Binding Syntax Association File Path Please check the directory SUBLIME TEXT3 \ DATA \ Cache, find the VUE highlight syntax plugin name, and open, as shown

Sublime text3 \ data \ cache directory

Sublime Text新建.vue模板并高亮(图文教程)

Sublime TEXT3 \ DATA \ Cache \ Vue-Syntax-Highlight

New VUE is highlighted in the menu, as shown in Figure

Sublime Text新建.vue模板并高亮(图文教程)

New Vue file

4, Binding New Vue File Shortcuts

Sublime Text新建.vue模板并高亮(图文教程)
Open Preferences -> SUBLIMETMPL -> KeyBindings – default, as shown in Figure

Opened setting shortcut file

copy one, paste creation new Vue shortcuts for Ctrl + Alt + v, as shown

Sublime Text新建.vue模板并高亮(图文教程)
Create a shortcut

After saving, there is also a new menu, as shown in Figure

New file menu

Try, perfect! Sublime Text新建.vue模板并高亮(图文教程)


Sublime Text新建.vue模板并高亮(图文教程)
Preferencees -> Package Settings -> SublimeTMPL – > Settings – Commands

file seems to be the configuration command, the configuration method is also the same, according to the top, the cat and the painting tiger can be ~

Other language templates can also be created themselves. Sublime Text新建.vue模板并高亮(图文教程)
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment