vue3項目如何使用prettier格式化代碼
更新時間：2023年10月20日 10:24:09 作者：會點php的前端小渣渣
這篇文章主要介紹了vue3項目如何使用prettier格式化代碼問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3使用prettier格式化代碼
因為開了新項目，所以用了vue3 ，并且選了Prettier
1.先在 vscode安裝
Prettier - Code formatter
2.在項目根目錄創(chuàng)建
.prettierrc.js
module.exports = {
// 一行最多 100 字符
printWidth: 100,
// 使用 2 個空格縮進(jìn)
tabWidth: 2,
// 不使用縮進(jìn)符，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾不需要逗號
trailingComma: 'all',
// 大括號內(nèi)的首尾需要空格
bracketSpacing: true,
// jsx 標(biāo)簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數(shù)，只有一個參數(shù)的時候，也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內(nèi)容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認(rèn)的折行標(biāo)準(zhǔn)
proseWrap: 'preserve',
// 根據(jù)顯示樣式?jīng)Q定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'auto',
};3.在vscode里面點擊鼠標(biāo)右鍵
格式化代碼就有效果了（選擇Prettier - Code formatter這項）
最后我附上 我vscode插件列表
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue中如何點擊獲取當(dāng)前元素下標(biāo)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue 單元測試的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要給大家介紹了關(guān)于vue-router路由懶加載及實現(xiàn)的3種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-02-02
elementui實現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動的示例代碼
多級聯(lián)動是一種常見的交互方式,本文主要介紹了elementui實現(xiàn)標(biāo)簽頁與菜單欄聯(lián)動的示例代碼,具有一定的參考價值,感興趣的可以了解一下2024-06-06
vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex介紹
最近在研究Vuex2.0,搞了好幾天終于有點頭緒了。下面這篇文章主要給大家介紹了關(guān)于vue2.0學(xué)習(xí)之a(chǎn)xios的封裝與vuex的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-05-05
這篇文章主要介紹了vue3如何實現(xiàn)變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11
解決vue項目,npm run build后,報路徑錯的問題
這篇文章主要介紹了解決vue項目,npm run build后,報路徑錯的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
diff算法的本質(zhì)是找出兩個對象之間的差異,目的是盡可能復(fù)用節(jié)點。,下面這篇文章主要給大家介紹了關(guān)于Vue中diff算法的相關(guān)資料,需要的朋友可以參考下2021-09-09
vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套）
這篇文章主要介紹了vue elementUI 表單校驗的實現(xiàn)代碼（多層嵌套），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11