vue3保存屬性自動換行問題及解決
更新時間：2024年03月08日 16:08:59 作者：碼農(nóng)的1024
這篇文章主要介紹了vue3保存屬性自動換行問題及解決方案,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景：
通過vue-cli創(chuàng)建的項(xiàng)目（vue3/ts/eslint），設(shè)置了eslint保存自動修正，當(dāng)template內(nèi)容過長時屬性就會自動換行，很煩人！
網(wǎng)上看了很多方法，大多是配置vetur，但是這個不支持vue3 ts,所以放棄了這個辦法，最后通過安裝prettier解決了問題。
因?yàn)槊總€人使用vscode的習(xí)慣不同，項(xiàng)目配置也不同，所以導(dǎo)致出現(xiàn)換行的問題可能會很多，希望能幫助到看到文章的你。
1、安裝prettier依賴
yarn add prettier -D
新建 .prettierrc.js 文件
module.exports = {
printWidth: 400, // 這里設(shè)置大一些，內(nèi)容多時也不會換行
tabWidth: 2, // 空格2
semi: false, // 結(jié)尾是否使用分號
singleQuote: true, // 使用單引號
disableLanguage: ['vue'],
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'none' // 函數(shù)末尾是否添加逗號，注意這里經(jīng)常會跟eslint沖突
}
2、新建 .prettierignore 文件
/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*
3、設(shè)置vscode格式化配置
總結(jié)
大功告成?。?！
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
element中datepicker日期選擇器選擇周一到周日并實(shí)現(xiàn)上一周和下一周的方法
最近項(xiàng)目中需要用到日期選擇器,所以這里給大家總結(jié)下,這篇文章主要給大家介紹了關(guān)于element中datepicker日期選擇器選擇周一到周日并實(shí)現(xiàn)上一周和下一周的相關(guān)資料,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了vue父子組件之間如何通過v-model傳值的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2026-03-03
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)樹形菜單效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-03-03
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)時間倒計(jì)時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue實(shí)現(xiàn)在data里引入相對路徑，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
下面小編就為大家分享一篇解決vue頁面刷新或者后退參數(shù)丟失的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue3使用TypeIt實(shí)現(xiàn)文字打字機(jī)效果的代碼示例
在現(xiàn)代網(wǎng)頁設(shè)計(jì)中,文字打字機(jī)效果是一種非常流行的動畫效果,能夠吸引用戶的注意力并提升用戶體驗(yàn),本文將介紹如何在 Vue 3 中使用 TypeIt 庫實(shí)現(xiàn)文字打字機(jī)效果,并分享一些實(shí)用的技巧和示例,需要的朋友可以參考下2025-01-01
Vue.js：使用Vue-Router 2實(shí)現(xiàn)路由功能介紹
本篇文章主要介紹了Vue.js：使用Vue-Router 2實(shí)現(xiàn)路由功能介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明
這篇文章主要介紹了vue-cil之a(chǎn)xios的二次封裝與proxy反向代理使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04