站長資訊網本篇文章扒拉一下vscode Prettier的選項，總結分享16個讓你的代碼變漂亮的屬性，希望對大家有所幫助！
做前端開發很久了，但是每次都依賴腳手架或開源的代碼模版的統一風格來編寫代碼，碰上不喜歡的又搞不清楚怎么調整，百度幾下都沒搞好，只能將就著寫，這次就專門扒拉一下Prettier的選項，一次性搞懂這個在代碼格式化場景使用量相當大（20,533,053 安裝量）的工具。【推薦學習：《vscode入門教程》】
Prettier介紹和使用配置：
???? Prettier是一款以較少的配置來支持多種編程語言進行代碼格式化的工具，并且在大多數常用的編輯器都有集成和提供的插件。
???? 我們在VSCode中通過文末提供的插件地址或在商店搜索即可，找下載量最大的就對了。安裝完插件后我們可以通過在項目根目錄配置.prettierrc文件來配置一份符合我們自定義的風格，文件內容推薦使用JSON格式組合。當然也支持其他的一個配置文件命名和書寫方式，文末也提供了原文檔對應的地址，記得要將默認的格式化程序選擇為Prettier。
???? 在這還推薦在項目下配置VSCode中保存時格式化代碼，并在窗口狀態變化是自動保存，因為過多的保存可能會造成不必要的麻煩。
屬性介紹：
Print Width：
- 介紹和說明：代碼行的寬度，通用建議每行最大長度建議為100/120，但最好不超過這兩個數。
- API：
printWidth - 參數類型：int
- 默認值：80
Tab Width：
- 介紹和說明：指定每次縮進的空格數。
- API：
tabWidth - 參數類型：int
- 默認值：2
Tabs：
- 介紹和說明：是否用制表符代替空格執行縮進。
- API：
useTabs - 參數類型：bool
- 默認值：false
Semicolons：
- 介紹和說明：是否在代碼語句結尾添加分號。
- API：
semi - 參數類型：bool
- 默認值：true
Quotes
- 介紹和說明：是否使用單引號，JSX單獨設置。
- API：
singleQuote - 參數類型：bool
- 默認值：false
JSX Quotes
- 介紹和說明：是否在JSX中使用單引號。
- API：
jsxSingleQuote - 參數類型：bool
- 默認值：false
Trailing Commas
- 介紹和說明：在多行以逗號分割的句法中盡可能補充尾行逗號。
- API：
trailingComma - 參數類型：es5 / none / all
- 默認值：es5
| es5 | 在ES5中進行補充，如（對象，數組） |
|---|---|
| none | 不進行補充 |
| all | 盡可能補充，包括函數參數、函數調用，支持TS |
Bracket Spacing
- 介紹和說明：是否在對象屬性與大括號之間填充空格。
- API：
bracketSpacing - 參數類型：bool
- 默認值：true
Bracket Line
- 介紹和說明：開始標簽的右尖括號是否跟隨在最后一行屬性末尾。
- 前提：非自結束標簽、HTML多行屬性（HTML, JSX, Vue, Angular）
- API：
bracketSameLine - 參數類型：bool
- 默認值：false
Arrow Function Parentheses
- 介紹和說明：單個參數的箭頭函數使用括號。
- API：
arrowParens - 參數類型：always / avoid
- 默認值：always
Require Pragma
- 介紹和說明：是否僅格式化文件開始位置存在特殊注釋的代碼。
- API：
requirePragma - 參數類型：bool
- 默認值：false
/** * @prettier */ or /** * @format */
Insert Pragma
- 介紹和說明：是否在文件插入標記表明該文件已被格式化處理過了。
- API：
insertPragma - 參數類型：bool
- 默認值：false
Vue files script and style tags indentation
- 介紹和說明：是否在Vue文件中對代碼和標簽進行縮進，script和style部分。
- API：
vueIndentScriptAndStyle - 參數類型：bool
- 默認值：false
End of Line
- 介紹和說明：設置換行風格，避免不同操作系統造成的大量代碼diff。
- API：
endOfLine - 參數類型：lf / crlf / cr / auto
- 默認值：lf
Embedded Language Formatting
- 介紹和說明：是否格式化一些文件中被嵌入的代碼片段的風格，如果插件可以識別。
- API：
embeddedLanguageFormatting - 參數類型：off / auto
- 默認值：auto
Single Attribute Per Line
- 介紹和說明：在Html，Vue，JSX中是否強制每條屬性占用一行。
- API：
singleAttributePerLine - 參數類型：bool
- 默認值：false
寫在最后：
整理完了，抓緊收藏起來吧，下次忘了屬性怎么用的時候就翻這篇文章就好了，到此4月份的更文挑戰也暫告一段落，感謝jym點贊鼓勵。
鏈接整理：
-
Prettier：https://prettier.io/
-
Prettier（vscode插件）：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
-
配置文件：https://prettier.io/docs/en/configuration.html
-
在線調試：https://prettier.io/playground/
