Skip to content
No description, website, or topics provided.
Branch: master
Clone or download
Latest commit 730e132 Jun 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src add chinese doc Jun 10, 2019
.eslintignore initial commit Jun 9, 2019
.eslintrc.js add chinese doc Jun 10, 2019
.gitignore initial commit Jun 9, 2019
.travis.yml migrate to use npm, remove husky, add peer deps Jun 10, 2019
LICENSE Initial commit Jun 3, 2019
README.md add chinese doc Jun 10, 2019
README_cn.md add chinese doc Jun 10, 2019
jest.config.js initial commit Jun 9, 2019
package-lock.json 0.1.0 Jun 10, 2019
package.json 0.1.0 Jun 10, 2019
tsconfig.json initial commit Jun 9, 2019

README.md

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.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
  }
};

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

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" />
You can’t perform that action at this time.