VSCode Prettier 没有格式化 PHP

Question

所以我用 Prettier 设置了 vscode，但它不会格式化 .php 文件。.html 文件与 Prettier 一起工作正常。所以当我有一个带有 HTML 代码的 .php 时，它的格式会有所不同，因为我使用 Beautify 作为最后一个选项。

如何让 Prettier 自动格式化 .php 文件并且 .php 中的 html 代码与 .html 文件相同？

设置.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 不支持 PHP ¹，因此 VSCode/VSCodium 的插件也不支持。幸运的是，prettier 的设计者似乎已经想到了这一点，并实现了一个插件系统²。

根据prettier-vscode 存储库，使用插件所需要做的就是将它添加并更漂亮地添加到您的package.json³

因此，对于 php 支持，您的 package.json 需要包含：

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

Answer 2

HTML、CSS 和 JavaScript 文件更漂亮

更改你的settings.json

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

这些设置使用 Intelephense 作为 PHP 文件的格式化程序，并使用 Prettier 作为所有其他文件的格式化程序。

现在我像其他人一样使用Shift++Alt来F格式化文件。

如果您不知道如何打开setting.json，让我们看看：我通常只需按ctrl+,即可进入设置，然后单击标题栏下方右上角出现的“打开设置（JSON）”图标这是另一个选项。 .. VS Code：如何打开settings.json文件？如何打开 Visual Studio Code 的“settings.json”文件？

Answer 3

如果您已经安装了 Prettier，请在 VSC 终端中运行此命令

npm install prettier @prettier/plugin-php

我设法用 html 格式化 php 文件

Answer 4

遗憾的是，不支持带有 HTML的 .php 文件： https: //github.com/prettier/plugin-php/issues/845