reactjs - ¿Puedo acceder a un valor constante al crear una regla personalizada con typescript-eslint?
Estoy intentando agregar una regla personalizada de ESLint usando @typescript-eslint/utils para mostrar una advertencia si la prop kind de Category no coincide con una expresión regular:
import { ESLintUtils, TSESTree } from '@typescript-eslint/utils'
const createRule = ESLintUtils.RuleCreator(() => '')
const rule = createRule({
create(context) {
return {
'JSXOpeningElement[name.name="Category"] JSXAttribute[name.name="kind"]': (node: TSESTree.JSXAttribute) => {
if (node.value?.type === 'Literal' && !/[A-Z]/.test(node.value.value)) {
context.report({
node,
messageId: 'message'
})
}
}
},
...
})
El código anterior funciona como se espera si paso la prop como una cadena, como en los dos primeros casos, pero no puedo encontrar una manera de hacer que funcione si paso una constante. ¿Es posible acceder al valor de CATEGORY_C desde el node?
import { CATEGORY_C } from './constants'
import { Category } from './components/Category'
export const Categories () => (
<>
<Category kind='A' />
<Category kind='B' />
<Category kind={CATEGORY_C} />
</>
)
Respuesta #1
¡Sí lo es! Si estás intentando acceder al tipo de un nodo, entonces la regla necesitará ser una regla personalizada tipada.
Reformulando el ejemplo de la documentación sobre cómo obtener el tipo de un nodo:
create(context) {
return {
'SomeSelector'(node) {
const services = ESLintUtils.getParserServices(context);
const type = services.getTypeAtLocation(node);
// ...
},
};
}
Ese type es el ts.Type obtenido de la API del compilador de TypeScript mediante getTypeAtLocation.
💡 Consejo: puedes previsualizar nodos, tipos y otra información de reglas en typescript-eslint.io/play. Consulta la pestaña Tipos para obtener información de tipos de TypeScript para los nodos. Este área de prueba simula el fragmento de código OP.
