vue3保存属性自动换行问题及解决
更新时间：2024年03月08日 16:08:59 作者：码农的1024
这篇文章主要介绍了vue3保存属性自动换行问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
背景：
通过vue-cli创建的项目（vue3/ts/eslint），设置了eslint保存自动修正，当template内容过长时属性就会自动换行，很烦人！
网上看了很多方法，大多是配置vetur，但是这个不支持vue3 ts,所以放弃了这个办法，最后通过安装prettier解决了问题。
因为每个人使用vscode的习惯不同，项目配置也不同，所以导致出现换行的问题可能会很多，希望能帮助到看到文章的你。
1、安装prettier依赖
yarn add prettier -D
新建 .prettierrc.js 文件
module.exports = {
printWidth: 400, // 这里设置大一些，内容多时也不会换行
tabWidth: 2, // 空格2
semi: false, // 结尾是否使用分号
singleQuote: true, // 使用单引号
disableLanguage: ['vue'],
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'none' // 函数末尾是否添加逗号，注意这里经常会跟eslint冲突
}
2、新建 .prettierignore 文件
/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*
3、设置vscode格式化配置
总结
大功告成！！！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
这篇文章主要介绍了vue项目配置 webpack-obfuscator 进行代码加密混淆,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-02
这篇文章主要介绍了vue如何解决空格和空行报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
vue中使用百度脑图kityminder-core二次开发的实现
这篇文章主要介绍了vue中使用百度脑图kityminder-core二次开发的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
在前端开发中,卡片遮罩层是一种常见的交互设计元素,用于强调某个区域或内容,并提供用户操作的入口,本文将带大家在 vue 中结合实际案例实现此功能,感兴趣的朋友一起看看吧2024-08-08
这篇文章主要介绍了vue如何监听页面缓存事件，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
vue修改proxyTable解决跨域请求,报404的问题及解决
这篇文章主要介绍了vue修改proxyTable解决跨域请求,报404的问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了Vue table新增、编辑，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了vue项目中Eslint校验代码报错的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue使用xe-utils函数库的具体方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
最新评论