詳解在WebStorm中添加Vue.js單文件組件的高亮及語(yǔ)法支持
本文介紹了詳解在WebStorm中添加Vue.js單文件組件的高亮及語(yǔ)法支持，分享給大家，具體如下：
一個(gè)小遺憾
能來(lái)看這篇文章的想必不用我來(lái)介紹vue是什么了。先讓我們膜拜大神！vue項(xiàng)目的創(chuàng)建者尤大寫(xiě)了個(gè)sublime下語(yǔ)法高亮的插件，有人問(wèn)他how about webstorm support?他是這么回答的。默哀一分鐘。
添加高亮和語(yǔ)法支持
這個(gè)我是通過(guò)插件來(lái)實(shí)現(xiàn)的。網(wǎng)上目前有兩個(gè)插件：
插件1：https://github.com/henjue/vue-for-idea
插件2：https://github.com/postalservice14/vuejs-plugin
我現(xiàn)在用的是插件1。
它能提供一點(diǎn)的語(yǔ)法和代碼高亮還有一個(gè)文件模板。
就是你在左側(cè)工程欄右鍵新建的時(shí)候會(huì)有vue文件了。
然而他的語(yǔ)法支持實(shí)在有限，你還是別抱太大希望。。一些cmd+點(diǎn)擊的跳轉(zhuǎn)都不能實(shí)現(xiàn)。
我還去設(shè)置內(nèi)添加了額外的幫助：
這是由這個(gè)組織維護(hù)在github上的一個(gè)語(yǔ)法列表，在webstorm上安裝了之后會(huì)有對(duì)應(yīng)的語(yǔ)法提示。進(jìn)入設(shè)置中的這里，點(diǎn)擊右邊的download，就會(huì)出現(xiàn)這個(gè)列表，選擇上面的源，一共有兩個(gè)選項(xiàng)，選擇第二個(gè)，就出現(xiàn)這個(gè)列表了。找到vue，安裝就可以了。
但是感覺(jué)在.vue文件中作用也不是很大。。。
添加ES6支持
首先，你要設(shè)置webstorm自身的JavaScript的版本。如圖：
這里默認(rèn)是ES5.1，把它改成ES6。
然后打開(kāi)設(shè)置：
找到這個(gè)地方，找到上面的html類型，將*.vue添加進(jìn)其中。確定的時(shí)候會(huì)提示被占用了，要把那個(gè)清除掉，繼續(xù)就OK了。
這樣系統(tǒng)會(huì)把.vue文件看成html，也就能正確識(shí)別里面的<script>標(biāo)簽了。
如果你不想這樣做，那也可以。還有一種方法。
直接在<script>標(biāo)簽中添加type="text/ecmascript-6"，這樣也是OK的，里面的代碼也會(huì)高亮并支持ES6。
支持sass
看過(guò)vue-loader文檔的知道，在*.vue模板中是支持幾種css預(yù)處理器和模板語(yǔ)言jade的。
但是當(dāng)你在<style>標(biāo)簽中加上lang=sass然后寫(xiě)sass時(shí)會(huì)發(fā)現(xiàn)IDE一片報(bào)錯(cuò)。。一開(kāi)始我想到的是webstorm的Language Injections，并照著已有的寫(xiě)了一個(gè)：
然而并不能用。。。
去谷歌了下，發(fā)現(xiàn)也有人這么做了，然而也沒(méi)有成功。。至于為什么也沒(méi)搞清楚。。倒是知道了jade是模板語(yǔ)言，不能這么做。
但是sass不應(yīng)該啊。。
然而也不是沒(méi)有收獲。
發(fā)現(xiàn)了<style>標(biāo)簽中有rel="stylesheet/scss"和type="text/css"時(shí)能正確識(shí)別sass語(yǔ)言。如：
<style scoped lang="sass" rel="stylesheet/scss" type="text/css">
同理less也可以。但是需要webstorm版本高于2016.1.1。
關(guān)于jade支持
我還不會(huì)jade模板語(yǔ)言。但是在找sass支持的過(guò)程中發(fā)現(xiàn)有人這么“曲線救國(guó)”的支持了jade：
同時(shí)我也發(fā)現(xiàn)了vue-idea-plugin插件的作者不靠譜的承諾，戳這里，說(shuō)會(huì)支持jade，但是沒(méi)有具體的時(shí)間。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用Vue3實(shí)現(xiàn)一個(gè)穿梭框效果的示例代碼
這篇文章主要給大家介紹了如何使用?Vue3?實(shí)現(xiàn)一個(gè)穿梭框效果,當(dāng)選中數(shù)據(jù),并且點(diǎn)擊相對(duì)應(yīng)的方向箭頭時(shí),選中的數(shù)據(jù)會(huì)發(fā)送到對(duì)面,并且數(shù)據(jù)會(huì)保持正確的順序進(jìn)行排列,文中有詳細(xì)的代碼講解,具有一定的參考價(jià)值,需要的朋友可以參考下2023-12-12
vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題
這篇文章主要介紹了vue template當(dāng)中style背景設(shè)置不編譯問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09
vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡
這篇文章主要為大家介紹了vue利用openlayers實(shí)現(xiàn)動(dòng)態(tài)軌跡，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
VUE:vuex 用戶登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式
今天小編就為大家分享一篇VUE:vuex 用戶登錄信息的數(shù)據(jù)寫(xiě)入與獲取方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue組件之間的參數(shù)傳遞與方法調(diào)用的實(shí)例詳解
這篇文章主要介紹了Vue組件之間的參數(shù)傳遞與方法調(diào)用,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
VUE 無(wú)限層級(jí)樹(shù)形數(shù)據(jù)結(jié)構(gòu)顯示的實(shí)現(xiàn)
在做項(xiàng)目中，會(huì)遇到一些樹(shù)形的數(shù)據(jù)結(jié)構(gòu)，常用在左側(cè)菜單導(dǎo)航，本文就介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下2021-07-07
這篇文章主要介紹了如何給element添加一個(gè)抽屜組件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
vue3中keep-alive和vue-router的結(jié)合使用方式
這篇文章主要介紹了vue3中keep-alive和vue-router的結(jié)合使用方式，?具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3?使用setup語(yǔ)法糖實(shí)現(xiàn)分類管理功能
這篇文章主要介紹了vue3?使用setup語(yǔ)法糖實(shí)現(xiàn)分類管理,本次模塊使用 vue3+element-plus 實(shí)現(xiàn)一個(gè)新聞?wù)镜暮笈_(tái)分類管理模塊，其中新增、編輯采用對(duì)話框方式公用一個(gè)表單，需要的朋友可以參考下2022-08-08