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 個空格縮進
tabWidth: 2,
// 不使用縮進符，而使用空格
useTabs: false,
// 行尾需要有分號
semi: true,
// 使用單引號
singleQuote: true,
// 對象的 key 僅在必要時用引號
quoteProps: 'as-needed',
// jsx 不使用單引號，而使用雙引號
jsxSingleQuote: false,
// 末尾不需要逗號
trailingComma: 'all',
// 大括號內的首尾需要空格
bracketSpacing: true,
// jsx 標簽的反尖括號需要換行
jsxBracketSameLine: false,
// 箭頭函數，只有一個參數的時候，也需要括號
arrowParens: 'always',
// 每個文件格式化的范圍是文件的全部內容
rangeStart: 0,
rangeEnd: Infinity,
// 不需要寫文件開頭的 @prettier
requirePragma: false,
// 不需要自動在文件開頭插入 @prettier
insertPragma: false,
// 使用默認的折行標準
proseWrap: 'preserve',
// 根據顯示樣式決定 html 要不要折行
htmlWhitespaceSensitivity: 'css',
// 換行符使用 lf
endOfLine: 'auto',
};3.在vscode里面點擊鼠標右鍵
格式化代碼就有效果了（選擇Prettier - Code formatter這項）
最后我附上 我vscode插件列表
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本文詳細講解了Vue導入excel表,導入失敗的數據自動下載的方法，文中通過示例代碼介紹的非常詳細。對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要為大家詳細介紹了springboot+VUE實現登錄注冊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-05-05
Vue項目中使用better-scroll實現一個輪播圖自動播放功能
better-scroll是一個非常非常強大的第三方庫 在移動端利用這個庫 不僅可以實現一個非常類似原生ScrollView的效果 也可以實現一個輪播圖的效果。這篇文章主要介紹了Vue項目中使用better-scroll實現一個輪播圖,需要的朋友可以參考下2018-12-12
這篇文章主要為大家詳細介紹了vue實現調取手機攝像頭和相冊功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
寫頁面的時候都會用到一些導航欄、點擊不同的部分切換不同的頁面,下面這篇文章主要給大家介紹了關于Vue3點擊側邊導航欄完成切換頁面內組件的相關資料,需要的朋友可以參考下2023-06-06
這篇文章主要介紹了vue3項目通過Nginx部署至服務器的實現方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
利用Vue.js+Node.js+MongoDB實現一個博客系統(tǒng)（附源碼）
本文主要介紹了利用Vue.js+Node.js+MongoDB實現一個博客系統(tǒng)，這個博客使用Vue做前端框架，Node+express做后端，數據庫使用的是MongoDB。實現了用戶注冊、用戶登錄、博客管理、文章編輯、標簽分類等功能，需要的朋友可以參考學習。2017-04-04
在做數據大屏開發(fā)的過程中,經常出現需要對列表進行自動滾動的需求,所以本文就來為大家介紹一下如何利用vue封裝一個自動循環(huán)滾動的列表吧2023-09-09
本文主要介紹了vue全局接入百度地圖的實現示例，文中根據實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue3中vite使用sass的配置方法,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01