讓.vue在Sublime Text新建範本內高亮

這次帶給大家讓.vue在Sublime Text新建模板內高亮，讓.vue在Sublime Text新建模板內高亮的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文介紹了 Sublime Text新建.vue範本並高亮(圖文教學)，分享給大家，也給自己留個筆記。

準備工作

1. # 下載安裝新檔案範本外掛程式 SublimeTmpl

2. #下載安裝vue語法高亮外掛程式 Vue Syntax Highlight

# Sublime Text安裝外掛的方法有兩種：

# 1.使用Sublime Text自備的安裝庫 Package Control 去安裝

點擊選單列的 Preferences -> Package Control 或使用快捷鍵 CTRL SHIFT P 打開終端窗口，輸入Install選擇Package Control: Install Package來安裝

2、下載直接放入套件目錄 (Preferences / Browse Packages) 中文:(首選項 / 套件瀏覽器) 資料夾裡面

1. SublimeTmpl

2. Vue Syntax Highlight

建立.vue模板並讓語法高亮

安裝完Vue Syntax Highlight之後，你開啟.vue格式的檔案就已經可以高亮了，我們現在來設定用快捷鍵直接建立.vue格式的檔案。

SublimeTmpl 預設只有6種語法模板：

1. # html ctrl alt h

2. javascript ctrl alt j

##css ctrl alt c
#php ctrl alt p
ruby ctrl alt r
6. #python ctrl alt shift p

#

我們現在新增建立 vue 格式的範本

1、建立vue檔案範本

直接開啟外掛程式包的資料夾

Preferences -> Browse Packages

# 首選項 -> 瀏覽套件

套件資料夾

開啟存放模板的資料夾 templates，隨便複製一項，改名為vue.tmpl

# 創建vue.tmplvue.tmpl內容改為你想要的模板

# vue.tmpl內容

2、修改新選單，增加新vue選項

# SublimeTmpl新建選單預設是沒有vue的，

新建 -> New File (SublimeTmpl)

# 點擊 Menu 選項，或開啟 Preferences -> Package Settings -> SublimeTmpl -> Settings - Menu，

# 開啟選單配置項目

複製一項，然後貼上修改為 vue 項，

新增vue項目

儲存修改，就會在新功能表裡面出現vue項目

出現vue項

點選上圖vue新建項，就會出現先前設定的範本內容，只不過沒有語法高亮，並且是純文字格式

新建vue檔案

3、模板綁定vue語法高亮

# 開啟 Preferences -> Package Settings -> SublimeTmpl -> Settings - Default，

# 開啟預設設定項

複製一項並修改為vue，路徑如下

#

綁定vue語法

綁定語法關聯檔路徑請查看目錄 Sublime Text3DataCache，尋找vue高亮語法外掛名，並開啟

Sublime Text3DataCache目錄

#

Sublime Text3DataCachevue-syntax-highlight

# 再次選單新建vue就語法高亮了，

#

新建vue檔案

4、綁定新vue檔案快速鍵

開啟 Preferences -> Package Settings -> SublimeTmpl -> Key Bindings - Default，

開啟設定快捷鍵檔案

複製一項，貼上建立新vue快速鍵為 ctrl alt v，

建立快捷鍵

儲存後，選單新建裡也有了，

# 新建檔案選單

試試，完美！

最後

Preferences -> Package Settings -> SublimeTmpl -> Settings - Commands 檔案好像是設定指令的，設定方法也跟上面相同，照貓咪畫虎即可~

# 最後的最後

# 透過這種方法，其他的語言模板也可以自己創建。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

#

以上是讓.vue在Sublime Text新建範本內高亮的詳細內容。更多資訊請關注PHP中文網其他相關文章！