【webstorm】vue前端專案配置儲存時自動格式化程式碼 - prettier

清清飞扬發表於2024-04-04
WebORMVue前端

1. 在專案根目錄下放一個配置檔案：.prettierrc (風格僅供參考)

{
	"printWidth": 220,
	"tabWidth": 4,
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"quoteProps": "as-needed",
	"trailingComma": "none",
	"bracketSpacing": true,
	"jsxBracketSameLine": false,
	"arrowParens": "avoid",
	"endOfLine": "lf",
	"jsxSingleQuote": false,
	"vueIndentScriptAndStyle": false
}

　2. 全域性安裝prettier外掛

npm install -g -D prettier

　　3. 在webstorm中配置儲存時自動格式化

prettier外掛具體配置：

完成了以上配置之後，就可以在.vue/.js 中修改下檔案內容，再點選儲存試試效果了！風格是不是非常統一！

統一的程式碼風格是為了規範不同人員之間的程式碼差異，選擇一種相對來說大家都能接受的風格，也為了更好的引導新人，養成良好習慣！

不過，照我來說，帶來的最大好處就是減少不必要的程式碼衝突，不會因為大家多加一個空格導致程式碼衝突！

習慣是慢慢養成的，需要你我的堅持與配合！

　

相關文章