{
  "react/boolean-prop-naming": {
    "name": "react/boolean-prop-naming",
    "value": "off",
    "description": "布尔值类型的 propTypes 的 name 必须为 is 或 has 开头",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/button-has-type": {
    "name": "react/button-has-type",
    "value": "off",
    "description": "<button> 必须有 type 属性",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/default-props-match-prop-types": {
    "name": "react/default-props-match-prop-types",
    "value": "off",
    "description": "一个 defaultProps 必须有对应的 propTypes",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/destructuring-assignment": {
    "name": "react/destructuring-assignment",
    "value": "off",
    "description": "props, state, context 必须用解构赋值",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/display-name": {
    "name": "react/display-name",
    "value": "off",
    "description": "组件必须有 displayName 属性",
    "reason": "不强制要求写 displayName",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/forbid-component-props": {
    "name": "react/forbid-component-props",
    "value": "off",
    "description": "禁止在自定义组件中使用指定的 props",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/forbid-dom-props": {
    "name": "react/forbid-dom-props",
    "value": "off",
    "description": "禁止在 dom 组件中使用指定的 props",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/forbid-elements": {
    "name": "react/forbid-elements",
    "value": "off",
    "description": "禁止使用指定的组件",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/forbid-foreign-prop-types": {
    "name": "react/forbid-foreign-prop-types",
    "value": "off",
    "description": "禁止使用另一个组件的 propTypes",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/forbid-prop-types": {
    "name": "react/forbid-prop-types",
    "value": "off",
    "description": "禁止使用 PropTypes.any PropTypes.array 和 PropTypes.object",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/function-component-definition": {
    "name": "react/function-component-definition",
    "value": "off",
    "description": "限制函数式组件的函数形式（函数声明、函数表达式或箭头函数）",
    "reason": "一些场景还不能覆盖，如 export default function，自动修复功能在 ts 中有些问题",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/hook-use-state": {
    "name": "react/hook-use-state",
    "value": "off",
    "description": "hook 的返回值必须与 useState 的解构对应",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/iframe-missing-sandbox": {
    "name": "react/iframe-missing-sandbox",
    "value": "error",
    "description": "iframe 组件必须添加 sandbox 属性",
    "reason": "",
    "badExample": "<span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">Frame</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n    </span><span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"An iframe element is missing a sandbox attribute&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/iframe-missing-sandbox)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>iframe</span><span class=\"token punctuation\">></span></mark></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>iframe</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n    </span><span class=\"token punctuation\">{</span><mark class=\"eslint-error\" data-tip=\"An iframe element is missing a sandbox attribute&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/iframe-missing-sandbox)&lt;/span&gt;\">React<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'iframe'</span><span class=\"token punctuation\">)</span></mark><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">const</span> Frame1 <span class=\"token operator\">=</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>iframe</span> <span class=\"token attr-name\">sandbox</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>allow-popups<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token keyword\">const</span> <span class=\"token function-variable function\">Frame2</span> <span class=\"token operator\">=</span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n    </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>iframe</span> <span class=\"token attr-name\">sandbox</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>allow-popups<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>iframe</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n    </span><span class=\"token punctuation\">{</span>React<span class=\"token punctuation\">.</span><span class=\"token function\">createElement</span><span class=\"token punctuation\">(</span><span class=\"token string\">'iframe'</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">{</span> sandbox<span class=\"token punctuation\">:</span> <span class=\"token string\">'allow-popups'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-boolean-value": {
    "name": "react/jsx-boolean-value",
    "value": "off",
    "description": "布尔值的属性必须显式的声明值为 true",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-curly-brace-presence": {
    "name": "react/jsx-curly-brace-presence",
    "value": ["error", "never"],
    "description": "禁止 jsx 中使用无用的引号",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">App</span></span> <span class=\"token attr-name\">prop</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><mark class=\"eslint-error\" data-tip=\"Curly braces are unnecessary here.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-curly-brace-presence)&lt;/span&gt;\"><span class=\"token punctuation\">{</span><span class=\"token string\">'foo'</span><span class=\"token punctuation\">}</span></mark></span><span class=\"token punctuation\">></span></span><mark class=\"eslint-error\" data-tip=\"Curly braces are unnecessary here.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-curly-brace-presence)&lt;/span&gt;\"><span class=\"token punctuation\">{</span><span class=\"token string\">'Hello World'</span><span class=\"token punctuation\">}</span></mark><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">App</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">App</span></span> <span class=\"token attr-name\">prop</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello World</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">App</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-filename-extension": {
    "name": "react/jsx-filename-extension",
    "value": "off",
    "description": "限制文件后缀",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-fragments": {
    "name": "react/jsx-fragments",
    "value": ["error", "syntax"],
    "description": "必须使用 <></> 而不是 React.Fragment",
    "reason": "<></> 不需要额外引入 Fragment 组件",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"Prefer fragment shorthand over React.Fragment&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-fragments)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">React.Fragment</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">React.Fragment</span></span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">React.Fragment</span></span> <span class=\"token attr-name\">key</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">React.Fragment</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-handler-names": {
    "name": "react/jsx-handler-names",
    "value": "off",
    "description": "handler 的名称必须是 onXXX 或 handleXXX",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-key": {
    "name": "react/jsx-key",
    "value": ["error", { "checkFragmentShorthand": true }],
    "description": "数组中的 jsx 必须有 key",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <mark class=\"eslint-error\" data-tip=\"Missing &amp;quot;key&amp;quot; prop for element in iterator&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-key)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span></mark>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <mark class=\"eslint-error\" data-tip=\"Missing &amp;quot;key&amp;quot; prop for element in iterator. Shorthand fragment syntax does not support providing keys. Use React.Fragment instead&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-key)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span></span><span class=\"token punctuation\">></span></span></mark>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>ul</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>li</span> <span class=\"token attr-name\">key</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>li</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>ul</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">[</span><span class=\"token number\">1</span><span class=\"token punctuation\">,</span> <span class=\"token number\">2</span><span class=\"token punctuation\">,</span> <span class=\"token number\">3</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">.</span><span class=\"token function\">map</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">value</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">React.Fragment</span></span> <span class=\"token attr-name\">key</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>value<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">React.Fragment</span></span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">}</span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-max-depth": {
    "name": "react/jsx-max-depth",
    "value": "off",
    "description": "限制 jsx 层级",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-bind": {
    "name": "react/jsx-no-bind",
    "value": "off",
    "description": "jsx 中禁止使用 bind",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-comment-textnodes": {
    "name": "react/jsx-no-comment-textnodes",
    "value": "error",
    "description": "禁止在 jsx 中使用像注释的字符串",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"><mark class=\"eslint-error\" data-tip=\"Comments inside children section of tag should be placed inside braces&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-comment-textnodes)&lt;/span&gt;\">// empty div</mark>&lt;/div>;\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\"><mark class=\"eslint-error\" data-tip=\"Comments inside children section of tag should be placed inside braces&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-comment-textnodes)&lt;/span&gt;\">/* empty div */</mark></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">;\n</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span><span class=\"token comment\">/* empty div */</span><span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token operator\">&lt;</span>div <span class=\"token comment\">/* empty div */</span> <span class=\"token operator\">/</span><span class=\"token operator\">></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-constructed-context-values": {
    "name": "react/jsx-no-constructed-context-values",
    "value": "error",
    "description": "禁止使用不稳定的值作为 Context.Provider 的 value",
    "reason": "",
    "badExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Bar.Provider</span></span> <span class=\"token attr-name\">value</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><mark class=\"eslint-error\" data-tip=\"The object passed as the value prop to the Context provider (at line 2) changes every render. To fix this consider wrapping it in a useMemo hook.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-constructed-context-values)&lt;/span&gt;\"><span class=\"token punctuation\">{</span> foo<span class=\"token punctuation\">:</span> <span class=\"token string\">'bar'</span> <span class=\"token punctuation\">}</span></mark><span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Bar</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Bar.Provider</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> foo <span class=\"token operator\">=</span> <span class=\"token function\">useMemo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span> foo<span class=\"token punctuation\">:</span> <span class=\"token string\">'bar'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Bar.Provider</span></span> <span class=\"token attr-name\">value</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>foo<span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Bar</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Bar.Provider</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-duplicate-props": {
    "name": "react/jsx-no-duplicate-props",
    "value": "error",
    "description": "禁止出现重复的 props",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span> <mark class=\"eslint-error\" data-tip=\"No duplicate props allowed&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-duplicate-props)&lt;/span&gt;\"><span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>bar<span class=\"token punctuation\">\"</span></span></mark> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token attr-name\">name</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-leaked-render": {
    "name": "react/jsx-no-leaked-render",
    "value": "off",
    "description": "使用 && 渲染组件时，禁止条件是 0 '' 或 NaN",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-literals": {
    "name": "react/jsx-no-literals",
    "value": "off",
    "description": "禁止在 jsx 中出现字符串",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-script-url": {
    "name": "react/jsx-no-script-url",
    "value": "error",
    "description": "禁止出现 href=\"javascript:void(0)\"",
    "reason": "React 已经有 warning 了，并且会在将来禁止此类属性值",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span> <mark class=\"eslint-error\" data-tip=\"A future version of React will block javascript: URLs as a security precaution. Use event handlers instead if you can. If you need to generate unsafe HTML, try using dangerouslySetInnerHTML instead.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-script-url)&lt;/span&gt;\"><span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>javascript:void(0);<span class=\"token punctuation\">\"</span></span></mark><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>a</span>\n  <span class=\"token attr-name\">href</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>#<span class=\"token punctuation\">\"</span></span>\n  <span class=\"token attr-name\">onClick</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">e</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    e<span class=\"token punctuation\">.</span><span class=\"token function\">preventDefault</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span>\n<span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>a</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-target-blank": {
    "name": "react/jsx-no-target-blank",
    "value": "off",
    "description": "禁止使用 target=\"_blank\"",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-undef": {
    "name": "react/jsx-no-undef",
    "value": "error",
    "description": "禁止使用未定义的组件",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\"><mark class=\"eslint-error\" data-tip=\"&amp;apos;Foo&amp;apos; is not defined.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-undef)&lt;/span&gt;\">Foo</mark></span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token keyword\">import</span> Foo <span class=\"token keyword\">from</span> <span class=\"token string\">'./Foo'</span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-no-useless-fragment": {
    "name": "react/jsx-no-useless-fragment",
    "value": "error",
    "description": "禁止无意义的 Fragment 组件",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-useless-fragment)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span></span><span class=\"token punctuation\">></span></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span></span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>\n<mark class=\"eslint-error\" data-tip=\"Fragments should contain more than one child - otherwise, there’s no need for a Fragment at all.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-no-useless-fragment)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span></span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">foo</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">React.Fragment</span></span> <span class=\"token attr-name\">key</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">React.Fragment</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-pascal-case": {
    "name": "react/jsx-pascal-case",
    "value": "error",
    "description": "组件的名称必须符合 PascalCase",
    "reason": "",
    "badExample": "<span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"Imported JSX component FOO must be in PascalCase&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-pascal-case)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">FOO</span></span> <span class=\"token punctuation\">/></span></mark></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"Imported JSX component FOO_BAR must be in PascalCase&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/jsx-pascal-case)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">FOO_BAR</span></span> <span class=\"token punctuation\">/></span></mark></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">FooBar</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-props-no-spreading": {
    "name": "react/jsx-props-no-spreading",
    "value": "off",
    "description": "禁止使用 {...props}",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-sort-props": {
    "name": "react/jsx-sort-props",
    "value": "off",
    "description": "props 必须按字母排序",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-uses-react": {
    "name": "react/jsx-uses-react",
    "value": "error",
    "description": "修复 React 被误报为未使用的变量的问题（仅在开启 no-unused-vars 时有效）",
    "reason": "",
    "badExample": "<span class=\"token comment\">/* eslint no-unused-vars: \"error\", react/jsx-uses-react: \"off\" */</span>\n<span class=\"token keyword\">import</span> <mark class=\"eslint-error\" data-tip=\"&amp;apos;React&amp;apos; is defined but never used.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(no-unused-vars)&lt;/span&gt;\">React</mark> <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token comment\">/* eslint no-unused-vars: \"error\" */</span>\n<span class=\"token keyword\">import</span> React <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/jsx-uses-vars": {
    "name": "react/jsx-uses-vars",
    "value": "error",
    "description": "修复 no-unused-vars 不检查 jsx 的问题",
    "reason": "",
    "badExample": "<span class=\"token comment\">/* eslint no-unused-vars: \"error\", \"react/jsx-uses-vars\": \"off\" */</span>\n<span class=\"token keyword\">import</span> <mark class=\"eslint-error\" data-tip=\"&amp;apos;Foo&amp;apos; is defined but never used.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(no-unused-vars)&lt;/span&gt;\">Foo</mark> <span class=\"token keyword\">from</span> <span class=\"token string\">'./Foo'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token comment\">/* eslint no-unused-vars: \"error\" */</span>\n<span class=\"token keyword\">import</span> Foo <span class=\"token keyword\">from</span> <span class=\"token string\">'./Foo'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-access-state-in-setstate": {
    "name": "react/no-access-state-in-setstate",
    "value": "off",
    "description": "禁止在 setState 中使用 this.state",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-adjacent-inline-elements": {
    "name": "react/no-adjacent-inline-elements",
    "value": "off",
    "description": "两个 inline 元素之间必须有空格，否则视觉上它们就贴在一起了",
    "reason": "这是样式的问题，不应该由空格约束",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-array-index-key": {
    "name": "react/no-array-index-key",
    "value": "off",
    "description": "禁止使用数组的索引作为 key",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-arrow-function-lifecycle": {
    "name": "react/no-arrow-function-lifecycle",
    "value": "off",
    "description": "类组件中的生命周期函数不要使用箭头函数",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-children-prop": {
    "name": "react/no-children-prop",
    "value": "error",
    "description": "禁止将 children 作为一个 prop",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <mark class=\"eslint-error\" data-tip=\"Do not pass children as props. Instead, nest children between the opening and closing tags.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-children-prop)&lt;/span&gt;\"><span class=\"token attr-name\">children</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>Hello World<span class=\"token punctuation\">\"</span></span></mark> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <mark class=\"eslint-error\" data-tip=\"Do not pass children as props. Instead, nest children between the opening and closing tags.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-children-prop)&lt;/span&gt;\"><span class=\"token attr-name\">children</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Bar</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">}</span></span></mark> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello World</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n  </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Bar</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-danger": {
    "name": "react/no-danger",
    "value": "off",
    "description": "禁止使用 dangerouslySetInnerHTML",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-danger-with-children": {
    "name": "react/no-danger-with-children",
    "value": "error",
    "description": "禁止在使用了 dangerouslySetInnerHTML 的组件内添加 children",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"Only set one of `children` or `props.dangerouslySetInnerHTML`&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-danger-with-children)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">dangerouslySetInnerHTML</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> __html<span class=\"token punctuation\">:</span> <span class=\"token string\">'Foo'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello World</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">dangerouslySetInnerHTML</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> __html<span class=\"token punctuation\">:</span> <span class=\"token string\">'Foo'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hello World</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-deprecated": {
    "name": "react/no-deprecated",
    "value": "error",
    "description": "禁止使用已废弃的 api",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"React.render is deprecated since React 0.14.0, use ReactDOM.render instead&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-deprecated)&lt;/span&gt;\">React<span class=\"token punctuation\">.</span><span class=\"token function\">render</span></mark><span class=\"token punctuation\">(</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> app<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\"><mark class=\"eslint-error\" data-tip=\"componentWillMount is deprecated since React 16.9.0, use UNSAFE_componentWillMount instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-deprecated)&lt;/span&gt;\">componentWillMount</mark></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\"><mark class=\"eslint-error\" data-tip=\"componentWillReceiveProps is deprecated since React 16.9.0, use UNSAFE_componentWillReceiveProps instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-deprecated)&lt;/span&gt;\">componentWillReceiveProps</mark></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\"><mark class=\"eslint-error\" data-tip=\"componentWillUpdate is deprecated since React 16.9.0, use UNSAFE_componentWillUpdate instead, see https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-deprecated)&lt;/span&gt;\">componentWillUpdate</mark></span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "ReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> app<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-did-mount-set-state": {
    "name": "react/no-did-mount-set-state",
    "value": "off",
    "description": "禁止在 componentDidMount 里使用 setState",
    "reason": "同构应用需要在 didMount 里使用 setState",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-did-update-set-state": {
    "name": "react/no-did-update-set-state",
    "value": "error",
    "description": "禁止在 componentDidUpdate 里使用 setState",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentDidUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <mark class=\"eslint-error\" data-tip=\"Do not use setState in componentDidUpdate&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-did-update-set-state)&lt;/span&gt;\"><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">setState</span></mark><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentDidUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-direct-mutation-state": {
    "name": "react/no-direct-mutation-state",
    "value": "error",
    "description": "禁止直接修改 this.state",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <mark class=\"eslint-error\" data-tip=\"Do not mutate state directly. Use setState().&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-direct-mutation-state)&lt;/span&gt;\"><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>state</mark><span class=\"token punctuation\">.</span>name <span class=\"token operator\">=</span> <span class=\"token string\">'foo'</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>state <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span>\n      name<span class=\"token punctuation\">:</span> <span class=\"token string\">'foo'</span><span class=\"token punctuation\">,</span>\n    <span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-find-dom-node": {
    "name": "react/no-find-dom-node",
    "value": "error",
    "description": "禁止使用 findDOMNode",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">const</span> root <span class=\"token operator\">=</span> <span class=\"token function\"><mark class=\"eslint-error\" data-tip=\"Do not use findDOMNode. It doesn’t work with function components and is deprecated in StrictMode. See https://reactjs.org/docs/react-dom.html#finddomnode&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-find-dom-node)&lt;/span&gt;\">findDOMNode</mark></span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>myRef <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">createRef</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">ref</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>myRef<span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-invalid-html-attribute": {
    "name": "react/no-invalid-html-attribute",
    "value": "off",
    "description": "禁用指定的 html 属性",
    "reason": "需要指定特定属性时才需要开启",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-is-mounted": {
    "name": "react/no-is-mounted",
    "value": "error",
    "description": "禁止使用 isMounted",
    "reason": "它是已废弃的语法",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">updateName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><mark class=\"eslint-error\" data-tip=\"Do not use isMounted&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-is-mounted)&lt;/span&gt;\"><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">isMounted</span></mark><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">updateName</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>_isMounted<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n      <span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span><span class=\"token function\">setState</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n    <span class=\"token punctuation\">}</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-multi-comp": {
    "name": "react/no-multi-comp",
    "value": "off",
    "description": "禁止在一个文件创建两个组件",
    "reason": "有一个 bug：https://github.com/yannickcr/eslint-plugin-react/issues/1181",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-namespace": {
    "name": "react/no-namespace",
    "value": "error",
    "description": "禁止在 jsx 中使用命名空间",
    "reason": "",
    "badExample": "<span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"React component Ns:TestComponent must not be in a namespace, as React does not support them&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-namespace)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token namespace\">Ns:</span><span class=\"token class-name\">TestComponent</span></span> <span class=\"token punctuation\">/></span></mark></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">TestComponent</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-object-type-as-default-prop": {
    "name": "react/no-object-type-as-default-prop",
    "value": "off",
    "description": "在功能性组件中禁止将引用类型变量用作默认参数",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-redundant-should-component-update": {
    "name": "react/no-redundant-should-component-update",
    "value": "error",
    "description": "禁止在 React.PureComponent 中使用 shouldComponentUpdate",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"Foo does not need shouldComponentUpdate when extending React.PureComponent.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-redundant-should-component-update)&lt;/span&gt;\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>PureComponent</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">shouldComponentUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></mark>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">shouldComponentUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-render-return-value": {
    "name": "react/no-render-return-value",
    "value": "error",
    "description": "禁止使用 ReactDOM.render 的返回值",
    "reason": "",
    "badExample": "<span class=\"token keyword\">const</span> app <span class=\"token operator\">=</span> <mark class=\"eslint-error\" data-tip=\"Do not depend on the return value from ReactDOM.render&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-render-return-value)&lt;/span&gt;\">ReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span></mark><span class=\"token punctuation\">(</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">App</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'app'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>",
    "goodExample": "ReactDOM<span class=\"token punctuation\">.</span><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">App</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> document<span class=\"token punctuation\">.</span><span class=\"token function\">getElementById</span><span class=\"token punctuation\">(</span><span class=\"token string\">'app'</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-set-state": {
    "name": "react/no-set-state",
    "value": "off",
    "description": "禁止使用 setState",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-string-refs": {
    "name": "react/no-string-refs",
    "value": "error",
    "description": "禁止使用字符串 ref",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>refs<span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <mark class=\"eslint-error\" data-tip=\"Using string literals in ref attributes is deprecated.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-string-refs)&lt;/span&gt;\"><span class=\"token attr-name\">ref</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span></mark> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">import</span> <span class=\"token punctuation\">{</span> useRef<span class=\"token punctuation\">,</span> useEffect <span class=\"token punctuation\">}</span> <span class=\"token keyword\">from</span> <span class=\"token string\">'react'</span><span class=\"token punctuation\">;</span>\n\n<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> foo <span class=\"token operator\">=</span> <span class=\"token function\">useRef</span><span class=\"token punctuation\">(</span><span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">useEffect</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token punctuation\">{</span>\n    console<span class=\"token punctuation\">.</span><span class=\"token function\">log</span><span class=\"token punctuation\">(</span>foo<span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">ref</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span>foo<span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-this-in-sfc": {
    "name": "react/no-this-in-sfc",
    "value": "error",
    "description": "禁止在函数组件中使用 this",
    "reason": "",
    "badExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span><mark class=\"eslint-error\" data-tip=\"Stateless functional components should not use `this`&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-this-in-sfc)&lt;/span&gt;\"><span class=\"token keyword\">this</span><span class=\"token punctuation\">.</span>props</mark><span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token parameter\">props</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">{</span>props<span class=\"token punctuation\">.</span>foo<span class=\"token punctuation\">}</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-typos": {
    "name": "react/no-typos",
    "value": "error",
    "description": "禁止组件的属性或生命周期大小写错误",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">static</span> <mark class=\"eslint-error\" data-tip=\"Typo in static class property declaration&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-typos)&lt;/span&gt;\">defaultprops</mark> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <mark class=\"eslint-error\" data-tip=\"Typo in component lifecycle method declaration: componentdidupdate should be componentDidUpdate&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-typos)&lt;/span&gt;\"><span class=\"token function\">componentdidupdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span></mark>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">static</span> defaultProps <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">componentDidUpdate</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unescaped-entities": {
    "name": "react/no-unescaped-entities",
    "value": "error",
    "description": "禁止在组件的内部存在未转义的 >, \", ' 或 }",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hel<mark class=\"eslint-error\" data-tip=\"`&amp;gt;` can be escaped with `&amp;amp;gt;`.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-unescaped-entities)&lt;/span&gt;\">></mark>lo</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Hel&amp;gt;lo</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unknown-property": {
    "name": "react/no-unknown-property",
    "value": "error",
    "description": "禁止出现 HTML 中的属性，如 class",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <mark class=\"eslint-error\" data-tip=\"Unknown property &amp;apos;class&amp;apos; found, use &amp;apos;className&amp;apos; instead&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-unknown-property)&lt;/span&gt;\"><span class=\"token attr-name\">class</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span></mark> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">className</span><span class=\"token attr-value\"><span class=\"token punctuation\">=</span><span class=\"token punctuation\">\"</span>foo<span class=\"token punctuation\">\"</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unsafe": {
    "name": "react/no-unsafe",
    "value": ["error", { "checkAliases": true }],
    "description": "禁止使用不安全的生命周期方法 componentWillMount, componentWillReceiveProps, componentWillUpdate",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"componentWillMount is unsafe for use in async rendering. Update the component to use componentDidMount instead. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-unsafe)&lt;/span&gt;\"><mark class=\"eslint-error\" data-tip=\"UNSAFE_componentWillMount is unsafe for use in async rendering. Update the component to use componentDidMount instead. See https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-unsafe)&lt;/span&gt;\"><span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">componentWillMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\">UNSAFE_componentWillMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></mark></mark>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unstable-nested-components": {
    "name": "react/no-unstable-nested-components",
    "value": "error",
    "description": "禁止在组件内使用不稳定的组件",
    "reason": "",
    "badExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <mark class=\"eslint-error\" data-tip=\"Do not define components during render. React will see a new component type on every render and destroy the entire subtree’s DOM nodes and state (https://reactjs.org/docs/reconciliation.html#elements-of-different-types). Instead, move this component definition out of the parent component “Foo” and pass data as props.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/no-unstable-nested-components)&lt;/span&gt;\"><span class=\"token keyword\">function</span> <span class=\"token function\">UnstableNestedComponent</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span></mark>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">UnstableNestedComponent</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n    </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">function</span> <span class=\"token function\">Foo</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> MemoizedNestedComponent <span class=\"token operator\">=</span> React<span class=\"token punctuation\">.</span><span class=\"token function\">useCallback</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token operator\">=></span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">,</span> <span class=\"token punctuation\">[</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n\n  <span class=\"token keyword\">return</span> <span class=\"token punctuation\">(</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">\n      </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">MemoizedNestedComponent</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token plain-text\">\n    </span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span>\n  <span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unused-class-component-methods": {
    "name": "react/no-unused-class-component-methods",
    "value": "off",
    "description": "禁止在类组件中定义未使用的方法",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unused-prop-types": {
    "name": "react/no-unused-prop-types",
    "value": "off",
    "description": "禁止出现未使用的 propTypes",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-unused-state": {
    "name": "react/no-unused-state",
    "value": "off",
    "description": "已定义的 state 必须使用",
    "reason": "没有官方文档，并且存在很多 bug：https://github.com/yannickcr/eslint-plugin-react/search?q=no-unused-state&type=Issues&utf8=%E2%9C%93",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/no-will-update-set-state": {
    "name": "react/no-will-update-set-state",
    "value": "off",
    "description": "禁止在 componentWillUpdate 中使用 setState",
    "reason": "已经禁止使用 componentWillUpdate 了",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/prefer-es6-class": {
    "name": "react/prefer-es6-class",
    "value": ["error", "always"],
    "description": "必须使用 Class 的形式创建组件",
    "reason": "",
    "badExample": "<span class=\"token keyword\">const</span> Foo <span class=\"token operator\">=</span> <span class=\"token function\">createReactClass</span><span class=\"token punctuation\">(</span><mark class=\"eslint-error\" data-tip=\"Component should use es6 class instead of createClass&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/prefer-es6-class)&lt;/span&gt;\"><span class=\"token punctuation\">{</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span><span class=\"token punctuation\">,</span>\n<span class=\"token punctuation\">}</span></mark><span class=\"token punctuation\">)</span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/prefer-exact-props": {
    "name": "react/prefer-exact-props",
    "value": "off",
    "description": "使用 Flow 时，props 必须设置为精确的类型",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/prefer-read-only-props": {
    "name": "react/prefer-read-only-props",
    "value": "off",
    "description": "使用 Flow 时，props 必须设置为只读的",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/prefer-stateless-function": {
    "name": "react/prefer-stateless-function",
    "value": "off",
    "description": "必须使用函数式组件",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/prop-types": {
    "name": "react/prop-types",
    "value": "off",
    "description": "组件必须写 propTypes",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/react-in-jsx-scope": {
    "name": "react/react-in-jsx-scope",
    "value": "off",
    "description": "出现 jsx 的地方必须导入 React",
    "reason": "已经在 no-undef 中限制了",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/require-default-props": {
    "name": "react/require-default-props",
    "value": "off",
    "description": "非 required 的 prop 必须有 defaultProps",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/require-optimization": {
    "name": "react/require-optimization",
    "value": "off",
    "description": "组件必须有 shouldComponentUpdate",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/require-render-return": {
    "name": "react/require-render-return",
    "value": "error",
    "description": "render 方法中必须有返回值",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <mark class=\"eslint-error\" data-tip=\"Your render method should have a return statement&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/require-render-return)&lt;/span&gt;\"><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span></mark>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/self-closing-comp": {
    "name": "react/self-closing-comp",
    "value": "error",
    "description": "组件内没有 children 时，必须使用自闭和写法",
    "reason": "",
    "badExample": "<span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"Empty components are self-closing&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/self-closing-comp)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></mark></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><mark class=\"eslint-error\" data-tip=\"Empty components are self-closing&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/self-closing-comp)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></mark></span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Not empty</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span><span class=\"token class-name\">Foo</span></span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">Not empty</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span><span class=\"token class-name\">Bar</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/sort-comp": {
    "name": "react/sort-comp",
    "value": "error",
    "description": "组件内方法必须按照一定规则排序",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <mark class=\"eslint-error\" data-tip=\"render should be placed after componentWillUnmount&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/sort-comp)&lt;/span&gt;\"><span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span></mark>\n  <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <mark class=\"eslint-error\" data-tip=\"constructor should be placed after defaultProps&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/sort-comp)&lt;/span&gt;\"><span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span></mark>\n  <span class=\"token keyword\">static</span> defaultProps <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">static</span> defaultProps <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n  <span class=\"token function\">constructor</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\">componentDidMount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\">componentWillUnmount</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n  <span class=\"token function\">render</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    <span class=\"token keyword\">return</span> <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/sort-default-props": {
    "name": "react/sort-default-props",
    "value": "off",
    "description": "强制实施 defaultProps 声明按字母顺序排序",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/sort-prop-types": {
    "name": "react/sort-prop-types",
    "value": "off",
    "description": "propTypes 的属性必须按照字母排序",
    "reason": "类型相关的约束交给 TypeScript",
    "badExample": "",
    "goodExample": "",
    "fixable": true,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/state-in-constructor": {
    "name": "react/state-in-constructor",
    "value": "off",
    "description": "必须在构造函数中初始化 state",
    "reason": "",
    "badExample": "",
    "goodExample": "",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/static-property-placement": {
    "name": "react/static-property-placement",
    "value": "error",
    "description": "类的静态属性必须使用 static 关键字定义",
    "reason": "",
    "badExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span>\n<mark class=\"eslint-error\" data-tip=\"&amp;apos;defaultProps&amp;apos; should be declared as a static class property.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/static-property-placement)&lt;/span&gt;\">Foo<span class=\"token punctuation\">.</span>defaultProps</mark> <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token keyword\">class</span> <span class=\"token class-name\">Foo</span> <span class=\"token keyword\">extends</span> <span class=\"token class-name\">React<span class=\"token punctuation\">.</span>Component</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">static</span> defaultProps <span class=\"token operator\">=</span> <span class=\"token punctuation\">{</span><span class=\"token punctuation\">}</span><span class=\"token punctuation\">;</span>\n<span class=\"token punctuation\">}</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/style-prop-object": {
    "name": "react/style-prop-object",
    "value": "error",
    "description": "style 属性的取值必须是 object",
    "reason": "",
    "badExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token style-attr language-css\"><span class=\"token attr-name\"> </span><mark class=\"eslint-error\" data-tip=\"Style prop value must be an object&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/style-prop-object)&lt;/span&gt;\"><span class=\"token attr-name\"><span class=\"token attr-name\">style</span></span><span class=\"token punctuation\">=\"</span><span class=\"token attr-value\"><span class=\"token property\">color</span><span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span></span><span class=\"token punctuation\">\"</span></mark></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span> <span class=\"token attr-name\">style</span><span class=\"token script language-javascript\"><span class=\"token script-punctuation punctuation\">=</span><span class=\"token punctuation\">{</span><span class=\"token punctuation\">{</span> color<span class=\"token punctuation\">:</span> <span class=\"token string\">'red'</span> <span class=\"token punctuation\">}</span><span class=\"token punctuation\">}</span></span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  },
  "react/void-dom-elements-no-children": {
    "name": "react/void-dom-elements-no-children",
    "value": "error",
    "description": "img, br 标签中禁止有 children",
    "reason": "",
    "badExample": "<mark class=\"eslint-error\" data-tip=\"Void DOM element &amp;lt;img /&amp;gt; cannot receive children.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/void-dom-elements-no-children)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">foo</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>img</span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>\n<mark class=\"eslint-error\" data-tip=\"Void DOM element &amp;lt;br /&amp;gt; cannot receive children.&lt;br/&gt;&lt;span class='eslint-error-rule-id'&gt;eslint(react/void-dom-elements-no-children)&lt;/span&gt;\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>br</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">bar</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>br</span><span class=\"token punctuation\">></span></span></mark><span class=\"token punctuation\">;</span>",
    "goodExample": "<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>img</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>br</span> <span class=\"token punctuation\">/></span></span><span class=\"token punctuation\">;</span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token plain-text\">foo</span><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>div</span><span class=\"token punctuation\">></span></span><span class=\"token punctuation\">;</span>",
    "fixable": false,
    "extendsBaseRule": "",
    "requiresTypeChecking": false
  }
}