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