语法高亮和检查

编辑器配置

提示

推荐使用VSCode语法高亮和检查 - 图1开发小程序，提高开发体验和效率💯

VSCode 配置

使用 wxa语法高亮和检查 - 图2 插件实现 .wxa 文件语法高亮~

  1. 在应用商店搜索 wxa 并安装。
  2. MacOS: command + shift + p 或 Windows: ctrl + shift + p，设置 .wxa 文件关联语言模式 wxa即可。

打开项目的.vsode/settings.json，添加以下配置：

  1. {
  2.     "javascript.implicitProjectConfig.experimentalDecorators": true,
  3.     "eslint.enable": true
  4. }

提示

wxa 拓展是从 vetur语法高亮和检查 - 图3 fork 而来，专门对小程序语法和 wxa 文件做了修改。

WebStorm 配置

  1. 打开WebStorm偏好设置 Windows and Linux: File -> Settings或macOS: WebStorm -> Preferences
  2. 点击 File Types Editor -> File Types，找到 Vue.js Template，在registered Patterns中添加*.wxa

Eslint代码校验

使用eslint校验代码，在开发阶段就解决弱*问题

  1. {
  2.     "extends": [
  3.         "google"
  4.     ],
  5.     "root": true,
  6.     "env": {
  7.         "commonjs": true,
  8.         "es6": true,
  9.         "node": true
  10.     },
  11.     "parser": "vue-eslint-parser",
  12.     "parserOptions": {
  13.         "parser": "babel-eslint",
  14.         "ecmaFeatures": {
  15.             "experimentalObjectRestSpread": true
  16.         },
  17.         "ecmaVersion": 2017,
  18.         "sourceType": "module"
  19.     },
  20.     "rules": {
  21.         "vue/valid-template-root": "off",
  22.         "no-const-assign": "warn",
  23.         "valid-template-root": "off",
  24.         "no-this-before-super": "warn",
  25.         "no-undef": "warn",
  26.         "no-unreachable": "warn",
  27.         "no-unused-vars": "warn",
  28.         "constructor-super": "warn",
  29.         "valid-typeof": "warn",
  30.         "one-var": "warn",
  31.         "max-len": "off",
  32.         "no-trailing-spaces": "off",
  33.         "require-jsdoc": "warn",
  34.         "camelcase": "warn",
  35.         "no-invalid-this": "warn",
  36.         "new-cap": "warn",
  37.         "guard-for-in": "warn"
  38.     }
  39. }

注意

“parser”指定为”vue-eslint-parser”，能够解析到.wxa文件的结构，否则会出现奇奇怪怪的报错。