vue模板配置與webstorm代碼格式規(guī)范設(shè)置的方法教程

本篇內(nèi)容主要講解“vue模板配置與webstorm代碼格式規(guī)范設(shè)置的方法教程”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“vue模板配置與webstorm代碼格式規(guī)范設(shè)置的方法教程”吧!

目錄

• 1、編譯器代碼格式規(guī)范設(shè)置

• 2、vue模板配置

1、編譯器代碼格式規(guī)范設(shè)置

通常我們寫代碼時(shí)，代碼縮進(jìn)都是4個(gè)空格，但是在前端中，據(jù)全球投票統(tǒng)計(jì)，建議使用2個(gè)空格來(lái)進(jìn)行代碼縮進(jìn)。

首先我們打開webstorm中的設(shè)置，如果使用的是mac的同學(xué)直接使用command +  ,快捷方式，來(lái)到Editor-->Code Style-->HTML，將Tab size和Indent的值改為2，同理在JavaScript中也改為2

2、vue模板配置

在我們使用html練習(xí)vue時(shí)，如果我們不想每次都要?jiǎng)?chuàng)建一次vue實(shí)例對(duì)象，那么我們可以在html中配置一個(gè)模板，以后直接使用vue標(biāo)簽，就能直接引入代碼

我們打開webstorm中的設(shè)置，來(lái)到Editor-->Live Templates，選擇vue，點(diǎn)擊右上角的+

選擇Live Template，然后在Abbrevition中寫入vue，在Template text中寫入需要配置的模板文本內(nèi)容即可

最后在當(dāng)前頁(yè)面，有個(gè)!的地方，點(diǎn)擊Define

然后勾選HTML，點(diǎn)擊ok完成

最后實(shí)現(xiàn)的效果，我們?cè)?HTML中直接輸入vue，然后按tab，我們就會(huì)立馬出現(xiàn)剛剛配置好的模板代碼

到此，相信大家對(duì)“vue模板配置與webstorm代碼格式規(guī)范設(shè)置的方法教程”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！