Let .vue be highlighted in Sublime Text's new template

This time I will bring to you how to highlight .vue in a new Sublime Text template and how to highlight .vue in a new Sublime Text template. What are the precautions?. The following is a practical case. Get up and take a look.

This article introduces Sublime Text’s new .vue template and highlights (picture and text tutorial), share it with everyone, and leave a note for yourself.

Preparation

1. DownloadInstallNew file template plug-in SublimeTmpl

2. Download and install vue syntax highlighting plug-in Vue Syntax Highlight

There are two ways to install plug-ins for Sublime Text:

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

Click Preferences -> Package Control in the menu bar or use the shortcut key CTRL SHIFT P to open a terminal window, enter Install and select Package Control: Install Package to install

2. Download and put it directly into the package directory (Preferences / Browse Packages) Chinese: (Preferences / Package Browser) folder

1. SublimeTmpl

2. Vue Syntax Highlight

Create .vue template and enable syntax highlighting

After installing Vue Syntax Highlight, you can already highlight files in .vue format when you open them. Now let's set up shortcut keys to directly create files in .vue format.

SublimeTmpl has only 6 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

We now add a new template to create vue format

1. Create vue file template

Directly open the folder of the plug-in package Preferences -> Browse Packages

Preferences -> Browse Packages

Package folder

Open the folder templates where the templates are stored, copy any item 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 new vue options

SublimeTmpl's new menu does not have vue by default,

New -> New File (SublimeTmpl)

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

Open menu configuration item

Copy an item, then paste and change it to vue item,

Added vue item

After saving the changes, the vue item

will appear in the new menu. vue item

appears Click on the new vue item in the picture above, and the previously set template content will appear, but there is no syntax highlighting, and it is in plain text format

Create a new vue file

3. Template binding vue syntax highlighting

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

Open the default settings

Copy an item and modify it to vue, the path is as follows

Binding vue syntax

For the binding syntax associated file path, please check the directory Sublime Text3DataCache, find the vue highlighting syntax plug-in name, and open

Sublime Text3DataCache directory

Sublime Text3DataCachevue-syntax-highlight

Create a new vue menu again and the syntax will be highlighted,

Create a new vue file

4. Bind the shortcut key for creating a new vue file

Open Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default,

Open the setting shortcut key file

Copy an item, paste it to create a new vue shortcut key is ctrl alt v,

Create shortcut keys

After saving, the new menu will also be available,

New file menu

Try it, perfect!

at last

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands The file seems to be for configuring commands, and the configuration method is the same as above, just copy the cat and the tiger~

last of the last

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

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

The above is the detailed content of Let .vue be highlighted in Sublime Text's new template. For more information, please follow other related articles on the PHP Chinese website!