VSCode Prettier 不格式化 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

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

Answer 3

run this in VSC terminal, if u alreay have prettier installed

npm install --global prettier @prettier/plugin-php

I managed to format php files with html inside

Answer 4

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

Answer 5

Its Work !

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 6

Was having trouble with this exact issue. The culprit in my case was a misconfigured setting in the settings.json file (on mac, the settings config file is located in ~/Library/Application Support/Code/User)

The settings.json config file required the correct property "php.validate.executablePath". The value to be set to this property may vary depending on the PHP version you're using.

To get the correct path of your PHP executable on a mac, open a new terminal window (Cmd + Spacebar and write terminal) and type which php . The returned value should match the config property value.

settings.json example:

{
    // your other settings
    "php.validate.executablePath": "/Applications/MAMP/bin/php/php7.3.8/bin/php"
}