開始
我們將使用VSCode寫uni-app，不同于Hbuilder X，用VSCode是通過腳手架來創(chuàng)建項目，為什么我要用VSCode寫呢？可能還是不太習慣Hbuilder X等等原因，還有就是不想換開發(fā)工具，覺得開發(fā)前端一個VSCode就夠了，也不用去比較兩者誰好誰壞，自己喜歡哪個用哪個，這里就不過多贅述了。
自己也用VSCode做了幾個uni-app項目了，主要是寫小程序，總體體驗下來還是非常不錯的。
簡述一下這個教程能給VSCode開發(fā)?uni-app帶來的體驗
- 增強
pages.json和manifest.json開發(fā)體驗（語法提示、顏色塊、寫注釋） - 一鍵創(chuàng)建頁面、組件、分包
- 完善的
API，組件，uni.scss 變量提示 - 條件編譯注釋高亮
可以說，VSCode開發(fā)uni-app的槽點基本上都解決了，有很多地方我覺得體驗還更好。
文章比較長，寫的也比較詳細，小白也能看懂。
初始化項目
我們使用 vue2 創(chuàng)建工程作為示例，uni-app中Vue2版的組件庫和插件也比較多，穩(wěn)定、問題少，可以先參考下官方文檔：通過vue-cli命令行
既然是使用vue腳手架，那肯定要全局安裝@vue/cli，已安裝的可以跳過。
注意：Vue2創(chuàng)建的項目，腳手架版本要用@4的版本，用@5的版本運行項目會報錯，這里推薦?@4.5.15
npm install -g @vue/cli@4.5.15
復制代碼創(chuàng)建項目，后面是你的項目名字。
vue create -p dcloudio/uni-preset-vue uni_vue2_cli
復制代碼這里我們選擇默認模板。
在VSCode打開這個項目，可以看看整個項目項目結構，src下項目結構跟HbuilderX創(chuàng)建的根目錄基本一樣，說明兩種項目轉換還是比較方便的。
提示：既然是Vue2項目，有
scss文件，那肯定要裝vetur和sass這兩個插件，這不會有人還沒有裝吧????。
tsconfig.json報錯問題
2022.09 更新：
這個問題之前評論區(qū)有人提到過，我好久沒有去寫博客，這個博客放了5個月，收到了非常多的點贊和收藏，感謝支持！
不過這個教程已經(jīng)趕不上變化，對此我有必要去更新下這個教程，現(xiàn)在的話，用VSCode開發(fā)uni-app的體驗比之前更好了。
目前通過vue-cli命令行創(chuàng)建的項目已經(jīng)不再只是
tsconfig.json，只有是使用ts的項目才會是tsconfig.json，否則會是jsconfig.json。所以這個問題已經(jīng)不存在了。
增強pages.json和manifest.json開發(fā)體驗
json文件寫注釋
我們打開pages.json和manifest.json，發(fā)現(xiàn)會報紅，這是因為在json中是不能寫注釋的，而在jsonc是可以寫注釋的。
解決方案：我們把pages.json和manifest.json這兩個文件關聯(lián)到jsonc中，然后就以寫注釋了。在設置中打開settings.json，添加：
千萬不要把所有json文件都關聯(lián)到jsonc中，你感覺在json中都能寫注釋了，覺得更好用了，其實不然，json就是json，jsonc就是jsonc，這兩個是不一樣的，例如，你在package.json寫注釋VSCode是不報錯了，但編譯的時候還是會報錯的，因為package.json就是不能寫注釋的。
語法提示
可以為pages.json、manifest.json等提供語法提示和校驗工作。如果不使用這個插件，體驗會大大折扣，這也是我認為使用vscode開發(fā)uni-app必裝的一個插件。
而且鼠標懸浮還有提示，相當?shù)馁N心了。
內聯(lián)顏色修飾器
2022.09 更新：
我偶然發(fā)現(xiàn)在
json文件中是可以顯示VSCode內置的內聯(lián)顏色修飾器，然后給插件的作者提了個issue，目前
uni-app-schemas已經(jīng)可以在pages.json等json支持顯示內聯(lián)顏色修飾器和顏色選取器了！也歡迎各位大佬一起去改進??????Github：uni-helper，這個作者開發(fā)過很多和
uni-app相關的包和vscode插件。之前我是推薦使用
Color Highlight這個插件進行輔助使用，現(xiàn)在已經(jīng)不需要了，VSCode內置的顏色修飾器顯然有著更好的體驗。
路徑提示
安裝這個插件，這個我感覺比VSCode自帶要好用些。不使用的話，不能在pages.json等json文件中進行路徑提示
如果使用這個插件的話，建議關掉VSCode默認的自動完成
"typescript.suggest.paths": false
"javascript.suggest.paths": false
復制代碼并且在tsconfig.jsonorjsconfig.json為項目配置根路徑和路徑別名，這也是讓VScode知道路徑別名，可以進行跳轉。當然你也可以使用插件的全局配置path-intellisense.mappings，使用其中一個就行，建議tsconfig.json。
jsconfig.json文件
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
}
}
復制代碼然后再順手推薦一個超實用的插件Image preview：鼠標懸?？梢灶A覽圖片。
"gutterpreview.showImagePreviewOnGutter": false,// 關閉在行號中顯示縮列圖
復制代碼最終到達的效果
一鍵創(chuàng)建頁面、組件、分包
然后就是怎么快速創(chuàng)建頁面、組件、分包，那就要推薦以下這款插件了，支持一鍵創(chuàng)建，并且添加到paegs,json中。
條件編譯注釋高亮
在Hubilder X條件注釋是有高亮的，以便區(qū)分開普通注釋，在VSCode也有對應的插件可以實現(xiàn)，不得不說，VSCode的生態(tài)真的太好了，要啥插件都有。
2022.09 更新：
注意：目前，在
volar下，該插件會無效，希望后期會修復這個問題。
這個插件可以定制化我們的注釋，比如顏色、加粗、斜體，怎么好看怎么來。
"better-comments.tags":[
{
"tag": "#",
"color": "#18b566",
"strikethrough": false,
"underline": false,
"backgroundColor": "transparent",
"bold": true,
"italic": false
},
]
復制代碼API，組件，uni.scss語法提示
API語法提示
用Vue2創(chuàng)建的uni-app的cli項目默認是已經(jīng)安裝對應的Api語法提示，并且默認已經(jīng)在tscongfig.jsonorjsconfig.json配置好了，有三個：
-
@dcloudio/types，
uni語法提示 -
miniprogram-api-typings，微信小程序
wx語法提示 -
mini-types，支付寶小程序
my語法提示
組件提示
接下來就是組件語法提示，如<view>、<button>等uni-app原生組件，這個需要我們手動安裝對應的依賴包。
npm i @dcloudio/uni-helper-json
復制代碼2022.09 更新：
如果是使用的
vue3，可以使用uni-app-types這個包，因為@dcloudio/uni-helper-json不支持vue3。
npm i -D uni-app-types
復制代碼然后在tsconfig.jsonorjsconfig.json配置compilerOptions.types和vueCompilerOptions，確保include?包含了對應的?vue?文件。
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
"types": ["@dcloudio/types", "uni-app-types"]
},
"vueCompilerOptions": {
"experimentalRuntimeMode": "runtime-uni-app"
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}
復制代碼如果你要使用uniCloud、uni-ui等，可以安裝uni-cloud-types、uni-ui-types等。
還有其他的，可以去這個uni-helper看看。
如果你覺得還不夠好用，你還可以安裝第三方插件來提供和Hbuilder X一樣的代碼塊，推薦插件：uni-app-snippets、uniapp小程序擴展。
uni.scss變量提示
注意：cli創(chuàng)建的uni-app項目，跟web項目一樣，需要安裝對應的sass模塊，才能寫scss。安裝sass-loader，建議版本@10，否則可能會導致vue與sass的兼容問題而報錯。
npm i sass sass-loader@10 -D
復制代碼安裝SCSS IntelliSense插件，就可以提示你項目中scss文件中定義的變量了。
運行、發(fā)布項目
對應的命令在package.json，中，可以自行查看。
- npm run dev:%PLATFORM%
- npm run build:%PLATFORM%
比如：運行至微信小程序的命令：npm run dev:mp-weixin
發(fā)現(xiàn)命令還是比較長的，其實有更簡便的方式，VSCode支持一鍵運行npm腳本，我們以微信小程序為例。
VSCode跟Hbuilder x?不同的是，VSCode不會自動在微信開發(fā)者工具導入項目并打開，我們需要手動導入項目，只需要導入一次就行了，以后直接打開微信開發(fā)者工具就行了。
需要注意的是，需要在manifest.json配置微信小程序appid，不然微信開發(fā)者工具會報錯。
在微信開發(fā)者工具導入打包出來的文件夾。
然后，就可以愉快的寫代碼了。不管是運行項目，還是差量化編譯速度還是非?？斓?。
使用 vue3 創(chuàng)建工程
尤雨溪宣布Vue 3 在?2022 年 2 月 7 日成為新的默認版本，但目前uni-app對應的Vue3的組件庫和插件太少了，生態(tài)還不成熟。容易遇到問題，不太推薦直接拿去做業(yè)務。
使用Vue3創(chuàng)建項目跟Vue2有點區(qū)別，Vue3創(chuàng)建的項目采用的是vite，有一說一，vite是確實快，初始化項目的時候遇到了一些坑，這里說一下。
我一開始也卡住了，訪問倉庫失敗，官方文檔也說了解決方案，看了下，就是去更新下@dcloudio/uvm。
npx @dcloudio/uvm
復制代碼然后再試一下就沒問題了，這里以javascript模板為例
npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli
復制代碼還有一個坑，就是Vue3創(chuàng)建的項目默認不安裝API語法提示依賴，所以要我們手動去安裝一下，然后去tsconfig.json配置一下。
npm i @dcloudio/types miniprogram-api-typings mini-types -D
復制代碼VSCode有尤雨溪團隊專門為Vue3打造的插件Volar，寫Vue3就用?Volar，再配合Vite，開發(fā)體驗真的很nice，這里就不過多講了。
DCloud插件市場的使用
VSCode不能像Hbuilder X一樣一鍵導入插件，一般用cli創(chuàng)建的項目要使用插件，一般有兩種方式，第一種是支持npm安裝的，那就用npm最好，如uViewUI，另一種不支持npm安裝的，那就下載對應的zip壓縮包，放到項目中，這種一般會有兩個版本，我們選擇非uni_modules版本，如uCharts。
這點確實沒有Hbuilder X方便，不過導入第三方插件這種事情不是經(jīng)常做，這還是可以接受的。
結語
2022.09 更新：
目前，倉庫已經(jīng)同步uni-app官方最新cli模板，另外我還上傳了vue3+vite+ts的版本，可當做示例來供來學習參考。
??????Github倉庫地址：uni-vscode-template。
總的來說，配置起來還是比較麻煩的，插件也比較多，但最終獲得體驗也是非常不錯的。
因為uni-app項目跟其他前端項目差異較大，我還是比較推薦為uni-app項目單獨做個VSCode工作區(qū)。對于VSCode工作區(qū)概念，可以看看我的這篇文章：VSCode工作區(qū)指南：回歸輕量，打造全能編輯器。
或者說，為每個項目單獨做一個settings.json。
感謝讀完本篇文章，希望對你能有所幫助，如有問題或有自己實用的技巧歡迎在評論區(qū)分享和討論。文章來源：http://www.zghlxwxcb.cn/news/detail-431794.html
創(chuàng)作不易，希望可以點個贊支持一下????。文章來源地址http://www.zghlxwxcb.cn/news/detail-431794.html
到了這里，關于這可能是最好、最詳細的VSCode開發(fā)uni-app教程吧的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
