# wxml/required-attributes

# Background

Required Attributes

Hint required attributes for config wxml tags, same with eslint-plugin-react's require-default-props (opens new window) rule, but for wxml and exist difference.

# Motivation

hint developer don't forget add required attributes in config wxml tag.

{
  "wxml/required-attributes": [
    "warn",
    { "tag": "popup", "attrs": ["showModal", "popupId"] },
    { "tag": "img", "attrs": ["src", { "key": "width", "value": "100px" }] }
  ]
}
<popup name="welcome"> <img useWebp > </popup>
Now loading...

💡 tips

You can edit code via online editor, it's online REPL, try to fix eslint problem !

# Config

"wxml/required-attributes": [<enabled>, <{ tag: string, attrs: <string | { key: string, value: string }>[] }>] }]

# Config Example

{
  "wxml/required-attributes": [
    "warn",
    { "tag": "popup", "attrs": ["showModal", "popupId"] },
    { "tag": "img", "attrs": ["src", { "key": "width", "value": "100px" }] }
  ]
}

High Level Usage

Challenge: Check all missing showMask property <popup /> in your .wxml code base.

Solution

  • Wirte eslintrc config as follow
{
  "wxml/required-attributes": [
    "error",
    { "tag": "popup", "attrs": ["showMask"] }
  ]
}
  • run eslint cli
$ eslint src/**/*.wxml --quiet
  • and then all wrong popup wxml file will log in your terminal
D:\\miniprogram\\src\\pages\\home\\main.wxml
 1:2 error <popup> missing these attributes -> ["showMask"] wxml/required-attributes

x 1 problems (1 errors, 0 warnings)

# Version

This rule was introduced in eslint-plugin-wxml v0.2.1

# Implementation