使用VS Code開發微信小程序
微信開發工具
說歸說，但是開發微信小程序的時候，這個微信開發工具還是離不開的。VS Code在我看來就是一個敲代碼的記事本，編譯運行還得靠其他軟件。但它的作用是讓使用者更舒適的編寫代碼，而且插件安裝方便，使用起來還是很香的。
結構
缺點
- 編寫時代碼提示少，很多代碼靠手打
- 代碼沒有相對應的高亮，閱讀難度大
- 代碼編輯區小，視覺體驗不好。裏面的代碼還自動換行，雖然說這是爲了能在編輯區內不用拖動橫向滾動條就能預覽整個頁面的代碼。但這導致一行代碼過多少自動換行後，閱讀性大打折扣，視覺體驗更不好了。給個對比圖感受一下：（資源管理器我都關了）
- 小程序開發工具不支持 less，這與寫樣式的文件wxss同作用，只是後綴不一樣而已。用less寫樣式代碼能使可讀性提高很多。
![]()
![]()
其他缺點暫時沒發現，不過以上四條就是讓我轉向VS Code的主要原因。
VS Code
這個是微軟開發的產品，進微軟官網也能下載，就在Visual Studio下面。
下載地址：https://code.visualstudio.com/
VS Code 下載插件
進入VS Code後，在最右側點擊那個四個方塊構成的圖標，在搜索框輸入名字回車就行。插件沒下載時，在插件右下角都有一個【下載/install】，安裝完成的有一個【設置】圖標。
對於開發小程序來說，前三個已經差不多了。再往下幾個都是在提高編程的舒適度。
Chinese
不用多說，讓英文界面變中文的
小程序開發助手
開發小程序沒它不行。讓vscode 提供對 .wxss .wxml 文件後綴的支持。
Easy less
minapp
支持微信小程序的語法高亮，增加wxml,wxss代碼提示
vscode wxml
支持微信小程序的語法高亮，增加wxml,wxss代碼提示
wechat-snippet
中文亂碼處理
進入設置界面
在搜索框中輸入：Files.autoGuessEncoding。把它打上勾就行
配置Easy less
原生小程序不支持 less，其他基於小程序的框架大體都支持，如 wepy，mpvue，taro等，但是僅僅因爲一個less功能，而去引入一個框架，肯定是不可取的，因此可以用以下方式來實現。
- 編輯器是：VS Code
- 安裝插件：easy less
- 在VS Code的設置中加入如下，配置：
進入設置界面，定價左上角一個類似與文件的圖標，並添加代碼：
"less.compile": {
"outExt": ".wxss"
}
4. 在要編寫樣式的地方，新建 less 文件，如index.less，然後正常編輯即可。
說明
微信開發工具是開發小程序必須的軟件，而VS Code是用來增強編寫代碼體驗的。所以對於開發來說VS Code不安裝也是可以的。我是兩個都用，一個負責預覽，一個負責敲代碼。
開發小程序時。用微信開發工具新建一個小程序，用VS Code的打開文件夾功能，在磁盤中找到剛纔創建的小程序，點擊打開就行。
微信開發工具下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html（下載開發版）
VS Code下載地址：https://code.visualstudio.com/