Sublime Text建立.vue模板並高亮(圖文教程)，sublime.vue

Sublime Text建立.vue模板並高亮(圖文教程)，sublime.vue

本文介紹了 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
3. css ctrl+alt+c
4. php ctrl+alt+p
5. 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 Text3\Data\Cache，尋找vue高亮文法外掛程式名，並開啟，

Sublime Text3\Data\Cache目錄

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

再次菜單建立vue就文法高亮了，

建立vue檔案

4、綁定建立vue檔案快速鍵

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

開啟設定快速鍵檔案

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

建立快速鍵

儲存後，菜單建立裡也有了，

建立檔案菜單

試試，完美！

完美

最後

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

最後的最後

通過這種方法，其他的語言模板也可以自己去建立。

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。