Shulou(Shulou.com)05/31 Report--

This article mainly introduces "how to develop uni-app in VSCode". In daily operation, I believe many people have doubts about how to develop uni-app in VSCode. Xiaobian consulted various materials and sorted out simple and easy operation methods. I hope to help you answer the doubts about "how to develop uni-app in VSCode"! Next, please follow the small series to learn together!

initialization project

We use vue2 to create projects as an example, uni-app Vue2 version of the component library and plug-ins are also more stable, less problems, you can first refer to the official documentation: engineering

Since you are using vue scaffolding, you must install @vue/cli globally, and you can skip the installed ones.

Note: For the project created by Vue2, the scaffold version should be@4, and the error will be reported when running the project with@5 version.@4.5.15 is recommended here.

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 select the default template.

Open this project in VSCode, you can see the whole project structure, src project structure and HbuilderX root directory created basically the same, indicating that the two projects are relatively convenient conversion.

Tip: Since it is Vue2 project, there is scss file, then it must be installed vetur and sass these two plug-ins, no one has not installed it.

tsconfig.json reported an error

When creating tsconfig.json configuration file, VSCode will automatically detect whether there is a ts file in the current project. If there is no ts file, an error will be reported, prompting the user to create a ts file before using typescript. In fact, even if reported red, but the operation of the project is no problem, but there are obsessive-compulsive disorder must not be able to stand, it is impossible to keep watching the wrong report.

The solution is simple, just create a ts file in the root directory of the project, don't write anything, and then configure files in tsconfig.json.

Let's create a new puppet.ts in the root directory of the project, puppet: puppet means, haha, the name here can be chosen by yourself.

tsconfig.json：

{ "compilerOptions": { "types": ["@dcloudio/types", "miniprogram-api-types", "mini-types"] }, "files": ["puppet.ts"]} enhance pages.json and manifest.json development experience json files write comments

We open pages.json and manifest.json and notice that it will be red-hot because comments cannot be written in json, but they can be written in jsonc.

Solution: Let's associate the pages.json and manifest.json files with jsonc and then comment them. Open settings.json in Settings and add:

Do not associate all json files with jsonc, you feel that you can write comments in json, think it is better to use, in fact, json is json, jsonc is jsonc, these two are not the same, for example, you write comments in package.json VSCode is not wrong, but compilation time will still report errors, because package.json is not able to write comments.

syntax prompt

Many people just started using VSCode to write uni-app, because pages.json did not have any syntax tips, directly persuaded to quit, I was almost persuaded to quit, but after my unremitting efforts, finally solved.

In fact, VSCode now has third-party plug-ins to provide syntax tips and simple verification, and the experience is quite good.

And the mouse hovering there are tips, quite thoughtful.

Color Block Display

VSCode doesn't show color blocks in json files like css, but there's a plugin that can help us do that.

Of course, we need to configure this plug-in for better use.

"color-highlight.enable": true, //Enable plug-in//Color block style, here I choose a color block similar to css in VSCode, just choose your favorite "color-highlight.markerType": "dot-before", //The language in which this plug-in works, here is set to only work in jsonc "color-highlight.languages": ["jsonc"],//Whether to display colors in the scroll bar next to it, personally I don't think it looks good, turn off "color-highlight.markRuler": false,//Whether matching words, such as white, black"color-highlight.matchWords": false, one-click creation of pages, components, subcontracting

Then how to quickly create pages, components, subcontracting, then recommend the following plug-in, support one-click creation, and add to paegs,json.

conditional compilation comment highlight

In Hubilder X conditional comments are highlighted in order to distinguish ordinary comments, in VSCode there are corresponding plug-ins can be implemented, have to say, VSCode ecology is really too good, what plug-ins have.

This plug-in allows us to customize our comments, such as color, bold, italics, how to look how to come.

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

By default, the cli project of uni-app created with Vue2 has installed the corresponding Api syntax prompt, and has been configured in tscongfig.json by default. There are three:

@dcloudio/types, uni syntax tips

miniprogram-api-typings, Weixin Mini Programs (Mini) wx syntax tips

mini-types, Alipay Mini programs my syntax tips

component prompt

Next is the component syntax prompt, such as uni-app native components, this requires us to manually install the corresponding dependency package.

npm i @dcloudio/uni-helper-json

If you don't think it's good enough, you can also install third-party plugins to provide the same code blocks as Hbuilder X. Recommended plugins: uniapp Mini programs extensions, uni-app-snippets

uni.scss variable prompt

Note: UNI-APP projects created by CLI, like web projects, need to install the corresponding Sass module to write SCSS. Install sass-loader, version@10 is recommended, otherwise it may cause compatibility problems between vue and sass and error.

npm i sass sass-loader@10 -D

Install SCSS IntelliSense plug-in to prompt you for variables defined in scss files in your project.

Run and publish projects

The corresponding command is in package.json, which you can check for yourself.

npm run dev:%PLATFORM%

npm run build:%PLATFORM%

It is found that the command is still relatively long. In fact, there is a simpler way. VSCode supports running npm scripts with one button. Let's take Weixin Mini Programs (Mini) as an example.

VSCode differs from Hbuilder x in that VSCode does not automatically import projects and open them in WeChat Developer Tools. We need to import projects manually. We only need to import them once, and then open WeChat Developer Tools directly.

It should be noted that Weixin Mini Programs (Mini) appid needs to be configured in manifest.json, otherwise WeChat developer tools will report errors.

Import the packaged folder in WeChat Developer Tools.

Then you can write code happily. Whether it's running a project, or differential quantization compilation speed is still very fast.

Creating projects with vue3

You Yuxi announced that Vue 3 will become the new default version on February 7,2022, but the component libraries and plug-ins for Vue3 corresponding to uni-app are still a little short.

Using Vue3 to create a project is a bit different from Vue2. Vue3 creates a project using vite. There is one saying that vite is really fast. When initializing the project, I encountered some pits. Here is what I said.

I also got stuck at the beginning, failed to access the repository, the official document also said the solution, looked at it, that is, to update @dcloudio/uvm.

npx @dcloudio/uvm

Then try again and you'll be fine. Here's a javascript template example.

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

There is also a pit, that is, Vue3 creates projects that do not install API syntax prompt dependencies by default, so we have to install them manually, and then go to tsconfig.json to configure them.

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

VSCode has Volar, a plug-in specially created by You Yuxi team for Vue3. When writing Vue3, Volar is used. With Vite, the development experience is really nice. I won't talk too much about it here.

Use of the DCloud Plugin Market

VSCode cannot import plug-ins with one click like Hbuilder X. Generally, projects created with cli need to use plug-ins. Generally, there are two ways. The first one supports npm installation, so it is best to use npm, such as uViewUI. The other one does not support npm installation, so download the corresponding zip package and put it into the project. There are generally two versions of this. We choose non-uni_modules versions, such as uCharts.

This is certainly not as convenient as Hbuilder X, but importing third-party plugins is not something that is often done, and it is acceptable.

Plugin recommendation

Then conveniently recommend a few very useful plug-ins to help us improve development efficiency.

Image preview

Path Intellisense

Mouse over to preview images.

"gutterpreview.showImagePreviewOnGutter": false,//Turn off displaying abbreviated columns in row numbers

This plug-in can help us configure path aliases, path intellisense.

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

There are also two plug-ins that are component library syntax hints and code blocks, which can be installed as needed, so I won't go into too much detail here.

uniapp Mini programs extension

uni-ui-snippets

At this point, the study of "how to develop uni-app in VSCode" is over, hoping to solve everyone's doubts. Theory and practice can better match to help you learn, go and try it! If you want to continue learning more relevant knowledge, please continue to pay attention to the website, Xiaobian will continue to strive to bring more practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.