VSCode的prettier插件怎么格式化html文件才好

VSCode的prettier插件可以很方便的帮助我们格式化文档，但是对于HTML文件的格式化并不友好，每次我使用prettier格式化之后，html标签都会换行，这样html标签之间的结构就不是很清楚了，看起来很费劲。
格式化之后就成了这样：

搜索了很久怎样让prettier格式化html时不换行，但都没有结果，现在发现可以通过设置prettier超过最大宽度换行的值来调整是否换行，效果不错。
打开VSCode的设置界面，设置prettier插件的Print Width值：

此时格式化之后，结构就清晰多了：

当然，具体想格式化成什么样子，还需要自己配置，下面是prettier插件的一些配置参数：

{// 使能每一种语言默认格式化规则"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},/*  prettier的配置 */"prettier.printWidth": 100, // 超过最大值换行"prettier.tabWidth": 4, // 缩进字节数"prettier.useTabs": false, // 缩进不使用tab，使用空格"prettier.semi": true, // 句尾添加分号"prettier.singleQuote": true, // 使用单引号代替双引号"prettier.proseWrap": "preserve", // 默认值。因为使用了一些折行敏感型的渲染器（如GitHub comment）而按照markdown文本样式进行折行"prettier.arrowParens": "avoid", //  (x) => {} 箭头函数参数只有一个时是否要有小括号。avoid：省略括号"prettier.bracketSpacing": true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }""prettier.disableLanguages": ["vue"], // 不格式化vue文件，vue文件的格式化单独设置"prettier.endOfLine": "auto", // 结尾是 \n \r \n\r auto"prettier.eslintIntegration": false, //不让prettier使用eslint的代码格式进行校验"prettier.htmlWhitespaceSensitivity": "ignore","prettier.ignorePath": ".prettierignore", // 不使用prettier格式化的文件填写在项目的.prettierignore文件中"prettier.jsxBracketSameLine": false, // 在jsx中把'>' 是否单独放一行"prettier.jsxSingleQuote": false, // 在jsx中使用单引号代替双引号"prettier.parser": "babylon", // 格式化的解析器，默认是babylon"prettier.requireConfig": false, // Require a 'prettierconfig' to format prettier"prettier.stylelintIntegration": false, //不让prettier使用stylelint的代码格式进行校验"prettier.trailingComma": "es5", // 在对象或数组最后一个元素后面是否加逗号（在ES5中加尾逗号）"prettier.tslintIntegration": false // 不让prettier使用tslint的代码格式进行校验
}

格式化vue代码配置

{"[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
}

Vetur结合prettier使用，单独对 Vetur 的 prettier 进行配置，如下：

{"vetur.format.defaultFormatter.html": "prettier","vetur.format.defaultFormatter.js": "prettier","vetur.format.defaultFormatter.less": "prettier","vetur.format.defaultFormatterOptions": {"prettier": {"printWidth": 160,"singleQuote": true, // 使用单引号"semi": true, // 末尾使用分号"tabWidth": 4,"arrowParens": "avoid","bracketSpacing": true,"proseWrap": "preserve" // 代码超出是否要换行 preserve保留}},
}

VSCode的prettier插件怎么格式化html文件才好相关推荐

VSCode - setting.json配置 - Prettier、Vetur格式化和ESLint检查
vscode 前端最佳插件配置格式化代码时用到的插件 ESLint(代码规范和错误检查工具,控制代码质量) Prettier(代码格式化工具) Vetur(识别 vue 文件) EditorConf ...
php 格式化js文件,vscode编辑器在php文件中的html/js格式化解决方案
本人使用laravel框架,因为页面很多都是用php文件渲染的,所以很多html和js都是在php文件中,用prettier插件不能识别php文件中的html内容,导致无法执行自动格式化代码,如果要我 ...
VSCode中使用 eslint+prettier完成代码格式化以及自动化整理
如果在一个大型项目中会有多个人一起去开发,为了使每个人写的代码格式都保持一致,就需要借助软件去帮我们保存文件的时候,自己格式化代码配置 ESLInt.js vscode软件下载一个ESLint,在到 ...
js 格式化prettier配置_prettier 格式化插件
prettier 格式化插件 prettier代码风格统一的号插件, 可以在多个编辑器上面安装对应的插件,通过简单的配置,让编辑器自动帮我们修改代码格式.可以支持JS/JSX/TS/Flow/JSON ...
VScode 插件中 package.json 文件字段详解
一.package.json文件内容 {// 插件的名字,应全部小写,不能有空格: string"name": "my-vscode-plugin",// 版本 ...
vscode格式化proto文件
目录安装vscode-proto3插件安装clang-format 可执行程序格式化代码另一种格式化方式安装vscode-proto3插件在应用商店中安装vscode-proto3插件安 ...
解决vscode格式化vue文件出现的问题
解决vscode格式化vue文件出现的问题参考文章: (1)解决vscode格式化vue文件出现的问题 (2)https://www.cnblogs.com/weiqinl/p/8871826.ht ...
Notepad++ 安装XML Tools插件格式化XML文件
1. 打开Notepad++ 软件 2. 选择插件,选择"插件管理" 3. 搜索 XML Tools,找到该插件后,勾选该文件,点击"安装" 在Notepad+ ...
vsCode插件-------Beautify(格式化代码)
安装插件配置settings.json文件设置–>插件–>Beautify config->settings.json /// settings.json"editor ...

VSCode的prettier插件怎么格式化html文件才好

VSCode的prettier插件怎么格式化html文件才好相关推荐

最新文章

热门文章