4

I'm struggling to get the Prettier for Apex (installed as per instructions here enter link description here) to format Visualforce Pages and Components. I have a vague memory of this working for me in the past, but I haven't encountered any VF for a while so now I doubt myself.

Is this meant to work? Am I missing something? Does anyone have a repo online somewhere with a working config I could look at?

I have the config file overrides setup as recommended:

{
    "trailingComma": "none",
    "overrides": [
        {
            "files": "**/lwc/**/*.html",
            "options": { "parser": "lwc" }
        },
        {
            "files": "*.{cmp,page,component}",
            "options": { "parser": "html" }
        }
    ],
    "tabWidth": 4,
    "useTabs": true,
    "printWidth": 140,
    "singleQuote": true,
    "endOfLine": "lf"
}

I even tried to play with the Language associations and file extensions. My local workspace setting contains:

"[page]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[Visualforce]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

I also tried to associate the files with languages that get formatted fine (tried both html and xml)

    "files.associations": {
        ".component": "xml",
        ".page": "xml",
        ".cmp": "xml"
    },

I keep getting an error in the bottom panel and Prettier Status does not appear in the page like it does when in a html or cls file. enter image description here

When I override the file extension, e.g. from .component to .component.html then it picks in up ok as html and formats the way I want to.

2
  • I love your settings for apex, but the formatting for SOQL inside apex causes a new line for each comma like SELECT id, /n name /n etc. Any ideas around this?
    – compski
    Apr 19, 2022 at 2:40
  • It shouldn't as long as the whole query fits 1 line. But then it does do that yea and I'd say "you'll get used to it" :-) I actually like it now. You can get around this only by setting an exception, but that's not really what they are for (stackoverflow.com/questions/66259151/…)
    – alesremta
    Apr 20, 2022 at 6:34

2 Answers 2

5

I believe I have found a solution. Inside of the vscode settings file the following line needs to be added:

"prettier.documentSelectors": ["**/*.page"]

Per prettier vscode documentation found here: https://github.com/prettier/prettier-vscode#prettierdocumentselectors

'A list of glob patterns to register Prettier formatter. Typically these will be in the format of **/*.abc to tell this extension to register itself as the formatter for all files with the abc extension. This feature can be useful when you have overrides set in your config file to map custom extensions to a parser.'

I believe this is just telling prettier that it should run for any file that has an extension of 'page' which would be any visual force page. Hope this helps.

0

So I found a problem, but not sure it's the problem. The file associations were wrong, they needed a ".", then the file Language changed to HTML in the bottom bar and the formatter was able to handle them.

"files.associations": {
    ".component": "xml",
    ".page": "xml",
    ".cmp": "xml"
},

But I guess that's not the desired way to be. The prettierrc.json overrides don't seem to have any effect at all and I'd rather VF files said their language was Visualforce.

But gets the job done

2
  • Have you found any other way? I cannot get the Visualforce formatting to work at all anymore - it still formats my classes but not VF.
    – Irene
    Mar 23, 2021 at 4:07
  • Hi, if I'm honest I've not really tried to change this. It still works for me the way I outlined in my answer with the file associations.
    – alesremta
    Jun 15, 2021 at 20:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .