先祝大家新年快樂(lè) 。 感謝醫(yī)療前線同志??！

響應(yīng)號(hào)召蹲在家里，更新一篇webstorm使用技巧

在使用微信開(kāi)發(fā)者工具寫(xiě)小程序的時(shí)候感覺(jué)很煩，因?yàn)槌Ｄ晔褂脀ebstorm所以這里記錄一下配置webstorm的過(guò)程

• 解決webstorm 里 wxml，wxss的報(bào)錯(cuò)問(wèn)題
• webstorm內(nèi)的代碼提示
• 微信小程序使用scss問(wèn)題

以下的截圖是本人計(jì)算機(jī)的，webstorm版本 2019.3

Wxapp Support

首先我是使用了Wxapp Support這個(gè)插件，這個(gè)是現(xiàn)在比較好用的一款插件，它可以在webstorm里進(jìn)行小程序代碼提示，并且映射代碼格式化樣式

插件

sass

使用sass預(yù)編譯

• 微信的wxss 是和css基本一致的，但是對(duì)于一值使用css預(yù)編譯的人來(lái)說(shuō)很不方便，所以想在wxss里使用sass編譯
• 使用sass會(huì)遇到問(wèn)題：比如在.scss文件里進(jìn)行代碼格式化的時(shí)候，如果.scss里有rpx的話，rpx前面會(huì)被格式化出一個(gè)空格導(dǎo)致文件報(bào)錯(cuò)，
  而且我的tab補(bǔ)全功能預(yù)設(shè)是補(bǔ)全px，所以我使用了webstorm 的File Watchers自動(dòng)進(jìn)行更改wxss，把px轉(zhuǎn)化成rpx
• 可以在.scss文件里正常書(shū)寫(xiě)px

首先配置File Watchers的scssWatchers

Watchers scss

'Arguments': $FileName$:$FileNameWithoutExtension$.wxss --no-cache  --sourcemap=none  --style expanded
 'Output paths to refresh': $FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map

下面配置File Watchers的px轉(zhuǎn)化為rpx的Watchers

scss px to rpx

配置這一項(xiàng)使用正則替換成rpx

'Arguments':   -i  ""  s/\([1234567890]\)px/\1rpx/g  $FilePath$

目錄結(jié)構(gòu)就變成了下圖這樣，多寫(xiě)一個(gè).scss文件，然后wxss由sass服務(wù)生成

目錄結(jié)構(gòu)

這樣就可以開(kāi)始寫(xiě)微信小程序了。

比使用微信開(kāi)發(fā)者工具的效率提高了很多。