eslint-plugin-miniprogram


中文版

About

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

$3

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

How to use

Install the plugin:

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

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

`js
// .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:

`js
// .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

$3

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:

`ts
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:

`ts
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

$3

Sync API will block JavaScript running and cause bad performance.

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

`ts
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:

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

Examples of correct code for this rule:

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

#### Related Rules

- prefer-wx-promisify

$3

#### Rule Details

Bad case:

`vue

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



`

$3

Bad case:

`vue

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



`

$3

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

`ts
// comp.js
Component({});
`

`html


{ "component": true, "usingComponents": {} }

`

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

`ts
// page.js
Page({});
`

`html


{ "usingComponents": {} }

`

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

`html


{ "component": true, "usingComponents": {} }

`

You should only use black or white for navigationBarTextStyle values.

You should only use dark or light for backgroundTextStyle values.

$3

Some use cases:

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

$3

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

- 'camel'

`html

`

- 'kebab'

`html

`

- 'snake'

`html

``