扒一扒vscode Prettier選項中的16個實用屬性，讓程式碼變美！

這篇文章扒拉一下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/

更多關於VSCode的相關知識，請訪問：

vscode教學！ ！

以上是扒一扒vscode Prettier選項中的16個實用屬性，讓程式碼變美！的詳細內容。更多資訊請關注PHP中文網其他相關文章！