diff --git a/packages/eslint-config-taro/rules/jsx.js b/packages/eslint-config-taro/rules/jsx.js index 2d9b6682b7fe..d9091e3c1288 100644 --- a/packages/eslint-config-taro/rules/jsx.js +++ b/packages/eslint-config-taro/rules/jsx.js @@ -99,7 +99,8 @@ module.exports = { // Enforce event handler naming conventions in JSX // https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-handler-names.md 'react/jsx-handler-names': ['error', { - eventHandlerPropPrefix: 'on' + eventHandlerPropPrefix: 'on', + eventHandlerPrefix: '' }], // Enforce PascalCase for user-defined JSX components diff --git a/packages/eslint-plugin-taro/rules/index.js b/packages/eslint-plugin-taro/rules/index.js index 4fee85fdbd54..7a8bb5986fba 100644 --- a/packages/eslint-plugin-taro/rules/index.js +++ b/packages/eslint-plugin-taro/rules/index.js @@ -9,7 +9,8 @@ const allRules = { 'no-jsx-in-props': require('./no-jsx-in-props'), 'no-ref': require('./no-ref'), 'no-spread-in-props': require('./no-spread-in-props'), - 'no-stateless-component': require('./no-stateless-component') + 'no-stateless-component': require('./no-stateless-component'), + 'jsx-handler-names': require('./jsx-handler-names') } function configureAsError (rules) { diff --git a/packages/eslint-plugin-taro/rules/jsx-handler-names.js b/packages/eslint-plugin-taro/rules/jsx-handler-names.js new file mode 100644 index 000000000000..c15213c0c380 --- /dev/null +++ b/packages/eslint-plugin-taro/rules/jsx-handler-names.js @@ -0,0 +1,40 @@ +const { buildDocsMeta } = require('../utils/utils') + +const ERROR_MESSAGE = 'JSX 事件名需以 `on` 命名' + +module.exports = { + meta: { + docs: { + url: buildDocsMeta(ERROR_MESSAGE, 'jsx-handler-names') + } + }, + + create (context) { + const eventHandlerPropPrefix = 'on' + + const PROP_EVENT_HANDLER_REGEX = new RegExp(`^(${eventHandlerPropPrefix}[A-Z].*|ref)$`) + + return { + JSXAttribute (node) { + if (!node.value || !node.value.expression || !node.value.expression.object) { + return + } + + const propKey = typeof node.name === 'object' ? node.name.name : node.name + + if (propKey === 'ref') { + return + } + + const propIsEventHandler = PROP_EVENT_HANDLER_REGEX.test(propKey) + + if (propIsEventHandler) { + context.report({ + node: node, + message: ERROR_MESSAGE + }) + } + } + } + } +}