Puede seguir estos artículos para crear una regla personalizada:

https://blog.scottlogic.com/2021/09/06/how-to-write-an-es-lint-rule-for-beginners.html https://flexport.engineering/writing-custom-lint-rules -para-tus-desarrolladores-quisquillosos-67732afa1803

Escribí una regla para hacer cumplir la description de un componente llamado FormattedMessage

 const ERROR_DESCRIPTION_MISSING = "FormattedMessage component should have a `description` prop"; module.exports = { meta: { type: "problem", schema: [], }, create: (context) => { return { JSXOpeningElement: function (node) { const nodeType = node.name.name; if (nodeType !== "FormattedMessage") { return; } if (!node.attributes.find((attr) => attr.name.name === "description")) { context.report({ node: node, message: ERROR_DESCRIPTION_MISSING, }); } }, }; }, };

Esta regla se aplicará a cualquier componente llamado FormattedMessage . No estoy seguro de si es posible identificar la importación de donde proviene para verificar que sea un componente react-intl .

Después de crear su complemento eslint personalizado, deberá agregar esta nueva regla a su proyecto. Eso dependerá de la configuración de su proyecto, pero si usó CRA, puede seguir esta guía

Aquí puedes ver cómo funciona la regla. Simplemente custom-eslint-formatted-message , y ejecute npm i npm run lint . vscode también detecta la regla y resalta el error.

Hay algunas maneras de hacer esto.

• La primera forma es usar eslint-plugin-react-intl . Este complemento agregará automáticamente el accesorio de descripción a cualquier instancia de FormattedMessage que encuentre.

• La segunda forma es usar la regla ESLint react-intl-enforce-description . Esta regla verificará que todas las instancias de FormattedMessage tengan una propiedad de descripción y generará un error si no la tienen.

• La tercera forma es usar la eslint-plugin-react-intl-display-translations . Esta regla verificará que todas las instancias de FormattedMessage se usen para mostrar traducciones y generará un error si no es así. Esta regla es útil para imponer el uso de instancias de FormattedMessage en componentes que solo muestran traducciones y no es necesaria si todos los componentes usan instancias de FormattedMessage.

Puedes usar PropTypes. Anteriormente formaba parte de React, pero ahora tiene su propio paquete npm, https://www.npmjs.com/package/prop-types . Esto le dará un error de tiempo de ejecución si no se proporcionan accesorios. También es útil, porque los linters pueden avisarte si los pierdes. https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/prop-types.md

 import React from 'react'; import PropTypes from 'prop-types'; const MyComponent = (props) => ( <div className={props.name}> {props.description} </div> ); MyComponent.propTypes = { name: PropTypes.string.isRequired, description: PropTypes.string.isRequired, };