Nerfing Powerful Megalomaniacs

    eslint-plugin-miniprogram
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.0 • Public • Published

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

    Install

    npm i eslint-plugin-miniprogram

    DownloadsWeekly Downloads

    0

    Version

    0.2.0

    License

    MIT

    Unpacked Size

    54.7 kB

    Total Files

    33

    Last publish

    Collaborators

    • airbnbeng
    • lencioni
    • noratarano
    • jimexist