快捷導(dǎo)航

利用vscode編寫vue的簡(jiǎn)單配置詳解

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

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

前言

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

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

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

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

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

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

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

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

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

仔細(xì)思考，編寫vue項(xiàng)目主要需要：

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

其中2、3、4點(diǎn)，在html中都是可以做到的，而vue的代碼補(bǔ)全與代碼片段只需要自己編寫就可以了，于是我將vue文件的語(yǔ)言模式還原為默認(rèn)的html，在用戶代碼片段中加入vue文件需要的代碼片段（文件-首選項(xiàng)-用戶代碼片段-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é)

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

您可能感興趣的文章: