前言

創(chuàng)新互聯(lián)長期為上千余家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為菏澤企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)，菏澤網(wǎng)站改版等技術(shù)服務(wù)。擁有十載豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。

本文主要給大家介紹的是關(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標簽
• 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": [
   "",
   "",
   ""
  ],
  "description": "Create vue template"
 }
}

總結(jié)

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