vscode 开发 uniapp

发表于 分类于 本文字数： 1.6k 阅读时长 ≈ 1 分钟

个人感觉使用 vs code 开发 uniapp 比官方的 HBuilderX 更好用。

安装 vue-cli

若未安装 vue-cli，在已安装 nodejs 的环境下运行

1
npm install -g @vue/cli

创建项目

1
vue create -p dcloudio/uni-preset-vue uniapp-proj

下载完成后让选择模板，正常开发一般选“默认模板”，初次使用可选择“Hello uni-app”体验。

语法提示

在 vscode 中，对 uni-app 的语法提示也可以很友好

vscode 插件

在 vscode 插件市场中安装vetur

组件语法提示

安装

1
npm i @dcloudio/uni-helper-json

HBuilderX 自带的代码块

下载 uni-app 代码块，放入根目录下的.vscode文件夹

运行

可以使用 HBuilderX 打开项目运行，也可以使用命令

1
npm run dev:%PLATFORM%
1
npm run build:%PLATFORM%

$PLATFORM$可见 官网

eslint 语法检查

vs code 插件

vs code 安装插件 ESLint

安装依赖

  1. eslint
  2. babel-eslint
  3. eslint-plugin-vue

使用 prettier

安装 eslint-plugin-prettier

1
npm i eslint-plugin-prettier --save

在 .eslintrc.js 文件内的extends处添加

1
2
3
4
extends: [
  'standard',
  "plugin:prettier/recommended",
],

配置全局变量

在.eslintrc.js 文件的gloabls处加上

1
2
3
4
globals: {
   uni: true,
   plus: true
},

配置文件

最终配置文件.eslintrc.js如

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
module.exports = {
  root: true,
  parserOptions: {
    parser: "babel-eslint",
  },
  env: {
    browser: true,
    es6: true,
  },
  extends: [
    // https://github.com/standard/standard/blob/master/docs/RULES-en.md
    "standard",
    // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
    // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
    "plugin:vue/essential",
    "plugin:prettier/recommended",
  ],
  // required to lint *.vue files
  plugins: ["vue"],
  // add your custom rules here
  rules: {
    "prettier/prettier": "error",
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
  },
};