中文版

This ESLint plugin exists to help you lint your Mini Program code.

For developing with .mina files, you can refer to mina-webpack repo for details.

Install the plugin:

npm install --save-dev eslint eslint-plugin-miniprogram

In your .eslintrc.js file, include this plugin:

// .eslintrc.js
module.exposts = {
  // you'll need vue-eslint-parser for `.mina` files
  parser: "vue-eslint-parser",
  plugins: [
    // amongst other other plugins, e.g. prettier
    "prettier",
    // include this plugin
    "miniprogram"
  ]
};

Enable rules:

// .eslintrc.js
module.exposts = {
  rules: {
    // other rules
    "miniprogram/attribute-event-name-case": ["error", "camel"],
    "miniprogram/component-name": ["error"],
    "miniprogram/no-unused-components": ["error"],
    "miniprogram/no-unregistered-components": ["error"],
    "miniprogram/no-wx-sync-api": ["warn"],
    "miniprogram/prefer-wx-promisify": ["error"],
    "miniprogram/config-json-validate-fields": ["error"]
    // rest of the rules
  }
};

Mini Program API introduces a new style of callbacks whick could be a new callback hell.

You can use promisify to enter the Promise world.

Prefer promisify over wx style callbacks including success, fail and complete.

Examples of incorrect code for this rule:

wx.request({
  url: "https://www.example.com",
  success(res) {
    console.log(res);
  },
  fail(error) {
    console.error(error);
  },
  complete() {
    console.log("complete");
  }
});

Examples of correct code for this rule:

try {
  const res = await promisify(wx.request)({
    url: "https://www.example.com",
  });
  console.log(res);
} catch (error) {
  console.error(error);
} finally {
  console.log("complete");
}

• no-wx-sync-api

Sync API will block JavaScript running and cause bad performance.

For example wx.getStorageSync costs 30~100ms CPU time:

console.time("sync");
wx.setStorageSync("key", "value");
console.timeEnd("sync");

Disallow any wx.xxxSync API call.

Examples of incorrect code for this rule:

wx.setStorageSync("key", "value");

Examples of correct code for this rule:

await promisify(wx.setStorage)({
  key: "key",
  data: "value"
});

• prefer-wx-promisify

Bad case:

<config>
{
  "component": ture,
  "usingComponent": {
    // unused `my-comp`
    "my-comp": "/path/to/myComp.mina"
  }
}
</config>

<template>
  <view>hi</view>
</template>

Bad case:

<config>
{
  "component": ture,
  "usingComponent": {
    "my-comp": "/path/to/myComp.mina"
  }
}
</config>

<template>
  <!-- typo here -->
  <my-compp />
</template>

Different Mini Program runtimes have different required fields in config (.json) file.

You should add "conponent": true if you are using Component function.

// comp.js
Component({});

<!-- comp.mina -->
<config>
{ "component": true, "usingComponents": {} }
</config>

You should not use "conponent": true in Page function.

// page.js
Page({});

<!-- page.mina -->
<config>
{ "usingComponents": {} }
</config>

You should always add "usingComponents": {}, even if it's empty.

<!-- comp.mina -->
<config>
{ "component": true, "usingComponents": {} }
</config>

You should only use black or white for navigationBarTextStyle values.

You should only use dark or light for backgroundTextStyle values.

Some use cases:

{
  "comp": "/path/to/myComp.mina", // should be `my-comp
  "comp": "/path/to/anotherComp/index.mina" // should be `another-comp`
}

• 'camel'

<comp bind:myEvent="onClick" />

• 'kebab'

<comp bind:my-event="onClick" />

• 'snake'

<comp bind:my_event="onClick" />