VSCode中如何開發uni-app？（教學分享）

我們將使用VSCode寫uni-app，不同於Hbuilder X，用VSCode是通過腳手架來建立專案，為什麼我要用VSCode寫呢？可能還是不太習慣Hbuilder X等等原因，還有就是不想換開發工具，覺得開發前端一個VSCode就夠了，也不用去比較兩者誰好誰壞，自己喜歡哪個用哪個，這裡就不過多贅述了。【推薦學習：《》】

自己也用VSCode做了幾個uni-app專案了，主要是寫小程式，總體體驗下來還是非常不錯的。

簡述一下這個教學能給VSCode開發 uni-app帶來的體驗

• 增強pages.json和manifest.json開發體驗（語法提示、顏色塊、寫註釋）
• 一鍵建立頁面、元件、分包
• 完善的API，元件，uni.scss語法提示
• 條件編譯註釋高亮

可以說，VSCode開發uni-app的槽點基本上都解決了，有很多地方我覺得體驗還更好。

文章比較長，寫的也比較詳細，小白也能看懂。

初始化專案

我們使用 vue2 建立工程作為範例，uni-app中Vue2版的元件庫和外掛也比較多，穩定、問題少，可以先參考下官方檔案：工程化

既然是使用vue腳手架，那肯定要全域性安裝@vue/cli，已安裝的可以跳過。

注意：Vue2建立的專案，腳手架版本要用@4的版本，用@5的版本執行專案會報錯，這裡推薦 @4.5.15

npm install -g @vue/cli

建立專案，後面是你的專案名字。

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

這裡我們選擇預設模板。

在VSCode開啟這個專案，可以看看整個專案專案結構，src下專案結構跟HbuilderX建立的根目錄基本一樣，說明兩種專案轉換還是比較方便的。

提示：既然是Vue2專案，有scss檔案，那肯定要裝vetur和sass這兩個外掛吧，不會有人還沒有裝吧。

tsconfig.json報錯問題

建立tsconfig.json組態檔時，VSCode會自動檢測當前專案當中是否有ts檔案，若沒有則報錯，提示使用者需要建立一個ts檔案後，再去使用typescript。其實即使報紅，但執行專案是沒有問題的，但有強迫症的人肯定受不了，不可能一直看著報錯吧。

解決方案很簡單，就是在專案根目錄下，隨便建一個ts檔案，不用寫任何東西，然後在tsconfig.json設定 files 這個就好了。

我們在專案根目錄下新建一個puppet.ts，puppet：傀儡的意思，哈哈，這裡名字可以自己隨便起。

tsconfig.json：

{
  "compilerOptions": {
    "types": ["@dcloudio/types", "miniprogram-api-typings", "mini-types"]
  },
  "files": ["puppet.ts"]
}

增強pages.json和manifest.json開發體驗

json檔案寫註釋

我們開啟pages.json和manifest.json，發現會報紅，這是因為在json中是不能寫註釋的，而在jsonc是可以寫註釋的。

解決方案：我們把pages.json和manifest.json這兩個檔案關聯到jsonc中，然後就以寫註釋了。在設定中開啟settings.json，新增：

千萬不要把所有json檔案都關聯到jsonc中，你感覺在json中都能寫註釋了，覺得更好用了，其實不然，json就是json，jsonc就是jsonc，這兩個是不一樣的，例如，你在package.json寫註釋VSCode是不報錯了，但編譯的時候還是會報錯的，因為package.json就是不能寫註釋的。

語法提示

很多人剛開始使用VSCode寫uni-app時，因為pages.json沒有任何語法提示，直接被勸退了，當初我也差點被勸退了，不過經過我的不懈努力，終於解決了。

其實現在VSCode已經有第三方外掛提供語法提示和簡單的校驗了，體驗也是相當的不錯。

而且滑鼠懸浮還有提示，相當的貼心了。

顏色塊顯示

VSCode在json檔案是不顯示像css中一樣的顏色塊，但有個外掛可以幫我們做到。

當然，我們要對這個外掛進行相關的設定，以便更好的使用。

"color-highlight.enable": true, // 開啟外掛
// 顏色塊的樣式，這裡我選擇了跟VSCode中css差不多樣子的顏色塊，自己選擇喜歡的就行
"color-highlight.markerType": "dot-before", 
// 這個外掛起效果的語言，這裡設定只在jsonc起作用
"color-highlight.languages": ["jsonc"],
// 是否在旁邊的滾條顯示顏色，個人覺得不好看，關了
"color-highlight.markRuler": false,
// 是否匹配單詞，如white，black
"color-highlight.matchWords": false,

一鍵建立頁面、元件、分包

然後就是怎麼快速建立頁面、元件、分包，那就要推薦以下這款外掛了，支援一鍵建立，並且新增到paegs,json中。

條件編譯註釋高亮

在Hubilder X條件註釋是有高亮的，以便區分開普通註釋，在VSCode也有對應的外掛可以實現，不得不說，VSCode的生態真的太好了，要啥外掛都有。

這個外掛可以客製化化我們的註釋，比如顏色、加粗、斜體，怎麼好看怎麼來。

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

API，元件，uni.scss語法提示

API語法提示

用Vue2建立的uni-app的cli專案預設是已經安裝對應的Api語法提示，並且預設已經在tscongfig.json設定好了，有三個：

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

元件提示

接下來就是元件語法提示，如<view>、<button>等uni-app原生元件，這個需要我們手動安裝對應的依賴包。

npm i @dcloudio/uni-helper-json

如果你覺得還不夠好用，你還可以安裝第三方外掛來提供和Hbuilder X一樣的程式碼塊，推薦外掛：uniapp小程式擴充套件、uni-app-snippets

uni.scss變數提示

注意：cli建立的uni-app專案，跟web專案一樣，需要安裝對應的sass模組，才能寫scss。安裝sass-loader，建議版本@10，否則可能會導致vue與sass的相容問題而報錯。

npm i sass sass-loader@10 -D

安裝SCSS IntelliSense外掛，就可以提示你專案中scss檔案中定義的變數了。

執行、釋出專案

對應的命令在package.json，中，可以自行檢視。

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

發現命令還是比較長的，其實有更簡便的方式，VSCode支援一鍵執行npm指令碼，我們以微信小程式為例。

VSCode跟Hbuilder x 不同的是，VSCode不會自動在微信開發者工具匯入專案並開啟，我們需要手動匯入專案，只需要匯入一次就行了，以後直接開啟微信開發者工具就行了。

需要注意的是，需要在manifest.json設定微信小程式appid，不然微信開發者工具會報錯。

在微信開發者工具匯入打包出來的資料夾。

然後，就可以愉快的寫程式碼了。不管是執行專案，還是差量化編譯速度還是非常快的。

使用 vue3 建立工程

尤雨溪宣佈Vue 3 在 2022 年 2 月 7 日成為新的預設版本，但目前uni-app對應的Vue3版的元件庫和外掛還是有點少了。

使用Vue3建立專案跟Vue2有點區別，Vue3建立的專案採用的是vite，有一說一，vite是真的快，初始化專案的時候遇到了一些坑，這裡說一下。

我一開始也卡住了，存取倉庫失敗，官方檔案也說了解決方案，看了下，就是去更新下@dcloudio/uvm。

npx @dcloudio/uvm

然後再試一下就沒問題了，這裡以javascript模板為例

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

還有一個坑，就是Vue3建立的專案預設不安裝API語法提示依賴，所以要我們手動去安裝一下，然後去tsconfig.json設定一下。

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

VSCode有尤雨溪團隊專門為Vue3打造的外掛Volar，寫Vue3就用 Volar，再配合Vite，開發體驗真的很nice，這裡就不過多講了。

DCloud外掛市場的使用

VSCode不能像Hbuilder X一樣一鍵匯入外掛，一般用cli建立的專案要使用外掛，一般有兩種方式，第一種是支援npm安裝的，那就用npm最好，如uViewUI，另一種不支援npm安裝的，那就下載對應的zip壓縮包，放到專案中，這種一般會有兩個版本，我們選擇非uni_modules版本，如uCharts。

這點確實沒有Hbuilder X方便，不過匯入第三方外掛這種事情不是經常做，這還是可以接受的。

外掛推薦

然後順手推薦幾個非常實用的外掛，幫助我們提高開發效率。

• Image preview
• Path Intellisense

滑鼠懸停可以預覽圖片。

"gutterpreview.showImagePreviewOnGutter": false,// 關閉在行號中顯示縮列圖

這個外掛可以幫助我們設定路徑別名，路徑智慧感知。

"path-intellisense.mappings": {
    "@": "${workspaceRoot}/src/",
    "static": "${workspaceRoot}/src/static"
 },

還有兩個是元件庫語法提示、程式碼塊的外掛，自己根據需要去安裝，這裡就不過多贅述了。

• uniapp小程式擴充套件
• uni-ui-snippets

結語

我在github倉庫裡建了一個模板專案，可以參考一下：uni-vscode-template。

總的來說，設定起來還是比較麻煩的，外掛也比較多，但最終獲得體驗也是非常不錯的。

因為uni-app專案跟其他前端專案差異較大，我還是比較推薦為uni-app專案單獨做個VSCode工作區。對於VSCode工作區概念，可以看看我的這篇文章：VSCode工作區指南：迴歸輕量，打造全能編輯器。

或者說，為每個專案單獨做一個settings.json。

原文地址：https://juejin.cn/post/7090532271257714695

作者：小染Jun

更多關於VSCode的相關知識，請存取：！！

以上就是VSCode中如何開發uni-app？（教學分享）的詳細內容，更多請關注TW511.COM其它相關文章！