Format "Script" tag in edge template

[feniljariwala82]

Does anyone have an idea about how to format the "Script" tag code in the edge template?

[McSneaky]

It depends on your editor. You can try to install "Edge" support, if that doesn't work, then just format it as HTML

Also depends if you use ESLint or Prettier or any other tool like that or just relying on editor autoformat

[grikomsn]

Solution is twofold: let vscode know that you can format *.edge files by adding this in your settings.json (either global or project):

{
 "[edge]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.edge"]
}

Then in your prettier config, add this to configure what parser to format *.edge files:

{
  "overrides": [
    {
      "files": "*.edge",
      "options": {
        "parser": "html"
      }
    }
  ]
}

[thetutlage]

Wouldn't this mess up with the Edge tags or JS expressions you have written inside them?

[grikomsn]

Unfortunately that's true, and since @Julien-R44 is not working on the prettier plugin, for now there's no proper solution for the formatting.

Personally would like to help out making one, need some pointers on prettier AST and how edge syntaxes work. 👀

[thetutlage]

Edge syntax is documented here https://github.com/edge-js/syntax. But sorry, not familiar with prettier API at all.

Another way can be to port an existing Laravel Blade formatter (if that exists)

[grikomsn]

Thanks for the hint!

Technically it works using https://github.com/shufo/prettier-plugin-blade but it fails on @set with object params. Might need to partially modify the formatter logic to allow curly braces since in php it uses square brackets.

 @set('$img', {
    'url': {
      'large': '/static/media/v2o/section-1/desktop/0.jpg',
      'medium': '/static/media/v2o/section-1/mobile/0.jpg'
    },
    'alt': '',
    'id': 'v2o-section-1-img-0'
})

["ERROR" - 3:07:23 PM] Error formatting document.
["ERROR" - 3:07:23 PM] SyntaxError: Parse Error : syntax error, unexpected '{' on line 1
> 1 | <?php echo @set('$img', {
    |                        ^
  2 |                 'url': {
  3 |                   'large': '/static/media/v2o/section-1/desktop/0.jpg',
  4 |                   'medium': '/static/media/v2o/section-1/mobile/0.jpg'
Error: SyntaxError: Parse Error : syntax error, unexpected '{' on line 1
> 1 | <?php echo @set('$img', {
    |                        ^
  2 |                 'url': {
  3 |                   'large': '/static/media/v2o/section-1/desktop/0.jpg',
  4 |                   'medium': '/static/media/v2o/section-1/mobile/0.jpg'

Gonna tinker on the weekend and see if I can make it work.