Add JSXText check into isValidLocationToAddComment (#27653)

* Add JSXText check into isValidLocationToAddComment

* Small simplification

src/services/textChanges.ts

@@ -1075,7 +1075,7 @@ namespace ts.textChanges {
     }
 
     export function isValidLocationToAddComment(sourceFile: SourceFile, position: number) {
-        return !isInComment(sourceFile, position) && !isInString(sourceFile, position) && !isInTemplateString(sourceFile, position);
+        return !isInComment(sourceFile, position) && !isInString(sourceFile, position) && !isInTemplateString(sourceFile, position) && !isInJSXText(sourceFile, position);
     }
 
     function needSemicolonBetween(a: Node, b: Node): boolean {

src/services/utilities.ts

@@ -909,6 +909,20 @@ namespace ts {
         return isTemplateLiteralKind(token.kind) && position > token.getStart(sourceFile);
     }
 
+    export function isInJSXText(sourceFile: SourceFile, position: number) {
+        const token = getTokenAtPosition(sourceFile, position);
+        if (isJsxText(token)) {
+            return true;
+        }
+        if (token.kind === SyntaxKind.OpenBraceToken && isJsxExpression(token.parent) && isJsxElement(token.parent.parent)) {
+            return true;
+        }
+        if (token.kind === SyntaxKind.LessThanToken && isJsxOpeningLikeElement(token.parent) && isJsxElement(token.parent.parent)) {
+            return true;
+        }
+        return false;
+    }
+
     export function findPrecedingMatchingToken(token: Node, matchingTokenKind: SyntaxKind, sourceFile: SourceFile) {
         const tokenKind = token.kind;
         let remainingMatchingTokens = 0;

tests/cases/fourslash/jsxTsIgnoreOnJSXExpressionsAndChildren.ts

@@ -0,0 +1,95 @@
+/// <reference path="fourslash.ts" />
+
+// @allowJs: true
+// @checkJs: true
+// @noEmit: true
+// @jsx: react
+// @esModuleInterop: true
+// @skipLibCheck: true
+// @Filename: declarations.d.ts
+////declare namespace JSX {
+////  interface Element {}
+////  interface IntrinsicElements { [index: string]: {} }
+////}
+////declare var React: any;
+// @Filename: MyComponent.jsx
+////class MyComponent extends React.Component {
+////  render() {
+////    return (
+////      <div>
+////        {[|/*1*/doesNotExist|]}
+////      </div>
+////    );
+////  }
+////}
+// @Filename: MyComponent2.jsx
+////class MyComponent2 extends React.Component {
+////  render() {
+////    return (
+////      <div>
+////        Aleph{[|/*2*/doesNotExist|]}Bet
+////      </div>
+////    );
+////  }
+////}
+// @Filename: MyComponent3.jsx
+////class MyComponent3 extends React.Component {
+////  render() {
+////    return (
+////      <div>
+////        <[|/*3*/DoesNotExist|] />
+////      </div>
+////    );
+////  }
+////}
+
+goTo.file(1);
+verify.getSyntacticDiagnostics([]);
+verify.getSemanticDiagnostics([{ code: 2304, message: "Cannot find name 'doesNotExist'." }]);
+verify.codeFix({
+    index: 0,
+    description: "Ignore this error message",
+    newFileContent: `class MyComponent extends React.Component {
+  render() {
+    return (
+      <div>
+        {
+// @ts-ignore
+        doesNotExist}
+      </div>
+    );
+  }
+}`
+});
+goTo.file(2);
+verify.codeFix({
+    index: 0,
+    description: "Ignore this error message",
+    newFileContent: `class MyComponent2 extends React.Component {
+  render() {
+    return (
+      <div>
+        Aleph{
+// @ts-ignore
+        doesNotExist}Bet
+      </div>
+    );
+  }
+}`
+});
+goTo.file(3);
+verify.codeFix({
+    index: 0,
+    description: "Ignore this error message",
+    newFileContent: `class MyComponent3 extends React.Component {
+  render() {
+    return (
+      <div>
+        <
+// @ts-ignore
+        DoesNotExist />
+      </div>
+    );
+  }
+}`
+});