How to develop uni-app in VSCode? The following article will share with you the tutorial for developing uni-app in VSCode. This may be the best and most detailed tutorial. Come and take a look!

We will use VSCode to write uni-app. Different from Hbuilder X, VSCode is used to create projects through scaffolding. Why Should I use VSCode to write it? Maybe I’m still not used to Hbuilder I won’t go into details here. [Recommended study: "vscode introductory tutorial"]

I have also used VSCode to do several

uni-app projects, mainly writing small programs, overall experience It's still very good to come down.

Briefly describe the experiencethis tutorial can bring to VSCode development uni-app

Enhancement
• pages.jsonandmanifest.jsonDevelopment experience (syntax tips, color blocks, writing comments)
Create pages, components, and subpackages with one click
• Perfect
• API, components, uni.scss syntax prompts
Conditional compilation annotation highlighting

It can be said that VSCode development

The shortcomings of uni-app have basically been solved, and in many places I think the experience is even better.

The article is relatively long and written in detail, so even a novice can understand it.

Initialization project

We use vue2 to create a project as an example. The Vue2 version of uni-app also has many component libraries and plug-ins. It is stable and has few problems. You can refer to the official website first. Document:

Engineering

Since you are using vue scaffolding, you must install it globally

@vue/cli. You can skip the already installed ones.

Note: For projects created by Vue2, the scaffolding version must use the @4 version. If you run the project with the @5 version, an error will be reported. Here is the recommendation @4.5.15

npm install -g @vue/cli

Create a project, followed by your project name.

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

Here we choose

default template.

Open this project in VSCode, you can see the entire project structure, the project structure under

src and the root created by HbuilderX The directories are basically the same, which shows that it is relatively convenient to convert the two projects.

Tips: Since it is a Vue2 project and there are scss files, you must install vetur and sassThese two plug-ins, no one has not installed them yet.

tsconfig.json error reporting problem

When creating the tsconfig.json configuration file, VSCode will automatically detect it Whether there is a ts file in the current project. If not, an error will be reported, prompting the user to create a ts file before using typescript. In fact, even if the red report is reported, there is no problem in running the project, but people with obsessive-compulsive disorder will definitely not be able to stand it, and it is impossible to watch the error report all the time.

The solution is very simple, just create a

ts file in the project root directory without writing anything, and then configure it in tsconfig.json files This is just fine.

We create a new

puppet.ts in the project root directory. Puppet means puppet, haha. You can choose the name here by yourself.

##tsconfig.json：

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

Enhanced pages.json and manifest.json development experience

Write comments on json files

We open

pages.json

and manifest.json and find that it will be reported in red. This is because in json# Comments cannot be written in ##, but comments can be written in jsonc.

Solution

: We associate the two files

pages.json and manifest.json Go to jsonc, and then write comments. Open settings.json in settings and add:

千萬不要把所有json文件都關(guān)聯(lián)到jsonc中，你感覺在json中都能寫注釋了，覺得更好用了，其實(shí)不然，json就是json，jsonc就是jsonc，這兩個是不一樣的，例如，你在package.json寫注釋VSCode是不報錯了，但編譯的時候還是會報錯的，因為package.json就是不能寫注釋的。

語法提示

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

其實(shí)現(xiàn)在VSCode已經(jīng)有第三方插件提供語法提示和簡單的校驗了，體驗也是相當(dāng)?shù)牟诲e。

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

顏色塊顯示

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

當(dāng)然，我們要對這個插件進(jìn)行相關(guān)的配置，以便更好的使用。

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

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

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

條件編譯注釋高亮

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

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

"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項目默認(rèn)是已經(jīng)安裝對應(yīng)的Api語法提示，并且默認(rèn)已經(jīng)在tscongfig.json配置好了，有三個：

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

組件提示

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

npm i @dcloudio/uni-helper-json

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

uni.scss變量提示

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

npm i sass sass-loader@10 -D

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

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

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

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

發(fā)現(xiàn)命令還是比較長的，其實(shí)有更簡便的方式，VSCode支持一鍵運(yùn)行npm腳本，我們以微信小程序為例。

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

需要注意的是，需要在manifest.json配置微信小程序appid，不然微信開發(fā)者工具會報錯。

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

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

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

尤雨溪宣布Vue 3 在 2022 年 2 月 7 日成為新的默認(rèn)版本，但目前uni-app對應(yīng)的Vue3版的組件庫和插件還是有點(diǎn)少了。

使用Vue3創(chuàng)建項目跟Vue2有點(diǎn)區(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)建的項目默認(rèn)不安裝API語法提示依賴，所以要我們手動去安裝一下，然后去tsconfig.json配置一下。

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

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

DCloud插件市場的使用

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

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

插件推薦

然后順手推薦幾個非常實(shí)用的插件，幫助我們提高開發(fā)效率。

• Image preview
• Path Intellisense

鼠標(biāo)懸停可以預(yù)覽圖片。

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

這個插件可以幫助我們配置路徑別名，路徑智能感知。

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

還有兩個是組件庫語法提示、代碼塊的插件，自己根據(jù)需要去安裝，這里就不過多贅述了。

• uniapp小程序擴(kuò)展
• uni-ui-snippets

結(jié)語

我在github倉庫里建了一個模板項目，可以參考一下：uni-vscode-template。

總的來說，配置起來還是比較麻煩的，插件也比較多，但最終獲得體驗也是非常不錯的。

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

或者說，為每個項目單獨(dú)做一個settings.json。

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

作者：小染Jun

更多關(guān)于VSCode的相關(guān)知識，請訪問：vscode教程?。?br>

The above is the detailed content of How to develop uni-app in VSCode? (Tutorial sharing). For more information, please follow other related articles on the PHP Chinese website!