快捷導(dǎo)航

使用vscode 開發(fā)uniapp的方法

更新時(shí)間：2021年08月17日 11:38:38 作者：wallowyou

本文給大家分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動(dòng)格式化問題，對(duì)vscode 開發(fā)uniapp的相關(guān)知識(shí)感興趣的朋友一起看看吧

因?yàn)橹耙恢倍际鞘褂胿scode開發(fā)前端項(xiàng)目，現(xiàn)在有一些小程序或者h(yuǎn)5項(xiàng)目采用uniapp開發(fā)，在體驗(yàn)了一段時(shí)間hbuiler之后，還是覺得vscode香，以下分享我使用vscode開發(fā)的一些配置。其中包括uniapp組件語法提示，uniapp代碼提示，代碼自動(dòng)格式化。

參考文檔: https://ask.dcloud.net.cn/article/id-36286__page-2

1. 安裝vetur

首先我們需要安裝vscode基本的vue插件vetur，在vscode擴(kuò)展程序中即可安裝

2. 安裝eslint

在vscode中安裝eslint擴(kuò)展

3. 配置vscode的setting.json

VSCode進(jìn)行擴(kuò)展設(shè)置，依次點(diǎn)擊文件 > 首選項(xiàng) > 設(shè)置打開 VSCode 配置文件settings.json,添加如下配置

{
   "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
   }
  }

自動(dòng)格式化vue的項(xiàng)目也是如此，以上是部分配置，不要把原有配置刪掉了
注意

不同版本的vscode配置可能有些許區(qū)別，如果哪個(gè)配置有問題，vscode會(huì)有提示

4. 使用vue-cli創(chuàng)建一個(gè)uniapp項(xiàng)目。

需要保證你已經(jīng)全局安裝vue-cli,沒有的話先安裝vue-cli
vue create -p dcloudio/uni-preset-vue my-project

在這里插入圖片描述

我們先選擇默認(rèn)模版（Typescript）當(dāng)然也可以選擇其他模板

安裝完成之后我們用vscode打開剛剛創(chuàng)建的項(xiàng)目。

5. 在項(xiàng)目中安裝組件語法提示

npm i @dcloudio/uni-helper-json,如果你的package.json文件中已經(jīng)安裝了的話就不需要安裝
此時(shí)我們可以看到組件的語法提示

在這里插入圖片描述

6. vscode安裝uniapp-snippet插件

7. 保存自動(dòng)格式化代碼

可以看到此時(shí)頁面中的格式比較混亂，看著很難受，然后保存也并不會(huì)自動(dòng)格式化，所以我們需要給項(xiàng)目添加eslint
vue add eslint
我們選擇最后一個(gè)prettier
安裝完成之后我們可以看到我們的項(xiàng)目多了一些文件，可以自行在.eslintrc.js文件配置規(guī)則

在這里插入圖片描述

我們可以看到一些配置的js文件報(bào)錯(cuò)了，我們?cè)谶@些文件首尾忽略eslint檢查即可
比如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("http://")) {
          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 */

其他配置的js文件也類似操作這樣配置完之后我們保存代碼就會(huì)自動(dòng)格式化了

8. 導(dǎo)入 HBuilderX 自帶的代碼塊

從 github 下載 uni-app 代碼塊，放到項(xiàng)目目錄下的 .vscode 目錄即可擁有和 HBuilderX 一樣的代碼塊。d代碼塊下載地址https://github.com/zhetengbiji/uniapp-snippets-vscode

到此這篇關(guān)于使用vscode 開發(fā)uniapp的方法的文章就介紹到這了,更多相關(guān)vscode 開發(fā)uniapp內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: