VSCode Prettier 不格式化 PHP
VSCode Prettier not formatting PHP
所以我已经用 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"]
}
Core prettier 不支持 PHP1,因此 VSCode/VSCodium 的插件也不支持。
幸运的是prettier的设计者似乎已经想到了这一点并实现了一个插件系统2.
根据prettier-vscode repo, all you need to do to use a plugin is to add it and prettier to your package.json
3
因此 php 支持您的 package.json 需要包含:
{
"devDependencies": {
"@prettier/plugin-php": "0.14.3",
"prettier": "2.0.5"
}
}
遗憾的是,php 文件 和 HTML 不支持:
https://github.com/prettier/plugin-php/issues/845
运行 如果您已经安装了 prettier,请在 VSC 终端中执行此操作
npm install --global prettier @prettier/plugin-php
我成功地格式化了 php 个文件,里面 html
所以我已经用 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"]
}
Core prettier 不支持 PHP1,因此 VSCode/VSCodium 的插件也不支持。 幸运的是prettier的设计者似乎已经想到了这一点并实现了一个插件系统2.
根据prettier-vscode repo, all you need to do to use a plugin is to add it and prettier to your package.json
3
因此 php 支持您的 package.json 需要包含:
{
"devDependencies": {
"@prettier/plugin-php": "0.14.3",
"prettier": "2.0.5"
}
}
遗憾的是,php 文件 和 HTML 不支持: https://github.com/prettier/plugin-php/issues/845
运行 如果您已经安装了 prettier,请在 VSC 终端中执行此操作
npm install --global prettier @prettier/plugin-php
我成功地格式化了 php 个文件,里面 html