Prettier configuration for VS Code and Hugo

prettier-config-vscode.md

Standard Way

1. At the root of the repository, create a .prettierrc file:

   {
     "plugins": ["prettier-plugin-go-template"],
     "overrides": [
       {
         "files": ["*.html"],
         "options": {
           "printWidth": 240,
           "parser": "go-template",
           "singleQuote": false
         }
       }
     ],
     "goTemplateBracketSpacing": true
   }

2. Install the Prettier VS Code extension. Execute in terminal:

   code --install-extension esbenp.prettier-vscode

3. Install prettier and prettier-plugin-go-template with npm, globally:

   npm install -g prettier prettier-plugin-go-template

4. Configure the Prettier plugin so it uses the globally (and extension-enhanced) Prettier. In VS Code settings, write this value for the "Prettier Path" value:

   /opt/homebrew/lib/node_modules/prettier/index.cjs
   

5. Check the "Format on save" option in VS Code settings.

6. Enjoy!

Alternate Way

If the steps above don't work, here is another trick, a bit dirtier:

1. Go to your Developement folder in your home (the root for all your developement stuff). For me, it's:

   cd ~/Documents/Developement
   

2. In the terminal, create a fake NPM package in this directory, and let all the default information.

   npm init
   

3. Install only `` in this fake NPM package:

   npm i prettier-plugin-go-template --save-dev
   

4. Create a .prettierrc file in this folder.

   {
     "plugins": ["prettier-plugin-go-template"],
     "overrides": [
       {
         "files": ["*.html"],
         "options": {
           "printWidth": 240,
           "parser": "go-template",
           "singleQuote": false
         }
       }
     ],
     "goTemplateBracketSpacing": true
   }

5. Enjoy!