GeezerVison is showing github.com — Cherry-pick PR #47096 into release-4.5 (#47105) · microsoft/TypeScript@1d4ec40
File treeExpand file treeCollapse file tree Open diff view settings Expand file treeCollapse file tree Open diff view settings Collapse file Copy file name to clipboardExpand all lines: src/services/completions.ts +18-1Lines changed: 18 additions & 1 deletion | Original file line number | Diff line number | Diff line change |
|---|
@@ -713,8 +713,25 @@ namespace ts.Completions { | 713 | 713 | } | 714 | 714 | } | 715 | 715 |
| | 716 | + // Before offering up a JSX attribute snippet, ensure that we aren't potentially completing | | 717 | + // a tag name; this may appear as an attribute after the "<" when the tag has not yet been | | 718 | + // closed, as in: | | 719 | + // | | 720 | + // return <> | | 721 | + // foo <butto| | | 722 | + // </> | | 723 | + // | | 724 | + // We can detect this case by checking if both: | | 725 | + // | | 726 | + // 1. The location is "<", so we are completing immediately after it. | | 727 | + // 2. The "<" has the same position as its parent, so is not a binary expression. | 716 | 728 | const kind = SymbolDisplay.getSymbolKind(typeChecker, symbol, location); | 717 | | - if (kind === ScriptElementKind.jsxAttribute && preferences.includeCompletionsWithSnippetText && preferences.jsxAttributeCompletionStyle && preferences.jsxAttributeCompletionStyle !== "none") { | | 729 | + if ( | | 730 | + kind === ScriptElementKind.jsxAttribute | | 731 | + && (location.kind !== SyntaxKind.LessThanToken || location.pos !== location.parent.pos) | | 732 | + && preferences.includeCompletionsWithSnippetText | | 733 | + && preferences.jsxAttributeCompletionStyle | | 734 | + && preferences.jsxAttributeCompletionStyle !== "none") { | 718 | 735 | let useBraces = preferences.jsxAttributeCompletionStyle === "braces"; | 719 | 736 | const type = typeChecker.getTypeOfSymbolAtLocation(symbol, location); | 720 | 737 |
| |
Collapse file Copy file name to clipboard +61Lines changed: 61 additions & 0 deletions | Original file line number | Diff line number | Diff line change |
|---|
| | 1 | +/// <reference path="fourslash.ts" /> | | 2 | +//@Filename: file.tsx | | 3 | +////declare namespace JSX { | | 4 | +//// interface IntrinsicElements { | | 5 | +//// button: any; | | 6 | +//// div: any; | | 7 | +//// } | | 8 | +////} | | 9 | +////function fn() { | | 10 | +//// return <> | | 11 | +//// <butto/*1*/ | | 12 | +//// </>; | | 13 | +////} | | 14 | +////function fn2() { | | 15 | +//// return <> | | 16 | +//// preceding junk <butto/*2*/ | | 17 | +//// </>; | | 18 | +////} | | 19 | +////function fn3() { | | 20 | +//// return <> | | 21 | +//// <butto/*3*/ style="" | | 22 | +//// </>; | | 23 | +////} | | 24 | + | | 25 | + | | 26 | + | | 27 | +verify.completions( | | 28 | + { | | 29 | + marker: "1", | | 30 | + includes: [ | | 31 | + { name: "button", insertText: undefined, isSnippet: undefined } | | 32 | + ], | | 33 | + preferences: { | | 34 | + jsxAttributeCompletionStyle: "braces", | | 35 | + includeCompletionsWithSnippetText: true, | | 36 | + includeCompletionsWithInsertText: true, | | 37 | + } | | 38 | + }, | | 39 | + { | | 40 | + marker: "2", | | 41 | + includes: [ | | 42 | + { name: "button", insertText: undefined, isSnippet: undefined } | | 43 | + ], | | 44 | + preferences: { | | 45 | + jsxAttributeCompletionStyle: "braces", | | 46 | + includeCompletionsWithSnippetText: true, | | 47 | + includeCompletionsWithInsertText: true, | | 48 | + } | | 49 | + }, | | 50 | + { | | 51 | + marker: "3", | | 52 | + includes: [ | | 53 | + { name: "button", insertText: undefined, isSnippet: undefined } | | 54 | + ], | | 55 | + preferences: { | | 56 | + jsxAttributeCompletionStyle: "braces", | | 57 | + includeCompletionsWithSnippetText: true, | | 58 | + includeCompletionsWithInsertText: true, | | 59 | + } | | 60 | + }, | | 61 | +); |
|