【问题标题】:VSCode Prettier not formatting PHPVSCode Prettier 没有格式化 PHP
【发布时间】:2020-10-27 21:48:13
【问题描述】:

所以我用 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"]
}

【问题讨论】:

  • 我在混合 HTML/PHP 的孤立部分上使用 Prettier: Format Selection 方法取得了更好的成功。

标签: php html visual-studio-code eslint prettier


【解决方案1】:

如果你已经安装了 prettier,请在 VSC 终端中运行它

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

我设法用里面的html格式化php文件

【讨论】:

    【解决方案2】:

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

    【讨论】:

      【解决方案3】:

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

      根据prettier-vscode repo,你需要做的就是将它添加到你的package.json3

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

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

      【讨论】:

      • 如果您只有.php 没有html 的文件,这可能有效。遗憾的是,我发现.php 带有 html 的文件不能用 prettier 格式化。
      • 如果我正确阅读了您发现的那个错误,它将格式化 PHP 而不是 HTML。假设他们希望您使用的解决方案是将 PHP 与 HTML 分开。
      猜你喜欢
      • 2020-10-17
      • 1970-01-01
      • 2018-12-03
      • 2021-08-31
      • 1970-01-01
      • 2021-10-21
      • 2021-04-01
      • 1970-01-01
      • 2020-07-27
      相关资源
      最近更新 更多