vue3項(xiàng)目如何使用prettier格式化代碼
更新時(shí)間：2023年10月20日 10:24:09 作者：會(huì)點(diǎn)php的前端小渣渣
這篇文章主要介紹了vue3項(xiàng)目如何使用prettier格式化代碼問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3使用prettier格式化代碼
因?yàn)殚_(kāi)了新項(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,
// 不需要寫(xiě)文件開(kāi)頭的 @prettier
requirePragma: false,
// 不需要自動(dòng)在文件開(kāi)頭插入 @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導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動(dòng)下載
本文詳細(xì)講解了Vue導(dǎo)入excel表,導(dǎo)入失敗的數(shù)據(jù)自動(dòng)下載的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-11-11
springboot+VUE實(shí)現(xiàn)登錄注冊(cè)
這篇文章主要為大家詳細(xì)介紹了springboot+VUE實(shí)現(xiàn)登錄注冊(cè)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖自動(dòng)播放功能
better-scroll是一個(gè)非常非常強(qiáng)大的第三方庫(kù) 在移動(dòng)端利用這個(gè)庫(kù) 不僅可以實(shí)現(xiàn)一個(gè)非常類似原生ScrollView的效果 也可以實(shí)現(xiàn)一個(gè)輪播圖的效果。這篇文章主要介紹了Vue項(xiàng)目中使用better-scroll實(shí)現(xiàn)一個(gè)輪播圖,需要的朋友可以參考下2018-12-12
vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)調(diào)取手機(jī)攝像頭和相冊(cè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件全過(guò)程(WEB)
寫(xiě)頁(yè)面的時(shí)候都會(huì)用到一些導(dǎo)航欄、點(diǎn)擊不同的部分切換不同的頁(yè)面,下面這篇文章主要給大家介紹了關(guān)于Vue3點(diǎn)擊側(cè)邊導(dǎo)航欄完成切換頁(yè)面內(nèi)組件的相關(guān)資料,需要的朋友可以參考下2023-06-06
vue3項(xiàng)目如何通過(guò)Nginx部署至服務(wù)器
這篇文章主要介紹了vue3項(xiàng)目通過(guò)Nginx部署至服務(wù)器的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實(shí)現(xiàn)一個(gè)博客系統(tǒng)，這個(gè)博客使用Vue做前端框架，Node+express做后端，數(shù)據(jù)庫(kù)使用的是MongoDB。實(shí)現(xiàn)了用戶注冊(cè)、用戶登錄、博客管理、文章編輯、標(biāo)簽分類等功能，需要的朋友可以參考學(xué)習(xí)。2017-04-04
vue封裝實(shí)現(xiàn)自動(dòng)循環(huán)滾動(dòng)的列表
在做數(shù)據(jù)大屏開(kāi)發(fā)的過(guò)程中,經(jīng)常出現(xiàn)需要對(duì)列表進(jìn)行自動(dòng)滾動(dòng)的需求,所以本文就來(lái)為大家介紹一下如何利用vue封裝一個(gè)自動(dòng)循環(huán)滾動(dòng)的列表吧2023-09-09
本文主要介紹了vue全局接入百度地圖的實(shí)現(xiàn)示例，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01