eslint-plugin-miniprogram
Version:
eslint plugin for mini programs
274 lines (203 loc) • 7.54 kB
Markdown
# eslint-plugin-miniprogram
[](https://www.npmjs.com/package/eslint-plugin-miniprogram)
[](https://travis-ci.com/airbnb/eslint-plugin-miniprogram)
[中文版](./README_cn.md)
## 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](https://github.com/tinajs/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
### Prefer wx `promisify` (`prefer-wx-promisify`)
Mini Program API introduces a new style of callbacks whick could be a new
[callback hell](http://callbackhell.com/).
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`
### 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:
```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`
### No unused component (`no-unused-components`)
#### Rule Details
Bad case:
```vue
<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:
```vue
<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](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html#%E4%BD%BF%E7%94%A8-component-%E6%9E%84%E9%80%A0%E5%99%A8%E6%9E%84%E9%80%A0%E9%A1%B5%E9%9D%A2) | [Baidu](https://smartprogram.baidu.com/docs/develop/framework/custom-component_comp/#%E4%BD%BF%E7%94%A8-Component-%E6%9E%84%E9%80%A0%E5%99%A8%E6%9E%84%E9%80%A0%E9%A1%B5%E9%9D%A2) |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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
<!-- comp.mina -->
<config>
{ "component": true, "usingComponents": {} }
</config>
```
You should not use `"conponent": true` in `Page` function.
```ts
// page.js
Page({});
```
```html
<!-- page.mina -->
<config>
{ "usingComponents": {} }
</config>
```
You should always add `"usingComponents": {}`, even if it's empty.
```html
<!-- 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:
```json5
{
"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'`
```html
<comp bind:myEvent="onClick" />
```
- `'kebab'`
```html
<comp bind:my-event="onClick" />
```
- `'snake'`
```html
<comp bind:my_event="onClick" />
```