Skip to content

Latest commit

 

History

History
273 lines (203 loc) · 7.37 KB

README.md

File metadata and controls

273 lines (203 loc) · 7.37 KB
Raw

eslint-plugin-miniprogram

npm Build Status

中文版

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" />