Vscode: Snippets using hard tab character no longer work

[borakasmer]

• VSCode Version:1.12.0
• OS Version:10.12.4

Steps to Reproduce:

-prop Code sippet is not work Asp.Net Core anymore
-For Angular4 project prop snipper work like below( What is mean [object Object]) and I can not select default.

Thank you for your help..

private _value : string;
public get value() : string {

[object Object]
,
}
public set value(v : string) {

[object Object]
,
}

[kieferrm]

@borakasmer can you provide more concrete steps that help to understand your problem? What extensions do you use? etc. Thanks a ton!

[seanmcbreen]

I have seen a few people report snippets not working - by the thing seams to be more that the ordering of completions differs. Several people have resolve this by adding in the setting:

"editor.snippetSuggestions": "top"

Worth giving this a try to see if the it returns you closer to your expected behavior.

[borakasmer]

@kieferrm I used these extensions for vs code C# for Visual Studio Code (powered by OmniSharp), Angular TypeScript Snippets for VS Code thats all. I create WebApi project with "dotnet run webapi" code snippet is not work. And I create angular project with "ng new ProjectName" again code snippet is not work.

@seanmcbreen "editor.snippetSuggestions": "top" is not work. Only suggestion row change but snippet not work properly again.

Thank you for your help.

[jrieken]

@borakasmer Can attach a sample of a snippet that isn't working after the update? Also does it work when hitting F1 > Insert Snippet?

[jrieken]

This is how it works for me

[hudecsamuel]

I have similar problem when I updated to 1.12

My snippet (Typescript):

"Component class skeleton": {
    "prefix": "rcc",
    "body": [
        "import * as React from \"react\"",
        "",
        "export interface Props {$1}",
        "",
        "export interface State {$2}",
        "",
        "class $3 extends React.Component<Props, State> {",
        "   public static defaultProps: Props = {$4}",
        "",
        "   render() {",
        "       return <div/>",
        "   }",
        "}",
        "",
        "export default $3"
    ],
    "description": "Typescript react component skeleton"
},

This is the result:

import * as React from "react"

export interface Props {}

export interface State {}

class  extends React.Component<Props, State> {


[object Object]
,
}

export default 

[jrieken]

@hudecsamuel So, instead of the real snippet [object Object] is inserted? Do you use suggest to insert the snippet or the command palette?

[jrieken]

Ok, I can reproduce. Thanks

[jrieken]

So, when reading the snippet from disk we parse it with [object Object] already. The problem is that the snippet contains tabs in the strings which isn't valid JSON (thanks @aeschli). The tabs must be replaced with \t.

The snippet works with these modifications (notice \t):

{
    "Component class skeleton": {
        "prefix": "rcc",
        "body": [
            "import * as React from \"react\"",
            "",
            "export interface Props {$1}",
            "",
            "export interface State {$2}",
            "",
            "class $3 extends React.Component<Props, State> {",
            "\tpublic static defaultProps: Props ={$4}",
            "",
            "\trender(){",
            "\t\treturn <div/>",
            "\t}",
            "}",
            "",
            "export default $3"
        ],
        "description": "Typescript react component skeleton"
    }
}

[jrieken]

@borakasmer @hudecsamuel Where do these snippet come from? Did you get them with an extension or did you manually edit them?

[hudecsamuel]

@jrieken I created it manualy.

Well, using \t instead of tab makes sense, the only problem is that it worked until now so this update can break some existing snippets.

Thanks

[jrieken]

Yeah, there was a bug in our JSON parser that it would accept escape sequences like tabs. Unfortunately fixing that bug has caused this swirl.

[aeschli]

I verified that the code yeoman generator does not generate tab control characters inside snippet bodies.

[aeschli]

pushed to release/1.12

[aeschli]

@jrieken Can you verify the fix?

[jrieken]

verified in insiders

[mpearon]

I am seeing this behavior as well, and am running 1.12.1 Stable
When will this fix make it to general release?

[jrieken]

When will this fix make it to general release?

Early next week as 1.12.2

[mpearon]

A little side-note:
Before I ran across this issue, I was able to fix my snippets by converting tabs to spaces - which eliminates the need for \t in my case.
Not sure if that is necessary information, but I thought I would pass it along.

[jrieken]

Yes. JSON doesn't allow to use tabs (its ascii-code 9) inside strings. We used to tolerate that which actually was a bug. Snippets should be using spaces or the \t sequence. The fix here is to make the parser complain but still produce a syntax tree

[raniesantos]

My snippets are working again after updating... but now I see this warning/error all over my snippets: Invalid characters in string. Control characters must be escaped.

What should be done here?

[jrieken]

What should be done here?

@raniesantos https://github.com/Microsoft/vscode/issues/25938#issuecomment-301097385

[componeto]

In my snippets I opted for use space (four spaces) for indentation purposes inside json strings, so the snippet definition looks more clean instead of a bunch \t\t\t in this specific case.