vue3保存屬性自動換行問題及解決
更新時間：2024年03月08日 16:08:59 作者：碼農(nóng)的1024
這篇文章主要介紹了vue3保存屬性自動換行問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
背景：
通過vue-cli創(chuàng)建的項目（vue3/ts/eslint），設(shè)置了eslint保存自動修正，當(dāng)template內(nèi)容過長時屬性就會自動換行，很煩人！
網(wǎng)上看了很多方法，大多是配置vetur，但是這個不支持vue3 ts,所以放棄了這個辦法，最后通過安裝prettier解決了問題。
因為每個人使用vscode的習(xí)慣不同，項目配置也不同，所以導(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)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中l(wèi)ocalStorage那些你不知道的知識分享
在Vue.js中，?Vuex是一個強大的狀態(tài)管理工具，而localStorage則是一種用于存儲和獲取本地數(shù)據(jù)的機制，雖然這兩個東西都可以用來存儲數(shù)據(jù)，但它們之間還是有很大的區(qū)別，本文就來簡單說說吧2023-05-05
將 unix 時間戳轉(zhuǎn)換為日期時間和使用日期時間轉(zhuǎn)換為 unix 時間戳,在項目中常常用到,其中vue中的moment庫很是方便,下面小編就來為大家講講具體使用吧2023-09-09
vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點
這篇文章主要介紹了vue3 響應(yīng)式對象如何實現(xiàn)方法的不同點，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
VUE頁面中通過雙擊實現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
這篇文章主要介紹了VUE頁面中通過雙擊實現(xiàn)復(fù)制表格中內(nèi)容，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-06-06
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)上傳圖片添加水印的升級版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
最近工作中遇到了報錯,現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報錯的簡單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue 動態(tài)改變靜態(tài)圖片以及請求網(wǎng)絡(luò)圖片的實現(xiàn)方法
下面小編就為大家分享一篇vue 動態(tài)改變靜態(tài)圖片以及請求網(wǎng)絡(luò)圖片的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02