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"]
}

Answer 1

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"
  }
}

Answer 2

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

Answer 3

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?

Answer 4

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

Answer 5

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 !!