VSCode Prettier not formatting PHP

Question

So I've set up vscode with Prettier, but it will not format .php files. .html files are working fine with Prettier. So when I have a .php with HTML code then it will be formatted differently, because I am using Beautify as last option.

How can I make Prettier automatically format .php files and the html code in .php the same as .html files?

settings.json

{
  "sync.autoDownload": true,
  "sync.autoUpload": true,
  "sync.forceDownload": true,
  "sync.forceUpload": true,
  "workbench.iconTheme": "vscode-icons",
  "sync.gist": "715bf022af486e449cae9313183b9a56",
  "sync.quietSync": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "window.zoomLevel": 0,
  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.ts": "vscode-typescript",
  "eslint.codeActionsOnSave.mode": "all",
  "workbench.colorTheme": "Atom One Dark",
  "beautify.language": {
    "html": ["php", "blade"]
  },
  // These are all my auto-save configs
  "editor.formatOnSave": true,
  // turn it off for JS and JSX, we will do this via eslint
  "[javascript]": {
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false
  },
  // tell the ESLint plugin to run on save
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // Optional BUT IMPORTANT: If you have the prettier extension enabled for other languages like CSS and HTML, turn it off for JS since we are doing it through Eslint already
  "prettier.disableLanguages": ["javascript", "javascriptreact"],
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe"
}

.eslintrc.json

{
  "extends": ["airbnb", "prettier", "prettier/react"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2020,
    // Can I remove these now?
    "ecmaFeatures": {
      "impliedStrict": true,
      "classes": true
    }
  },
  "env": {
    "browser": true,
    "node": true,
    "jquery": true,
    "jest": true
  },
  "rules": {
    "no-debugger": 0,
    "no-alert": 0,
    "no-await-in-loop": 0,
    "no-return-assign": ["error", "except-parens"],
    "no-restricted-syntax": [
      2,
      "ForInStatement",
      "LabeledStatement",
      "WithStatement"
    ],
    "no-unused-vars": [
      1,
      {
        "ignoreSiblings": true,
        "argsIgnorePattern": "res|next|^err"
      }
    ],
    "prefer-const": [
      "error",
      {
        "destructuring": "all"
      }
    ],
    "arrow-body-style": [2, "as-needed"],
    "no-unused-expressions": [
      2,
      {
        "allowTaggedTemplates": true
      }
    ],
    "no-param-reassign": [
      2,
      {
        "props": false
      }
    ],
    "no-console": 0,
    "import/prefer-default-export": 0,
    "import": 0,
    "func-names": 0,
    "space-before-function-paren": 0,
    "comma-dangle": 0,
    "max-len": 0,
    "import/extensions": 0,
    "no-underscore-dangle": 0,
    "consistent-return": 0,
    "react/display-name": 1,
    "react/no-array-index-key": 0,
    "react/react-in-jsx-scope": 0,
    "react/prefer-stateless-function": 0,
    "react/forbid-prop-types": 0,
    "react/no-unescaped-entities": 0,
    "jsx-a11y/accessible-emoji": 0,
    "react/require-default-props": 0,
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "radix": 0,
    "no-shadow": [
      2,
      {
        "hoist": "all",
        "allow": ["resolve", "reject", "done", "next", "err", "error"]
      }
    ],
    "quotes": [
      2,
      "single",
      {
        "avoidEscape": true,
        "allowTemplateLiterals": true
      }
    ],
    "prettier/prettier": [
      "error",
      {
        "trailingComma": "es5",
        "singleQuote": true,
        "printWidth": 80
      }
    ],
    "jsx-a11y/href-no-hash": "off",
    "jsx-a11y/anchor-is-valid": [
      "warn",
      {
        "aspects": ["invalidHref"]
      }
    ],
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  },
  "plugins": ["html", "prettier", "react-hooks"]
}

I use the Prettier: Format Selection method on isolated portions of mixed HTML/PHP with better success. — wp78de
– wp78de, Commented Aug 9, 2020 at 3:26
This question is similar to: Format code command for PHP/HTML in Visual Studio Code. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. — Henke
– Henke, Commented Mar 16 at 9:52

fredrik · Accepted Answer · 2020-08-03 11:20:50Z

37

+25

Core prettier does not support PHP¹, and thus neither does the plugin for VSCode/VSCodium. Luckily the designers of prettier seems to have thought of this and implemented a plugin system².

According to the prettier-vscode repo, all you need to do to use a plugin is to add it and prettier to your package.json³

So for php support your package.json would need to contain:

{
  "devDependencies": {
    "@prettier/plugin-php": "0.14.3",
    "prettier": "2.0.5"
  }
}

answered Aug 3, 2020 at 11:20

fredrik

6,6783 gold badges40 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Konstantin Schütte Over a year ago

This propably works if you only have .php files without html. Sadly i found out that .php files with html cannot be formatted with prettier.

fredrik Over a year ago

If I read that bug you found correctly, it will format the PHP but not the HTML. Suppose the solution they'd prefer you use is to separate your PHP from your HTML.

user7314165 Over a year ago

then its complete garbage....

InSync · Accepted Answer · 2023-05-28 20:53:12Z

23

Prettier for HTML, CSS, and JavaScript files

change your settings.json

  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // add this code 
  "[php]": {
      "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }

The settings use Intelephense as the formatter for PHP files and use Prettier as the formatter for all other files.

Now I use Shift + Alt + F to format the files like everybody else.

if you dont know ho to open setting.json lets see : I usually just press ctrl + , to get to settings and then click the "Open Settings (JSON)" icon that appears in the top right hand corner under the title bar Here's another option... VS Code: How to open settings.json file? How can I open Visual Studio Code's 'settings.json' file?

edited May 28, 2023 at 20:53

InSync

12.4k5 gold badges23 silver badges61 bronze badges

answered Dec 16, 2022 at 7:17

Zaky

2212 silver badges3 bronze badges

Naomak Over a year ago

If it isn't obvious.. install extension PHP Intelephense from Ben Mewburn. Confirm that it works.

John Over a year ago

Should one purchase license of PHP Intelephense? @Naomak

Naomak Over a year ago

At the time I tried it, I didn't buy anything. And from the plugin description it looks you still don't need to. However, I didn't test it in my actual VSCode setup.

InSync · Accepted Answer · 2023-05-28 20:52:57Z

12

run this in VSC terminal, if you already have prettier installed

npm install prettier @prettier/plugin-php

I managed to format php files with html inside

edited May 28, 2023 at 20:52

InSync

12.4k5 gold badges23 silver badges61 bronze badges

answered Mar 27, 2021 at 16:48

Tiago Pereira

1751 silver badge5 bronze badges

mercury Over a year ago

It does not work

Joe Moore Over a year ago

This works if you remove --global and install it locally.

Konstantin Schütte · Accepted Answer · 2020-08-04 13:55:37Z

9

Sadly there is no support for .php files with HTML: https://github.com/prettier/plugin-php/issues/845

answered Aug 4, 2020 at 13:55

Konstantin Schütte

1,0292 gold badges18 silver badges50 bronze badges

Comments

chantellebradley · Accepted Answer · 2025-04-05 13:05:24Z

1

This is what worked for me:

Install "PHP Intelephense" extension
Inside your ".vscode/settings.json" file, add:

"[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
}

What your settings.json file should look like:

{
  "editor.tabSize": 2,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client"
  }
}

Source: https://dev.to/ngobrolinit/prettier-for-php-file-formats-in-vscode-104o

answered Apr 5, 2025 at 13:05

chantellebradley

656 bronze badges

Comments

Alexis MASSON · Accepted Answer · 2022-12-06 09:42:57Z

0

I faced the same issue, and solved it disabling all my extensions : it happens that this extension

Aura Components for Visual Studio Code

was making my php code colors disapear. This extension, however, is part of the "official" Salesforce Extension Pack...

DO NOT INSTALL THIS EXTENSION DIRECTLY. Install the complete Salesforce Extension Pack instead.

If it could help, check your extensions !!

edited Dec 6, 2022 at 9:42

answered Sep 30, 2022 at 12:00

Alexis MASSON

1219 bronze badges

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

VSCode Prettier not formatting PHP

6 Answers 6

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

3 Comments

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related