Sublime Text: Create a New. vue template and highlight it (Graphic tutorial), sublime. vue

Sublime Text: Create a New. vue template and highlight it (Graphic tutorial), sublime. vue

This article describes how to create a Sublime Text. vue template, highlight it (Graphic tutorial), share it with you, and take notes for yourself.

Preparations

1. Download and install the new file template plug-in SublimeTmpl
2. Download and install the vue Syntax highlighting plug-in Vue Syntax Highlight

There are two ways to install the Sublime Text Plugin:

1. Use the Package Control library that comes with Sublime Text to install the Package.

Click Preferences-> Package Control in the menu bar or press CTRL + SHIFT + P to open the terminal window. Enter Install and select Package Control: Install Package to Install

2. Download the package to the Preferences/Browse Packages folder (Preferences/Browse Packages ).

1. SublimeTmpl
2. Vue Syntax Highlight

Create a. vue template and highlight the syntax

After Vue Syntax Highlight is installed, you can Highlight the file in. vue format. Now we can set the shortcut key to directly create a file in. vue format.

SublimeTmpl has only six syntax templates by default:

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

Now we create a new vue format template.

1. Create a vue file template

Open the folder of the plug-in package directlyPreferences -> Browse Packages

Preference-> browsing package

Package folder

Open the templates folder where the template is stored, copy any one, and rename it vue. tmpl

Create vue. tmplvue. tmpl and change the content to the template you want.

Vue. tmpl content

2. Modify the new menu and add the new vue option.

The SublimeTmpl new menu does not have vue by default,

Create-> New File (SublimeTmpl)

Click the Menu option, or choose Preferences> Package Settings> SublimeTmpl> Settings-Menu,

Open menu configuration items

Copy an item and paste it into a vue item,

Add vue item

Save the changes and the vue item appears in the new menu,

Vue entry appears

Click vue to create a new item. The template content is displayed, but the syntax is not highlighted and is in plain text format,

Create a vue File

3. vue syntax highlighting for template binding

Choose Preferences> Package Settings> SublimeTmpl> Settings-Default,

Enable default settings

Copy one item and change it to vue. The path is as follows:

Vue binding syntax

To bind the syntax associated file path, view the directory Sublime Text3 \ Data \ Cache, find the name of the vue highlighted syntax plug-in, and open it,

Sublime Text3 \ Data \ Cache directory

Sublime Text3 \ Data \ Cache \ vue-syntax-highlight

When you create a vue in the menu again, the syntax is highlighted,

Create a vue File

4. Bind the shortcut key for creating a vue File

Choose Preferences> Package Settings> SublimeTmpl> Key Bindings> Default,

Open the shortcut key file

Copy one and paste the shortcut key ctrl + alt + v for creating a new vue,

Create shortcuts

After saving, the menu is created,

File Creation menu

Try, perfect!

Perfect

Last

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands The file seems to be a configuration command, and the configuration method is the same as above ~

Last

In this way, other language templates can also be created by yourself.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.