improve location of warnings

Author: nicmosc

src/rules/deprecatedProps.ts

@@ -2,6 +2,7 @@ import { ParserServices, TSESLint, TSESTree } from '@typescript-eslint/experimen
 import ts from 'typescript';
 
 interface JSDocProperty {
+  node: TSESTree.JSXIdentifier;
   name: string;
   tag: string;
   description?: string;
@@ -87,16 +88,20 @@ export default {
 
         const ancestors = context.getAncestors();
         const openingJsxElement = getOpeningElement(ancestors);
-        const attributeNames =
-          openingJsxElement?.attributes
-            .filter((attribute) => attribute.type === 'JSXAttribute')
-            .map((attribute) => attribute.name.name) ?? [];
+        const attributeElements =
+          openingJsxElement?.attributes.filter((attribute) => attribute.type === 'JSXAttribute') ??
+          [];
 
         // If the JSX element has no props
-        if (attributeNames.length === 0) {
+        if (attributeElements.length === 0) {
           return false;
         }
 
+        const attributeMap = attributeElements.reduce(
+          (memo, element) => ({ ...memo, [element.name.name]: element }),
+          {},
+        ) as Record<string, TSESTree.JSXAttribute>;
+
         // Get JSDoc from parent def (source file)
         const sourceFileDeclaration =
           symbol != null ? getSourceFileParent(symbol.valueDeclaration) : null; // Need parent
@@ -127,11 +132,12 @@ export default {
             .filter(
               (property) =>
                 property.doc.some((tag) => tag.name === 'deprecated') &&
-                attributeNames.includes(property.name),
+                attributeMap[property.name] != null,
             )
             .map((property) => {
               const deprecated = property.doc.find((tag) => tag.name === 'deprecated');
               return {
+                node: attributeMap[property.name].name,
                 name: property.name,
                 tag: deprecated!.name,
                 description: deprecated?.text,
@@ -143,7 +149,7 @@ export default {
 
         for (const report of deprecatedPropReports) {
           context.report({
-            node,
+            node: report.node,
             messageId: 'avoidDeprecated',
             data: {
               name: report.name,

tests/integration/__tests__/avoid-deprecated.test.ts

@@ -27,19 +27,28 @@ describe('avoidDeprecated', () => {
       expect(errorCount).toEqual(0);
     });
 
-    it('generates the right warning', () => {
+    it('matches the message pattern', () => {
       const { messages } = res.results[0]!;
-
       const text = messages[0].message;
+
       expect(text).toMatch(stringPattern);
     });
 
     it('generates exactly the right warning', () => {
       const { messages } = res.results[0]!;
-
       const text = messages[0].message;
+
       expect(text).toMatch(`Avoid using 'category' since it's deprecated. use color instead`);
     });
+
+    it('the warning is at the right position', () => {
+      const { messages } = res.results[0]!;
+      const { column, line, endColumn } = messages[0];
+
+      expect(line).toEqual(7);
+      expect(column).toEqual(31);
+      expect(endColumn).toEqual(39);
+    });
   });
 
   describe('when the component interface is in the same file', () => {
@@ -57,7 +66,7 @@ describe('avoidDeprecated', () => {
       expect(errorCount).toEqual(0);
     });
 
-    it('generates the right warnings', () => {
+    it('matches the message pattern', () => {
       const { messages } = res.results[0]!;
 
       const text1 = messages[0].message;
@@ -76,6 +85,18 @@ describe('avoidDeprecated', () => {
       const text2 = messages[1].message;
       expect(text2).toMatch(`Avoid using 'someProp2' since it's deprecated. reason2`);
     });
+
+    it('the warnings are at the right position', () => {
+      const { messages } = res.results[0]!;
+
+      expect(messages[0].line).toEqual(27);
+      expect(messages[0].column).toEqual(18);
+      expect(messages[0].endColumn).toEqual(26);
+
+      expect(messages[1].line).toEqual(27);
+      expect(messages[1].column).toEqual(30);
+      expect(messages[1].endColumn).toEqual(39);
+    });
   });
 
   describe('when the component interface extends from another interface', () => {
@@ -93,7 +114,7 @@ describe('avoidDeprecated', () => {
       expect(errorCount).toEqual(0);
     });
 
-    it('generates the right warning', () => {
+    it('matches the message pattern', () => {
       const { messages } = res.results[0]!;
 
       const text = messages[0].message;

tests/integration/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "name": "eslint-plugin-deprecated-props-tester",
   "scripts": {
-    "lint": "eslint --config ./.eslintrc.js --ext .tsx ./local-definition-extends-external.tsx",
+    "lint": "eslint --config ./.eslintrc.js --ext .tsx ./external-definition.tsx",
     "test": "jest --config ../../jest.config.js"
   },
   "devDependencies": {