I've been using VSC for ages now and have had the apex Prettier plugin installed and working, but it is no longer formatting my Visualforce pages (it's still doing it for apex classes).

I now get this message showing up: enter image description here

This is what displays in the right corner for the VF page: enter image description here

but for apex code it displays this: enter image description here

I had a look at this page, but that doesn't work for me and doesn't seem to be the right solution? Can anyone help me?

The .prettierrc file:

  "trailingComma": "none",
  "overrides": [
      "files": "**/lwc/**/*.html",
      "options": { "parser": "lwc" }
      "files": "*.{cmp,page,component}",
      "options": { "parser": "html" }

and my package.json:

  "name": "salesforce-app",
  "private": true,
  "version": "1.0.0",
  "description": "Salesforce App",
  "scripts": {
    "lint": "npm run lint:lwc && npm run lint:aura",
    "lint:aura": "eslint **/aura/**",
    "lint:lwc": "eslint **/lwc/**",
    "test": "npm run test:unit",
    "test:unit": "sfdx-lwc-jest",
    "test:unit:watch": "sfdx-lwc-jest --watch",
    "test:unit:debug": "sfdx-lwc-jest --debug",
    "test:unit:coverage": "sfdx-lwc-jest --coverage",
    "prettier": "prettier --write \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\"",
    "prettier:verify": "prettier --list-different \"**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}\""
  "devDependencies": {
    "@prettier/plugin-xml": "^0.12.0",
    "@salesforce/eslint-config-lwc": "^0.7.0",
    "@salesforce/eslint-plugin-aura": "^1.4.0",
    "@salesforce/sfdx-lwc-jest": "^0.9.2",
    "eslint": "^7.6.0",
    "eslint-config-prettier": "^6.11.0",
    "husky": "^4.2.1",
    "lint-staged": "^10.0.7",
    "prettier": "^2.2.1",
    "prettier-plugin-apex": "^1.8.0"
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
  "lint-staged": {
    "**/*.{cls,cmp,component,css,html,js,json,md,page,trigger,xml,yaml,yml}": [
      "prettier --write"
    "**/{aura|lwc}/**": [
  "main": "index.js",
  "author": "",
  "license": "ISC"

UPDATE: The workaround I'm having to use is to manually format a VF page by entering the below into the TERMINAL tab, but I have to do this for each VF page/cmp I edit:

yarn prettier --write salesforce/src/main/default/pages/AccountHolderRules.page
  • Can you share the packge.json and .prettierrc – Nagendra Singh Mar 23 at 5:32
  • I've added both files above. – Irene Mar 23 at 19:52

There is another plugin called 'Beautify'. You can add that from Extensions. After installing that relaunch the VS Code. Then,

  1. Open your file

  2. Press ctrl+shift+p

  3. Type 'Beautify File' in the search box and select it

  4. Select 'HTML' from out of the three options which are getting populated

  • Does that format in the same way as Prettier? – Irene Mar 23 at 19:53
  • @Irene I have not used pretier before. Hence I am not too sure about that. Generally I am using this plugin to format my code – Ruklani Attanyake Mar 23 at 20:04
  • Okay - I've just tested and it formats differently. Similar, but different, and it means I can't use it because the code validation prior to our deploy process checks that the formatting is Prettier. – Irene Mar 23 at 20:12
  • @Irene oh okay. Got it – Ruklani Attanyake Mar 23 at 20:23

Not the answer you're looking for? Browse other questions tagged or ask your own question.