開(kāi)始

我們將使用VSCode寫uni-app，不同于Hbuilder X，用VSCode是通過(guò)腳手架來(lái)創(chuàng)建項(xiàng)目，為什么我要用VSCode寫呢？可能還是不太習(xí)慣Hbuilder X等等原因，還有就是不想換開(kāi)發(fā)工具，覺(jué)得開(kāi)發(fā)前端一個(gè)VSCode就夠了，也不用去比較兩者誰(shuí)好誰(shuí)壞，自己喜歡哪個(gè)用哪個(gè)，這里就不過(guò)多贅述了。

自己也用VSCode做了幾個(gè)uni-app項(xiàng)目了，主要是寫小程序，總體體驗(yàn)下來(lái)還是非常不錯(cuò)的。

簡(jiǎn)述一下這個(gè)教程能給VSCode開(kāi)發(fā) uni-app帶來(lái)的體驗(yàn)

• 增強(qiáng)pages.json和manifest.json開(kāi)發(fā)體驗(yàn)（語(yǔ)法提示、顏色塊、寫注釋）
• 一鍵創(chuàng)建頁(yè)面、組件、分包
• 完善的API，組件，uni.scss 變量提示
• 條件編譯注釋高亮

可以說(shuō)，VSCode開(kāi)發(fā)uni-app的槽點(diǎn)基本上都解決了，有很多地方我覺(jué)得體驗(yàn)還更好。

文章比較長(zhǎng)，寫的也比較詳細(xì)，小白也能看懂。

初始化項(xiàng)目

我們使用 vue2 創(chuàng)建工程作為示例，uni-app中Vue2版的組件庫(kù)和插件也比較多，穩(wěn)定、問(wèn)題少，可以先參考下官方文檔：通過(guò)vue-cli命令行

既然是使用vue腳手架，那肯定要全局安裝@vue/cli，已安裝的可以跳過(guò)。

注意：Vue2創(chuàng)建的項(xiàng)目，腳手架版本要用@4的版本，用@5的版本運(yùn)行項(xiàng)目會(huì)報(bào)錯(cuò)，這里推薦 @4.5.15

npm install -g @vue/[email protected]

創(chuàng)建項(xiàng)目，后面是你的項(xiàng)目名字。

vue create -p dcloudio/uni-preset-vue uni_vue2_cli

這里我們選擇默認(rèn)模板。

在VSCode打開(kāi)這個(gè)項(xiàng)目，可以看看整個(gè)項(xiàng)目項(xiàng)目結(jié)構(gòu)，src下項(xiàng)目結(jié)構(gòu)跟HbuilderX創(chuàng)建的根目錄基本一樣，說(shuō)明兩種項(xiàng)目轉(zhuǎn)換還是比較方便的。

提示：既然是Vue2項(xiàng)目，有scss文件，那肯定要裝vetur和sass這兩個(gè)插件，這不會(huì)有人還沒(méi)有裝吧????。

tsconfig.json報(bào)錯(cuò)問(wèn)題

2022.09 更新： 這個(gè)問(wèn)題之前評(píng)論區(qū)有人提到過(guò)，我好久沒(méi)有去寫博客，這個(gè)博客放了5個(gè)月，收到了非常多的點(diǎn)贊和收藏，感謝支持！ 不過(guò)這個(gè)教程已經(jīng)趕不上變化，對(duì)此我有必要去更新下這個(gè)教程，現(xiàn)在的話，用VSCode開(kāi)發(fā)uni-app的體驗(yàn)比之前更好了。 目前通過(guò)vue-cli命令行創(chuàng)建的項(xiàng)目已經(jīng)不再只是tsconfig.json，只有是使用ts的項(xiàng)目才會(huì)是tsconfig.json，否則會(huì)是jsconfig.json。所以這個(gè)問(wèn)題已經(jīng)不存在了。

增強(qiáng)pages.json和manifest.json開(kāi)發(fā)體驗(yàn)

json文件寫注釋

我們打開(kāi)pages.json和manifest.json，發(fā)現(xiàn)會(huì)報(bào)紅，這是因?yàn)樵?code>json中是不能寫注釋的，而在jsonc是可以寫注釋的。

解決方案：我們把pages.json和manifest.json這兩個(gè)文件關(guān)聯(lián)到jsonc中，然后就以寫注釋了。在設(shè)置中打開(kāi)settings.json，添加：

千萬(wàn)不要把所有json文件都關(guān)聯(lián)到jsonc中，你感覺(jué)在json中都能寫注釋了，覺(jué)得更好用了，其實(shí)不然，json就是json，jsonc就是jsonc，這兩個(gè)是不一樣的，例如，你在package.json寫注釋VSCode是不報(bào)錯(cuò)了，但編譯的時(shí)候還是會(huì)報(bào)錯(cuò)的，因?yàn)?code>package.json就是不能寫注釋的。

語(yǔ)法提示

可以為pages.json、manifest.json等提供語(yǔ)法提示和校驗(yàn)工作。如果不使用這個(gè)插件，體驗(yàn)會(huì)大大折扣，這也是我認(rèn)為使用vscode開(kāi)發(fā)uni-app必裝的一個(gè)插件。

而且鼠標(biāo)懸浮還有提示，相當(dāng)?shù)馁N心了。

內(nèi)聯(lián)顏色修飾器

2022.09 更新： 我偶然發(fā)現(xiàn)在json文件中是可以顯示VSCode內(nèi)置的內(nèi)聯(lián)顏色修飾器，然后給插件的作者提了個(gè) issue，目前uni-app-schemas已經(jīng)可以在pages.json等json支持顯示內(nèi)聯(lián)顏色修飾器和顏色選取器了！ 也歡迎各位大佬一起去改進(jìn)??????Github：uni-helper，這個(gè)作者開(kāi)發(fā)過(guò)很多和uni-app相關(guān)的包和vscode插件。 之前我是推薦使用Color Highlight這個(gè)插件進(jìn)行輔助使用，現(xiàn)在已經(jīng)不需要了，VSCode內(nèi)置的顏色修飾器顯然有著更好的體驗(yàn)。

路徑提示

安裝這個(gè)插件，這個(gè)我感覺(jué)比VSCode自帶要好用些。不使用的話，不能在pages.json等json文件中進(jìn)行路徑提示

如果使用這個(gè)插件的話，建議關(guān)掉VSCode默認(rèn)的自動(dòng)完成

"typescript.suggest.paths": false
"javascript.suggest.paths": false

并且在tsconfig.jsonorjsconfig.json為項(xiàng)目配置根路徑和路徑別名，這也是讓VScode知道路徑別名，可以進(jìn)行跳轉(zhuǎn)。當(dāng)然你也可以使用插件的全局配置path-intellisense.mappings，使用其中一個(gè)就行，建議tsconfig.json。

jsconfig.json文件

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  }
}

然后再順手推薦一個(gè)超實(shí)用的插件Image preview：鼠標(biāo)懸?？梢灶A(yù)覽圖片。

"gutterpreview.showImagePreviewOnGutter": false,// 關(guān)閉在行號(hào)中顯示縮列圖

最終到達(dá)的效果

一鍵創(chuàng)建頁(yè)面、組件、分包

然后就是怎么快速創(chuàng)建頁(yè)面、組件、分包，那就要推薦以下這款插件了，支持一鍵創(chuàng)建，并且添加到paegs,json中。

條件編譯注釋高亮

在Hubilder X條件注釋是有高亮的，以便區(qū)分開(kāi)普通注釋，在VSCode也有對(duì)應(yīng)的插件可以實(shí)現(xiàn)，不得不說(shuō)，VSCode的生態(tài)真的太好了，要啥插件都有。

2022.09 更新： 注意：目前，在volar下，該插件會(huì)無(wú)效，希望后期會(huì)修復(fù)這個(gè)問(wèn)題。

這個(gè)插件可以定制化我們的注釋，比如顏色、加粗、斜體，怎么好看怎么來(lái)。

"better-comments.tags":[
  {
    "tag": "#",
    "color": "#18b566",
    "strikethrough": false,
    "underline": false,
    "backgroundColor": "transparent",
    "bold": true,
    "italic": false
   },
]

API，組件，uni.scss語(yǔ)法提示

API語(yǔ)法提示

用Vue2創(chuàng)建的uni-app的cli項(xiàng)目默認(rèn)是已經(jīng)安裝對(duì)應(yīng)的Api語(yǔ)法提示，并且默認(rèn)已經(jīng)在tscongfig.jsonorjsconfig.json配置好了，有三個(gè)：

• @dcloudio/types，uni語(yǔ)法提示
• miniprogram-api-typings，微信小程序wx語(yǔ)法提示
• mini-types，支付寶小程序my語(yǔ)法提示

組件提示

接下來(lái)就是組件語(yǔ)法提示，如view、button等uni-app原生組件，這個(gè)需要我們手動(dòng)安裝對(duì)應(yīng)的依賴包。

npm i @dcloudio/uni-helper-json

2022.09 更新： 如果是使用的vue3，可以使用uni-app-types這個(gè)包，因?yàn)锧dcloudio/uni-helper-json不支持vue3。

npm i -D uni-app-types

然后在tsconfig.jsonorjsconfig.json配置compilerOptions.types和vueCompilerOptions，確保include 包含了對(duì)應(yīng)的 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等。

還有其他的，可以去這個(gè)uni-helper看看。

如果你覺(jué)得還不夠好用，你還可以安裝第三方插件來(lái)提供和Hbuilder X一樣的代碼塊，推薦插件：uni-app-snippets、uniapp小程序擴(kuò)展。

uni.scss變量提示

注意：cli創(chuàng)建的uni-app項(xiàng)目，跟web項(xiàng)目一樣，需要安裝對(duì)應(yīng)的sass模塊，才能寫scss。安裝sass-loader，建議版本@10，否則可能會(huì)導(dǎo)致vue與sass的兼容問(wèn)題而報(bào)錯(cuò)。

npm i sass sass-loader@10 -D

安裝SCSS IntelliSense插件，就可以提示你項(xiàng)目中scss文件中定義的變量了。

運(yùn)行、發(fā)布項(xiàng)目

對(duì)應(yīng)的命令在package.json，中，可以自行查看。

• npm run dev:%PLATFORM%
• npm run build:%PLATFORM%

比如：運(yùn)行至微信小程序的命令：npm run dev:mp-weixin

發(fā)現(xiàn)命令還是比較長(zhǎng)的，其實(shí)有更簡(jiǎn)便的方式，VSCode支持一鍵運(yùn)行npm腳本，我們以微信小程序?yàn)槔?/p>

VSCode跟Hbuilder x 不同的是，VSCode不會(huì)自動(dòng)在微信開(kāi)發(fā)者工具導(dǎo)入項(xiàng)目并打開(kāi)，我們需要手動(dòng)導(dǎo)入項(xiàng)目，只需要導(dǎo)入一次就行了，以后直接打開(kāi)微信開(kāi)發(fā)者工具就行了。

需要注意的是，需要在manifest.json配置微信小程序appid，不然微信開(kāi)發(fā)者工具會(huì)報(bào)錯(cuò)。

在微信開(kāi)發(fā)者工具導(dǎo)入打包出來(lái)的文件夾。

然后，就可以愉快的寫代碼了。不管是運(yùn)行項(xiàng)目，還是差量化編譯速度還是非?？斓摹?/p>

使用 vue3 創(chuàng)建工程

尤雨溪宣布Vue 3 在 2022 年 2 月 7 日成為新的默認(rèn)版本，但目前uni-app對(duì)應(yīng)的Vue3的組件庫(kù)和插件太少了，生態(tài)還不成熟。容易遇到問(wèn)題，不太推薦直接拿去做業(yè)務(wù)。

使用Vue3創(chuàng)建項(xiàng)目跟Vue2有點(diǎn)區(qū)別，Vue3創(chuàng)建的項(xiàng)目采用的是vite，有一說(shuō)一，vite是確實(shí)快，初始化項(xiàng)目的時(shí)候遇到了一些坑，這里說(shuō)一下。

我一開(kāi)始也卡住了，訪問(wèn)倉(cāng)庫(kù)失敗，官方文檔也說(shuō)了解決方案，看了下，就是去更新下@dcloudio/uvm。

npx @dcloudio/uvm

然后再試一下就沒(méi)問(wèn)題了，這里以javascript模板為例

npx degit dcloudio/uni-preset-vue#vite uni_vue3_cli

還有一個(gè)坑，就是Vue3創(chuàng)建的項(xiàng)目默認(rèn)不安裝API語(yǔ)法提示依賴，所以要我們手動(dòng)去安裝一下，然后去tsconfig.json配置一下。

npm i @dcloudio/types miniprogram-api-typings mini-types -D

VSCode有尤雨溪團(tuán)隊(duì)專門為Vue3打造的插件Volar，寫Vue3就用 Volar，再配合Vite，開(kāi)發(fā)體驗(yàn)真的很nice，這里就不過(guò)多講了。

DCloud插件市場(chǎng)的使用

VSCode不能像Hbuilder X一樣一鍵導(dǎo)入插件，一般用cli創(chuàng)建的項(xiàng)目要使用插件，一般有兩種方式，第一種是支持npm安裝的，那就用npm最好，如uViewUI，另一種不支持npm安裝的，那就下載對(duì)應(yīng)的zip壓縮包，放到項(xiàng)目中，這種一般會(huì)有兩個(gè)版本，我們選擇非uni_modules版本，如uCharts。

這點(diǎn)確實(shí)沒(méi)有Hbuilder X方便，不過(guò)導(dǎo)入第三方插件這種事情不是經(jīng)常做，這還是可以接受的。

結(jié)語(yǔ)

2022.09 更新： 目前，倉(cāng)庫(kù)已經(jīng)同步uni-app官方最新cli模板，另外我還上傳了vue3+vite+ts的版本，可當(dāng)做示例來(lái)供來(lái)學(xué)習(xí)參考。

??????Github倉(cāng)庫(kù)地址：uni-vscode-template。

總的來(lái)說(shuō)，配置起來(lái)還是比較麻煩的，插件也比較多，但最終獲得體驗(yàn)也是非常不錯(cuò)的。

因?yàn)?code>uni-app項(xiàng)目跟其他前端項(xiàng)目差異較大，我還是比較推薦為uni-app項(xiàng)目單獨(dú)做個(gè)VSCode工作區(qū)。對(duì)于VSCode工作區(qū)概念，可以看看我的這篇文章：VSCode工作區(qū)指南：回歸輕量，打造全能編輯器。

或者說(shuō)，為每個(gè)項(xiàng)目單獨(dú)做一個(gè)settings.json。

感謝讀完本篇文章，希望對(duì)你能有所幫助，如有問(wèn)題或有自己實(shí)用的技巧歡迎在評(píng)論區(qū)分享和討論。

創(chuàng)作不易，希望可以點(diǎn)個(gè)贊支持一下????。