vscode中使用插件prettier,html 代码乱换行问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vscode中使用插件prettier,html 代码乱换行问题相关的知识,希望对你有一定的参考价值。
参考技术A 案例如下:VSCode Prettier 没有格式化 PHP
【中文标题】VSCode Prettier 没有格式化 PHP【英文标题】:VSCode Prettier not formatting 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 方法取得了更好的成功。 【参考方案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.json
3
因此,对于 php 支持,您的 package.json 需要包含:
"devDependencies":
"@prettier/plugin-php": "0.14.3",
"prettier": "2.0.5"
【讨论】:
如果您只有.php
没有html 的文件,这可能有效。遗憾的是,我发现.php
带有 html 的文件不能用 prettier 格式化。
如果我正确阅读了您发现的那个错误,它将格式化 PHP 而不是 HTML。假设他们希望您使用的解决方案是将 PHP 与 HTML 分开。以上是关于vscode中使用插件prettier,html 代码乱换行问题的主要内容,如果未能解决你的问题,请参考以下文章