VSCode Prettier无法格式化PHP

Question

VSCode Prettier无法格式化PHP

32

我已经安装了Prettier的vscode插件，但它不能格式化.php文件。.html文件可以正常使用Prettier进行格式化。所以当我有一个包含HTML代码的.php文件时，它将被以不同的格式进行格式化，因为我使用了Beautify作为最后的选择。

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

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

- dewey

我使用 Prettier: Format Selection 方法来更好地处理混合 HTML/PHP 的独立部分。 - wp78de

5个回答

11

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

npm install prettier @prettier/plugin-php

我成功地将带有 HTML 的 PHP 文件进行了格式化

- Tiago Pereira

11

无法正常工作。 - mercury

1

如果您删除 --global 并本地安装，则此方法适用。 - Joe Moore

11

美化 HTML、CSS 和 JavaScript 文件的 Prettier

更改您的 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'文件？

- Zaky

3

如果不是很明显的话，请从“Ben Mewburn”安装扩展程序“PHP Intelephense”。确认它能正常工作。 - Naomak

是否应该购买 PHP Intelephense 的许可证？@Naomak - undefined

当我尝试过它的时候，我没有购买任何东西。从插件的描述来看，似乎你仍然不需要购买。然而，我没有在我的实际VSCode设置中进行测试。 - undefined

7

遗憾的是，HTML格式的.php文件目前没有支持：https://github.com/prettier/plugin-php/issues/845

- dewey

0

我遇到了同样的问题，并通过禁用所有扩展程序来解决它：原来是这个扩展程序导致我的php代码颜色消失。然而，这个扩展程序是“官方”的Salesforce扩展包的一部分... 如果可以帮助的话，请检查您的扩展程序！

- Alexis MASSON

2

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- fredrik · Accepted Answer

Core prettier不支持PHP¹，因此VSCode/VSCodium的插件也不支持。幸运的是，prettier的设计者似乎已经想到了这一点，并实现了插件系统²。

根据prettier-vscode仓库的说法，您只需要将插件和prettier添加到您的package.json³中即可使用插件。

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

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