利用vscode編寫vue的簡單配置詳解

更新時間：2017年06月17日 09:13:45 作者：markdown

這篇文章主要給大家介紹了利用vscode編寫vue簡單配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。

前言

本文主要給大家介紹的是關(guān)于vscode編寫vue簡單配置的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細的介紹：

PS:現(xiàn)在推薦使用vetur插件

win10崩潰，重裝win7，結(jié)果sublime text插件無法安裝，各種心塞，于是決定轉(zhuǎn)戰(zhàn)vscode。

與sublime text相比，vscode有不少優(yōu)點：

中文輸入法支持更好。在windows平臺下，需要st支持中文輸入需要安裝各種插件，而且效果也是差強人意。
基礎(chǔ)功能更全面。vscode自帶插件管理、git、sidebar、集成終端、emmet等功能，st每次都需要自己安裝，浪費時間。

但是st插件更豐富，vscode插件相對較少，vue相關(guān)插件vscode更是只有一個，而且使用起來有不少問題，并且作者已經(jīng)很久沒有更新了，折騰了一下午，最終可以用來編寫vue項目了。

vscode關(guān)于vue插件現(xiàn)在只有vscode-vue一個，安裝完成代碼提示并沒有生效，這是因為vue文件的語言模式默認為html，需要在setting.json中設(shè)置：

"files.associations": {
  "*.vue": "vue"
 }

但是此時編寫樣式emmet插件不能正確識別，所以我后來也放棄了這種方式。

仔細思考，編寫vue項目主要需要：

代碼補全&代碼片段
emmet正確生成html標(biāo)簽
emmet正確生成css、scss
代碼高亮

其中2、3、4點，在html中都是可以做到的，而vue的代碼補全與代碼片段只需要自己編寫就可以了，于是我將vue文件的語言模式還原為默認的html，在用戶代碼片段中加入vue文件需要的代碼片段（文件-首選項-用戶代碼片段-html），最終效果還可以。

添加的代碼片段（持續(xù)更新）：

{
 // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and 
 // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
 // $1, $2 for tab stops, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
 // Example:
 "Print to console": {
  "prefix": "log",
  "body": [
   "console.log('$1');",
   "$2"
  ],
  "description": "Log output to console"
 },
 "Create vue template": {
  "prefix": "vuec",
  "body": [
   "<template>",
   "</template>",
   "<script>",
   "export default {",
   " name: \"${1:component_name}\",",
   " data () {",
   " return {",
   " };",
   " }",
   "}",
   "</script>",
   "<style lang=\"${2:css}\" scoped>",
   "</style>"
  ],
  "description": "Create vue template"
 }
}

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: