首頁 > 開發工具 > VSCode > 主體

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

青灯夜游
發布: 2022-05-10 21:18:16
轉載
5064 人瀏覽過

這篇文章扒拉一下vscode Prettier的選項,總結分享16個讓你的程式碼變漂亮的屬性,希望對大家有幫助!

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

做前端開發很久了,但每次都依賴鷹架或開源的程式碼模版的統一風格來寫程式碼,碰上不喜歡的又搞不清楚怎麼調整,百度幾下都沒搞好,只能將就著寫,這次就專門扒拉一下Prettier的選項,一次性搞懂這個在代碼格式化場景使用量相當大(20,533,053 安裝量)的工具。 【推薦學習:《vscode入門教學》】

Prettier介紹與使用設定:

     Prettier是一款以較少的配置來支援多種程式語言進行程式碼格式化的工具,並且在大多數常用的編輯器都有整合和提供的插件。

     我們在VSCode中透過文末提供的插件位址或在商店搜尋即可,找下載量最大的就對了。安裝插件後我們可以透過在專案根目錄設定.prettierrc檔案來設定一份符合我們自訂的風格,檔案內容推薦使用JSON格式組合。當然也支援其他的一個設定檔命名和書寫方式,文末也提供了原始文檔對應的位址,記得要將預設的格式化程式選擇為Prettier

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

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

     在這也推薦在專案下配置VSCode中儲存時格式化程式碼,並在視窗狀態變更是自動儲存,因為過多的保存可能會造成不必要的麻煩。

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

屬性介紹:

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中文網其他相關文章!

相關標籤:
來源:juejin.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板