eslint plugin for mini programs
npm install eslint-plugin-miniprogram

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:
``bash`
npm install --save-dev eslint eslint-plugin-miniprogram
In your .eslintrc.js file, include this plugin:
`js.mina
// .eslintrc.js
module.exposts = {
// you'll need vue-eslint-parser for 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
}
};
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
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
#### Rule Details
Bad case:
`vuemy-comp
{
"component": ture,
"usingComponent": {
// unused
"my-comp": "/path/to/myComp.mina"
}
}
`
Bad case:
`vue
{
"component": ture,
"usingComponent": {
"my-comp": "/path/to/myComp.mina"
}
}
`
| | WeChat | Baidu |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Use Page for page | no components | no components |Component
| Use for page | usingComponents | component |Component
| Use 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.
Some use cases:
`json5my-comp
{
"comp": "/path/to/myComp.mina", // should be
"comp": "/path/to/anotherComp/index.mina" // should be another-comp
}
``
| | (Demo) | WeChat | Baidu |
| ---------- | ------------- | ------ | ----- |
| Camel Case | bind:myEvent | √ | √ |
| Kebab Case | bind:my-event | √ | × |
| Snake Case | bind:my_event | √ | √ |
- 'camel'
`html`
- 'kebab'
`html`
- 'snake'
`html``