當 uni-app 碰見 vscode

uni-app 是一個用 vue 語法來開發小程序、App、H5 的框架，其官方推薦的開發工具爲 HBuilderX，使用起來有很好的開發體驗。

不過，因爲 HBuilderX 沒有 Linux 版以及不少前端以前已經習慣了 vscode，不想更換編輯器。直接使用 vscode 開發 uni-app，其體驗並非很好。

其實 uni-app 和 vscode 也能夠很搭，接下來爲大夥帶來 vscode 中 uni-app 的正確打開姿式。

CLI 工程

全局安裝 vue-cli 3.x（如已安裝請跳過此步驟）

npm install -g @vue/cli
複製代碼

經過 CLI 建立 uni-app 項目

vue create -p dcloudio/uni-preset-vue my-project
複製代碼

此時，會提示選擇項目模板，初次體驗建議選擇 hello uni-app 項目模板，以下所示：

在vscode中打開項目

安裝vue語法提示插件vetur

CLI 工程默認帶了uni-app語法提示和5+App語法提示

安裝組件語法提示

npm i @dcloudio/uni-helper-json
複製代碼

導入 HBuilderX 自帶的代碼塊

從 github 下載 uni-app 代碼塊，放到項目目錄下的 .vscode 目錄便可擁有和 HBuilderX 同樣的代碼塊。

運行項目

npm run dev:%PLATFORM%
複製代碼

發佈項目

npm run build:%PLATFORM%
複製代碼

%PLATFORM% 可取值以下：

值	平臺
h5	H5
mp-alipay	支付寶小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	頭條小程序
mp-qq	qq 小程序

CLI 方式參考文檔

HBuilderX 工程

HBuilderX 建立的工程默認不帶 types 語法提示，在 vscode 中編輯的時候，能夠自行安裝

初始化npm（如已初始化跳過此步驟）

npm init -y
複製代碼

安裝 uni-app 語法提示

npm i @types/uni-app @types/html5plus -D
複製代碼

另外，uni-app 項目下的 manifest.json、pages.json 等文件能夠包含註釋。vscode 裏須要改用 jsonc 編輯器打開。