1. 程式人生 > >如何使用sublime3愉快的編寫vue專案(踩坑總結)

如何使用sublime3愉快的編寫vue專案(踩坑總結)

前段時間開始編寫一個vue專案,因為發現很多人使用sublime編輯器,所以我也選擇使用sublime,但是使用的過程並不順利,出現了一些問題,在網上查了很多資料,自己除錯了很多次總算弄好了,記錄下來希望可以幫到有需要的人。

1.sublime3的下載

sublime3的下載還是比較容易的,直接百度搜索或者在很多軟體庫中都可以下載到。

2.sublime3外掛的安裝

sublime3安裝完成後,我們首先要安裝sublime的外掛管理包,開啟sublime,同時按下ctrl+~,~就是左上角esc下的那個鍵,出現如下頁面,

將下面的程式碼複製後貼上到sublime下面的輸入框中,回車。稍等一會兒,等待其安裝完畢後重啟sublime。

import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

重啟sublime後點擊Preferences出現圖中內容說明安裝成功。這時我們就可以安裝我們編寫程式碼時需要用到的外掛了。

同時按下crtl+shift+p,輸入install,選擇第一個,稍等。

 現在就可以找自己需要的外掛了。

我們需要安裝幾個外掛,如下圖所示(我使用了stylus來編寫頁面樣式)。

切記不可盲目多裝外掛,我就是因為多裝了一個Vue外掛,導致vuecomponent檔案出現了兩種,stylus外掛在vue檔案中無法生效。最後一個是一個格式化外掛,但發現並不好用,問題很多,還是使用vuecli的eslint來格式化程式碼比較方便。

3.sublime的配置

編寫vue程式碼時我們一般要用es6的語法規範來約束程式碼,對程式碼的縮排要求比較嚴格,如果不進行設定,我們編寫的vue程式碼會有很嚴重的縮排問題,經常會混用tab和空格,導致報錯。

點選Preferences,選擇Settings選項。

在右側區域的新增一行,    "translate_tabs_to_spaces": true ,如圖所示。

配置完成後,sublime會將所有的tab縮排轉換為空格縮排,儲存後重啟sublime,現在我們就可以愉快的開始編寫vue程式碼了。