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.jsmoduleexposts = // 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.jsmoduleexposts = 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
promisify
(prefer-wx-promisify
)
Prefer wx 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;
Examples of correct code for this rule:
try catch error finally
Related Rules
no-wx-sync-api
no-wx-sync-api
)
Disallow the use of wx.xxSync 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 promisifywx.setStorage;
Related Rules
prefer-wx-promisify
no-unused-components
)
No unused component (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-components
)
No unregistered component (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)
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.jsComponent;
<!-- comp.mina -->{ "component": true, "usingComponents": {} }
You should not use "conponent": true
in Page
function.
// page.jsPage;
<!-- page.mina -->{ "usingComponents": {} }
You should always add "usingComponents": {}
, even if it's empty.
<!-- comp.mina -->{ "component": true, "usingComponents": {} }
You should only use black
or white
for navigationBarTextStyle
values.
You should only use dark
or light
for backgroundTextStyle
values.
usingComponents
name (component-name
)
Lint Some use cases:
{ "comp": "/path/to/myComp.mina", // should be `my-comp "comp": "/path/to/anotherComp/index.mina" // should be `another-comp`}
attribute-event-name-case
)
Check event name case ((Demo) | Baidu | ||
---|---|---|---|
Camel Case | bind:myEvent | √ | √ |
Kebab Case | bind:my-event | √ | × |
Snake Case | bind:my_event | √ | √ |
'camel'
'kebab'
'snake'