vue3保存屬性自動(dòng)換行問題及解決
更新時(shí)間：2024年03月08日 16:08:59 作者：碼農(nóng)的1024
這篇文章主要介紹了vue3保存屬性自動(dòng)換行問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
背景：
通過vue-cli創(chuàng)建的項(xiàng)目（vue3/ts/eslint），設(shè)置了eslint保存自動(dòng)修正，當(dāng)template內(nèi)容過長(zhǎng)時(shí)屬性就會(huì)自動(dòng)換行，很煩人！
網(wǎng)上看了很多方法，大多是配置vetur，但是這個(gè)不支持vue3 ts,所以放棄了這個(gè)辦法，最后通過安裝prettier解決了問題。
因?yàn)槊總€(gè)人使用vscode的習(xí)慣不同，項(xiàng)目配置也不同，所以導(dǎo)致出現(xiàn)換行的問題可能會(huì)很多，希望能幫助到看到文章的你。
1、安裝prettier依賴
yarn add prettier -D
新建 .prettierrc.js 文件
module.exports = {
printWidth: 400, // 這里設(shè)置大一些，內(nèi)容多時(shí)也不會(huì)換行
tabWidth: 2, // 空格2
semi: false, // 結(jié)尾是否使用分號(hào)
singleQuote: true, // 使用單引號(hào)
disableLanguage: ['vue'],
htmlWhitespaceSensitivity: 'ignore',
trailingComma: 'none' // 函數(shù)末尾是否添加逗號(hào)，注意這里經(jīng)常會(huì)跟eslint沖突
}
2、新建 .prettierignore 文件
/dist/* .local .output.js /node_modules/** **/*.svg **/*.sh /public/*
3、設(shè)置vscode格式化配置
總結(jié)
大功告成！?。?/p>
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue中l(wèi)ocalStorage那些你不知道的知識(shí)分享
在Vue.js中，?Vuex是一個(gè)強(qiáng)大的狀態(tài)管理工具，而localStorage則是一種用于存儲(chǔ)和獲取本地?cái)?shù)據(jù)的機(jī)制，雖然這兩個(gè)東西都可以用來(lái)存儲(chǔ)數(shù)據(jù)，但它們之間還是有很大的區(qū)別，本文就來(lái)簡(jiǎn)單說(shuō)說(shuō)吧2023-05-05
將 unix 時(shí)間戳轉(zhuǎn)換為日期時(shí)間和使用日期時(shí)間轉(zhuǎn)換為 unix 時(shí)間戳,在項(xiàng)目中常常用到,其中vue中的moment庫(kù)很是方便,下面小編就來(lái)為大家講講具體使用吧2023-09-09
vue3 響應(yīng)式對(duì)象如何實(shí)現(xiàn)方法的不同點(diǎn)
這篇文章主要介紹了vue3 響應(yīng)式對(duì)象如何實(shí)現(xiàn)方法的不同點(diǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
VUE頁(yè)面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容的示例代碼
這篇文章主要介紹了VUE頁(yè)面中通過雙擊實(shí)現(xiàn)復(fù)制表格中內(nèi)容，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式
這篇文章主要介紹了vue自定義指令添加跟隨鼠標(biāo)光標(biāo)提示框v-tooltip方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決
這篇文章主要介紹了Vue使用emit傳參,父組件接收不到數(shù)據(jù)的問題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
這篇文章主要介紹了Element-ui upload上傳文件限制的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式
最近工作中遇到了報(bào)錯(cuò),現(xiàn)在將解決的辦法分享給大家,下面這篇文章主要給大家介紹了關(guān)于npm安裝vue@cli報(bào)錯(cuò)的簡(jiǎn)單處理方式,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
vue 動(dòng)態(tài)改變靜態(tài)圖片以及請(qǐng)求網(wǎng)絡(luò)圖片的實(shí)現(xiàn)方法
下面小編就為大家分享一篇vue 動(dòng)態(tài)改變靜態(tài)圖片以及請(qǐng)求網(wǎng)絡(luò)圖片的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2018-02-02