Using go-template prettier plugin for .json files

I have enjoyed using the go-template prettier plugin to highlight and format html templates (Thanks!) and I would like to also use it to edit json templates that I am writing to setup a Hugo API. I tried the obvious - added “*.json” to plugins.overrides.files but that does not seem to work. Any help in getting this wonderful plugin to work with json files?

Thanks.

quite generic question. without any details on how you use and how things are configured.

Short answer

prettier supports formatting JSON out of the box.
Prettier docs on Configuration overrides

And this seems to work :wink:

Looks like you might find answers on a generic support forum like stackoverflow…or the prettier ones.

But whereever yoiu ask a question like this you will be asked about details

  • Command line or integrated
  • Which Editor, How it is installed , your Config files…
  • What’s your problem “does not seem to work” is not helpful
  • Use case : singe JSON files or embedded content in some other file?

See Requesting Help

I am sorry, I probably did not explain my problem clearly. My question is not about formatting JSON with prettier. My question was about formatting (and highlighting) a Hugo template that generates JSON output.

The lookup order for such templates all have the .json extension and VSCode treats the Hugo template as a JSON file, despite the overrides configured in my Hugo template plugin (go-template) configuration (in .prettierrc).

{
    "plugins": ["prettier-plugin-go-template"],
    "overrides": [
      {
        "files": ["*.html", "*.json"],
        "options": {
          "parser": "go-template",
          "goTemplateBracketSpacing": true,
          "bracketSameLine": true
        }
      },
      {
        "files": ["*.js", "*.ts"],
        "options": {
          "useTabs": true,
          "printWidth": 120,
          "singleQuote": true
        }
      }
    ]
  }

With that background, my question is - “Why are overrides in the go-template config not overriding?”. If you still think this is a question for generic support forums, I will try there, but I doubt that is the case here.

Your question has obviously nothing to do with Hugo, but with VSCode and the prettier/prettier-go-template. Better ask their developers or raise an issue on their GitHub repo.

OK. Apologies for the noise.

technically I’m with @chrillek - but there’s a relation to using hugo - who else would like to format a “.json” using as a go template :wink:

it’s problem with VSCODE and the Prettier plugin → so these two are candidates to raise your question.

and when you go there: don’t you think that you are using VSCode is a valuable info…

So I just share an extract of my settings:

.prettierrc
  • using full path because I have a global prettier installation
  • added *.json to my override and it formats in the root folder and layouts/...
{
   "plugins": ["c:/ProgramData/npm/node_modules/prettier-plugin-go-template/lib/index.js", "c:/ProgramData/npm/node_modules/prettier-plugin-toml/lib/index.js"],
   "endOfLine": "lf",
   "printWidth": 120,
   "tabWidth": 3,
   "overrides": [
      {
         "files": ["*.html", "*.gotmpl", "layouts/partials/rest/*", "*.json"],
         "options": {
            "parser": "go-template"
         }
      }
   ]
}

VScode

you have to tell VSCODE to use prettier for the files. and you could restrict that to .json files in .prettierrc beneath layouts folder (see the rest example above)

formatter selection by folder is not possible in VSCODE

{
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
# EITHER
  "editor.defaultFormatter": "esbenp.prettier-vscode",
# OR
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

#

highlighting

Highlighting is NOT done by prettier/plugin itself but by VSCODE

2 Likes

First, a huge Thank You for taking the time to address an issue that might well be marginally OT.

So setting the VSCode setting editor.defaultFormatter almost worked. I mean - the setting removed all the prettier errors (as displayed in the Output Tab of the Terminal window) and left only the JSON validation errors behind. So I took the last small step and set json.validate.enable = false for my Hugo workspace only. That removed all errors and everything works like I wanted. That will obviously restrict my ability to debug generated JSON files in the public folder, but I can live (dangerously?) with that :slight_smile:

Thank you once again.

1 Like

Glad to see someone chimed in with an answer; to me this is very much on topic/relevant re. Hugo. I would be lost if I hadn’t had the go-template plugin to format my Hugo templates.

have you tried this:

  "files.associations": {
    "*.gotmpl": "gotmpl",
    "**/layouts/**/*.json": "gotmpl",
  },
  "[gotmpl]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"go-template.languages": [
   "gotmpl"
]

The last one is for this extension: I use this extension: Go Template Support - Visual Studio Marketplace

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.