2

I am trying to make another user snippet in VSCode to automate the document.querySelector but whenever I try to it gives me a weird error shown below. I have another snippet that works just fine but that was shown to me by an online class I am taking. I don't have any experience with json so I may just be getting the syntax wrong but it is the exact same as my previous snippet.

VSCode screenshot

In case that link doesn't work I'll include the code written below. The error I am getting is on the very first curly brace and it says "end of file expected .json"

All help is appreciated :)

{                    // start of file and json object

// other snippets here

  
  "query selector": {
    "scope": "javascript",
    "prefix": "dq",
    "body": ["document.querySelector('$0')"],
    "description": "Select element from document"
  },

// other snippets here

}                    // end of json object
Mark
  • 143,421
  • 24
  • 428
  • 436
Bruck
  • 33
  • 5
  • I needed to fix your code and then basically answered it there. The snippets file is one big `json` object. Each snippet goes inside that object, separated from each other by commas - so each snippet has a trailing comma as in your code example if there is a following snippet. – Mark Apr 03 '22 at 04:11
  • And since your snippets file is so short - you should have just shown it all. The issue might originate from before what your image showed. – Mark Apr 03 '22 at 04:18
  • You may be able to just delete the `{` with the red squiggly under it. Each individual snippet is not wrapped in `{}` as in your image. – Mark Apr 03 '22 at 04:26
  • Hey Mark, Thank you for editing my post and rewriting my code. You were right in regards to the trailing comma, my previous snippet did not have it so it was interfering with my new snippet. Also how did you open that nice box to input code, I just typed it into the text editor for the post. Thank you again, this was my first post and i'm new to coding. – Bruck Apr 03 '22 at 04:29
  • You can click the `edit` button to see what I added. You can surround code with 3 backticks and the language, in this case `json` and close it with another three backticks. Look at the edit is the best way to see. – Mark Apr 03 '22 at 04:32
  • if you want to know all the possibilities of Markdown read the help on SO – rioV8 Apr 03 '22 at 08:50

2 Answers2

0

Use a square bracket to start a json file, and end with a square bracket [ ].

[
  {
  "query selector": {
  "scope": "javascript",
  "prefix": "dq",
  "body": 
  ["document.querySelector('$0')"],
  "description": "Select element from document"
                 }
  }
]
lycheelichi
  • 185
  • 1
  • 2
  • 9
  • 1
    Try your solution in a snippets file, you will see it doesn't work. – Mark Apr 03 '22 at 04:17
  • @Mark how so? on a json formatter it shows just fine. would be great if you can point out why tho. thank you – lycheelichi Apr 03 '22 at 04:25
  • Just try it. And the auto-generated snippet files don't have them. And when I add them, the whole thing is errored. No doubt vscode reads these files in its own way. – Mark Apr 03 '22 at 04:28
0

Your json file is incorrect.

You should place the object starting with the key “query selector” inside the json object above.

Add a comma after the curly brace in line 14 and add your snippet in there. Remove your outer curly braces from lines 17 and 24.

Json files are only one single object.

So your snippets file would look something like this:

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  },
  "query selector": {
    "scope": "javascript",
    "prefix": "dq",
    "body": [
      "document.querySelector('$0')"
    ],
    "description": "Select element from document"
  }
}

By the way, I don't think you need the "scope" key.

Guillermo Brachetta
  • 3,857
  • 3
  • 18
  • 36