How to develop uniapp using vscode

Because I have always used vscode to develop front-end projects, now some small programs or h5 projects are developed using uniapp. After experiencing hbuiler for a period of time, I still think vscode is good. The following shares some configurations I developed using vscode. These include uniapp component syntax prompts, uniapp code prompts, and automatic code formatting.

Reference document: https://ask.dcloud.net.cn/article/id-36286__page-2

1. Install vetur

First we need to install the vscode basic vue plugin vetur , which can be installed in the vscode extension

2. Install eslint

Install eslint extension in vscode

3. Configure vscode's setting.json

VSCode extends the settings, click File > Preferences > Settings to open the VSCode configuration file settings.json and add the following configuration

{
   "files.autoSave": "off",
   "eslint.validate": [
       "javascript",
       "javascriptreact",
       "vue-html",
       {
       "language": "vue",
       "autoFix": true
       }
   ],
   "eslint.run": "onSave",
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
   }
  }

The same is true for automatically formatting Vue projects. The above is part of the configuration. Do not delete the original configuration.
Notice

Different versions of vscode may have slightly different configurations. If there is a problem with any configuration, vscode will prompt you.

4. Create a uniapp project using vue-cli.

You need to make sure you have installed vue-cli globally. If not, install vue-cli first.
vue create -p dcloudio/uni-preset-vue my-project

We first select the default template (Typescript) of course you can also choose other templates

After the installation is complete, we use vscode to open the project we just created.

5. Install component syntax hints in the project

npm i @dcloudio/uni-helper-json , if it is already installed in your package.json file, you don’t need to install it. At this time, we can see the syntax prompt of the component

6. Install uniapp-snippet plugin in vscode

7. Save and automatically format the code

You can see that the format of the page is quite messy at this time, which is uncomfortable to look at, and it will not be automatically formatted when saved, so we need to add eslint to the project
vue add eslint
We choose the last prettier
After the installation is complete, we can see that our project has some more files, and we can configure the rules in the .eslintrc.js file.

We can see that some configured js files report errors. We can ignore eslint checks at the beginning and end of these files, such as postcss.config.js

/* eslint-disable */
const path = require("path");
module.exports = {
  parser: require("postcss-comment"),
  plugins: [
    require("postcss-import")({
      resolve(id, basedir, importOptions) {
        if (id.startsWith("~@/")) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3));
        } else if (id.startsWith("@/")) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2));
        } else if (id.startsWith("/") && !id.startsWith("//")) {
          return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1));
        }
        return id;
      },
    }),
    require("autoprefixer")({
      remove: process.env.UNI_PLATFORM !== "h5",
    }),
    require("@dcloudio/vue-cli-plugin-uni/packages/postcss"),
  ],
};
/* eslint-disable */

The other configured js files are similarly operated. After the configuration is completed, we save the code and it will be automatically formatted.

8. Import the code blocks provided by HBuilderX

Download the uni-app code block from github and put it in the .vscode directory under the project directory to have the same code block as HBuilderX. d Code block download address https://github.com/zhetengbiji/uniapp-snippets-vscode

This is the end of this article about how to use vscode to develop uniapp. For more relevant vscode development uniapp content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!