本文将为大家详细介绍“vscode下vue文件格式化的方法”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“vscode下vue文件格式化的方法”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧。
Visual Studio Code 是一个运行于 OS X,Windows和 Linux 之上的,针对于编写现代 web 和云应用的跨平台编辑器,它为开发者们提供了对多种编程语言的内置支持,并且正如 Microsoft 在Build 大会的 keynote 中所指出的,这款编辑器也会为这些语言都提供了丰富的代码补全和导航功能。
我相信基本上每一个在vscode上面码Vue代码的都会下载Vetur插件用来格式化等操作,今天Vetur更新了 0.14.2 版本,最近在使用的时候,感觉格式化总是出问题,去Vetur上面看了下,发现Vetur的配置做了下面的改动,看到几个社区都没有人说明,我就先说下,默认的格式化配置是:
{ "vetur.format.defaultFormatter.html": "prettyhtml", "vetur.format.defaultFormatter.css": "prettier", "vetur.format.defaultFormatter.postcss": "prettier", "vetur.format.defaultFormatter.scss": "prettier", "vetur.format.defaultFormatter.less": "prettier", "vetur.format.defaultFormatter.stylus": "stylus-supremacy", "vetur.format.defaultFormatter.js": "prettier", "vetur.format.defaultFormatter.ts": "prettier" }
不需要修改的话就不管他,我的建议是跟着使用默认的格式化工具就行
默认的html格式化工具变为prettyhtml
下面是原来使用js-beautify-html格式化的配置,现在官方已经不推荐了,我准备跟着变为prettyhtml
原来的:
"vetur.format.defaultFormatterOptions": { "js-beautify-html": { "wrap_line_length": 160, "wrap_attributes": "auto", "end_with_newline": false } },
新的配置:
"vetur.format.defaultFormatterOptions": { "prettyhtml": { // 单行超过160个长度的时候开始换行显示各种参数和事件 "printWidth": 160 } },
关于prettier的设置规则改变
1.项目的根目录不能有 .prettierrc 、 .prettierrc.js 等配置文件,否则会覆盖掉vscode上面的配置
2.新的配置项写法变化: 原来只能设置全局js的配置的:
"prettier.singleQuote": true, "prettier.disableLanguages": [ "vue" ]
可以设置vue文件里面的,和js文件不冲突:
// js文件 "prettier.singleQuote": true, "prettier.disableLanguages": [ "vue" ], // vue文件里面的js "vetur.format.defaultFormatterOptions": { "prettier": { "singleQuote": true, "proseWrap": "never", "printWidth": 130 } },
和html的格式化写在一起就是:
"vetur.format.defaultFormatterOptions": { "prettyhtml": { "printWidth": 160 }, "prettier": { "singleQuote": true, "proseWrap": "never", "printWidth": 130 } },
如果你能读到这里,小编希望你对“vscode下vue文件格式化的方法”这一关键问题有了从实践层面最深刻的体会,具体使用情况还需要大家自己动手实践使用过才能领会,如果想阅读更多相关内容的文章,欢迎关注创新互联行业资讯频道!
网页名称:vscode下vue文件格式化的方法-创新互联
当前URL:https://www.cdcxhl.com/article0/djdsoo.html
成都网站建设公司_创新互联,为您提供营销型网站建设、标签优化、关键词优化、面包屑导航、Google、网站营销
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联