eslint-plugin-miniprogram

中文版

About

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

.mina files

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

How to use

Install the plugin:

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

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

// .eslintrc.js
module.exports = {
  // 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.exports = {
  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
  }
};

Rules

Prefer wx promisify (prefer-wx-promisify)

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.

Details

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");
}

Related Rules

• no-wx-sync-api

Disallow the use of wx.xxSync API (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");

Rule Details

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"
});

Related Rules

• prefer-wx-promisify

No unused component (no-unused-components)

Rule Details

Bad case:

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

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

No unregistered component (no-unregistered-components)

Bad case:

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

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

Validate fields in component / page config file (config-json-validate-fields)

	WeChat	Baidu
Use Page for page	no components	no components
Use Component for page	usingComponents	component
Use Component for component	usingComponents	component
navigationBarTextStyle values	can only be black/white
backgroundTextStyle values	can only be dark/light

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

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

// comp.js
Component({});

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

You should not use "component": 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.

Lint usingComponents name (component-name)

Some use cases:

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

Check event name case (attribute-event-name-case)

	(Demo)	WeChat	Baidu
Camel Case	bind:myEvent	√	√
Kebab Case	bind:my-event	√	×
Snake Case	bind:my_event	√	√

• 'camel'

<comp bind:myEvent="onClick" />

• 'kebab'

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

• 'snake'

<comp bind:my_event="onClick" />