這篇文章扒拉一下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中文網其他相關文章!